正心全栈编程-文档站

Appearance

首页页面编写 ​

会需要用到一些静态资源（images、upload），请先复制到 static 目录

文章内容页渲染 ​

html
<div class="main">
  <!--文章列表-->
  <div class="articles">
    <div class="article">
      <a href="article.html" class="article_image">
        <img src="/static/upload/pic_code.jpg" alt="" />
      </a>
      <div class="article_content">
        <a href="article.html" class="article_title"
          >开源 – “这是最好的时代，这是最坏的时代”</a
        >
        <a href="article.html" class="article_detail">
          对于真正的程序员而言,毫无疑问,这是最好的时代。
          “这是最坏的时代”,开源,让滥竽充数的程序员无所遁形,能传承下去的一定是精美的作品,不再会有劣币驱逐良...</a
        >
        <div class="author_info">
          <div class="author">
            <img src="/static/images/person.png" alt="author" />
            <a href="/user.html">陶建辉(Jeff)</a>
          </div>
          <div class="time">2020-12-27 18:08:45</div>
        </div>
      </div>
    </div>
  </div>
  <!--侧边栏-->
  <div class="right-side"></div>
</div>
css
/* filename: static/css/main.css */
.main {
  min-height: calc(100% - 60px); /* 减去页脚的高度 */
}

.main {
  /*内容组件栏*/
  width: 1200px;
  overflow: hidden;
  margin: 20px auto 0;
  display: flex;
  gap: 10px;
}

/*文章内容部门*/
.articles {
  flex: 2.3;
}

.article {
  background: #fff;
  height: 168px;
  border: 1px solid #ececee;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
}

.article_image img {
  width: 168px;
  height: 168px;
}

.article_content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article_title {
  display: block;
  font-size: 18px;
  line-height: 18px;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  max-width: 640px;
}

.article_detail {
  height: 88px;
  font-size: 14px;
  line-height: 23px;
  color: #666;
}

.author_info {
  width: 616px;
  height: 20px;
  display: flex;
}

.author_info .time {
  margin-left: 15px;
  line-height: 20px;
  font-size: 12px;
  text-indent: 20px;
  color: #999;
  background: url(/static/images/clock.png) left center no-repeat;
}

.article_title:hover,
.article_detail:hover,
.author_info .author a:hover {
  color: #16baaa;
}

文章分页栏 ​

html
<div class="main">
  <!--文章列表-->
  <div class="articles">
    <div class="article"></div>

    <div id="article-page" style="text-align: center"></div>

  </div>
  <div class="right-side"></div>
</div>
javascript
// filename: static/js/main.js
layui.use(function () {
  let laypage = layui.laypage;
  laypage.render({
    elem: "article-pag",
    curr: 2,
    count: 100,
  });
});

最后需要引入新的 js

html
<script src="/static/js/main.js"></script>

侧边栏渲染 ​

html
<div class="main">
  <!--文章列表-->
  <div class="articles"></div>
  <div class="right-side">
    <!--排行榜栏-->
    <div class="rank_card">
      <div class="rank_title">
        <h3>排行榜</h3>
      </div>
      <div class="rank_list">
        <div>
          <span>1</span
          ><a href="article.html">苹果 M1 芯片预示着 RISC-V 完全替代 ARM？</a>
        </div>
        <div>
          <span>2</span><a href="article.html">用DNS进行网络度量和安全分析</a>
        </div>
        <div>
          <span>3</span
          ><a href="article.html"
            >阿里开源量子模拟器“太章2.0”，支持量子算法和纠错探索</a
          >
        </div>
        <div>
          <span>4</span
          ><a href="article.html">抖音 Android 性能优化系列：Java 内存优化篇</a>
        </div>
        <div>
          <span>5</span
          ><a href="article.html"
            >离散数学总复习精华版(最全 最简单易懂)已完结</a
          >
        </div>
        <div>
          <span>6</span
          ><a href="article.html">AI能帮你快速过滤看着烦的广告留言</a>
        </div>
      </div>
    </div>
  </div>
</div>
css
/* filename: static/css/main.css */
.right-side {
  flex: 1;
}

.rank_card {
  border: 1px solid #ececee;
}

.rank_title {
  height: 53px;
  background: #fff;
  border-bottom: 1px solid #ececee;
}

.rank_title h3 {
  line-height: 53px;
  font-size: 14px;
  color: #000;
  text-indent: 52px;
  background: url(/static/images/hit_icon.png) 20px center no-repeat;
}

.rank_list {
  background: #fff;
}

.rank_list div {
  width: 316px;
  margin: 0 auto;
  border-bottom: 1px solid #ececee;
  padding: 18px 0;
  overflow: hidden;
}

.rank_list div span {
  width: 10px;
  height: 19px;
  line-height: 19px;
  text-align: center;
  border-radius: 2px;
  padding: 5px 5px;
  margin-right: 5px;
  color: #16baaa;
}

.rank_list div a {
  width: 286px;
  font-size: 14px;
  color: #333;
}

.rank_list a:hover {
  color: #16baaa;
}

.rank_list div:nth-child(1) span {
  background: #f33;
  color: #fff;
  border-radius: 50%;
}

.rank_list div:nth-child(2) span {
  background: #ff722b;
  color: #fff;
  border-radius: 50%;
}

.rank_list div:nth-child(3) span {
  background: #fa3;
  color: #fff;
  border-radius: 50%;
}