正心全栈编程-文档站

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;
}

.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%;
}