文章详情页静态页面

详情页骨架渲染

后端视图

python

@index_bp.get("/article/<int:article_id>")
def article_view(article_id):
    return render_template('forum/article.html')

前端静态页面

对于前端页面，实现的方式有两种

可以把 index.html 的内容复制一份，缺点是重复的逻辑需要再每个页面都写一遍，更新的时候需要一个个页面去更新。好处是简单。
使用 jinja2 的 block 定义块，然后使用继承。缺点是需要封装，优点是不需要重复定义一些逻辑。

这里采用 jinja2 的方案，先封装一个 base.html 页面

templates/forum/base.htmltemplates/forum/index.html

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>正心论坛</title>
    <!--头部脚本-->
    {% block header_script %}
    <title>正心论坛</title>
    {% endblock %}
</head>
<body>
<!--头部标签栏-->
<div class="header">
    <div class="header-demo">
        {% block header %}{% endblock %}
    </div>
</div>

<!--主要内容部分-->
<div class="main">
    {% block main %}{% endblock %}
</div>

<!--页脚部分-->
<div class="footer">
    {% block footer %}{% endblock %}
</div>

<!-- 页脚脚本 -->
{% block footer_script %}{% endblock %}
</body>
</html>

html

{% extends 'forum/base.html' %}

{% block header_script %}
    <title>正心论坛</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="/static/layui/layui.js"></script>
{% endblock %}

{% block header %}
    <a href="/" class="logo">
        正心全栈论坛
    </a>

    <!--中间分类栏 省略-->
    <!--登录注册栏 省略-->
{% endblock %}

{% block main %}
    <!--文章列表 省略-->
    <!--侧边栏 省略-->
{% endblock %}

{% block footer %}
    <!--页脚内容 省略-->
{% endblock %}

{% block footer_script %}
     <form class="layui-form register_form" lay-filter="register_form">
        <!-- 表单内容 省略 -->
     </form>

    <form class="layui-form login_form"lay-filter="login_form">
        <!-- 表单内容 省略 -->
    </form>
    <script>
        let page = {{ paginate.page }};
        let limit = {{ paginate.per_page }};
        let count = {{ paginate.total }};
    </script>
    <script src="/static/js/passport.js"></script>
    <script src="/static/js/main.js"></script>
{% endblock %}

页面拆分之后，需要对 JavaScript 拆分。之前的 main.js 中有部分内容，只能在 index 页使用，还有部分内容是通用的，需要拆分为 main.js 与 `index.js.

main.jsindex.js

javascript

layui.use(function () {
    let $ = layui.$

    let params = new URLSearchParams(location.search)
    // 首页分类切换
    $('.menu li').click(function () {
        let click_cid = $(this).attr('data-cid');
        $('.menu li').each(function () {
            $(this).removeClass('active');
        });
        // 设置当前标签别选中并且高亮
        $(this).addClass('active');

        if (params.get('cid') !== click_cid) {
            // 记录当前分类id
            params.set('cid', click_cid)
            // 重置分页参数
            params.set('page', '1')
            location.href = '/?' + params.toString()  
            location.search = params.toString()  
        }
    });

    // 高亮当前选择的内容  SSR 渲染之后的内容
    if (params.get('cid')) {
        $('.menu li').removeClass('active');
        $(`li[data-cid="${params.get('cid')}"]`).addClass('active')
    }
})

javascript

layui.use(function () {
    let laypage = layui.laypage
    let $ = layui.$
    laypage.render({
        elem: 'article-page'
        , curr: page
        , count: count
        , first: '首页'
        , last: '尾页'
        , limit: limit
        , prev: '<em>←</em>'
        , next: '<em>→</em>'
        , jump: function (obj, first) {
            if (!first) {
                if (obj.curr !== page) {
                    /*模板渲染*/
                    console.log(obj);
                    let params = new URLSearchParams(location.search)
                    params.set('page', obj.curr)
                    location.search = params.toString();
                }
            }
        },
    });

    $.ajax({
        url: '/api/v1/hot_article',
        type: 'get',
        success: function (res) {
            res.results.forEach((article, index) => {
                $('.rank_list a').eq(index).text(article.title).attr('href', `/article/${article.id}`)
            })
        }
    })
})

然后修改 index.html 中的引入

html

{% block footer_script %}
    <!-- 前面代码省略 -->
    <script src="/static/js/passport.js"></script>
    <script src="/static/js/main.js"></script>
    <script src="/static/js/index.js"></script>  
    <link rel="stylesheet" href="/static/css/article.css">  
{% endblock %}

然后编写文章详情页

templates/forum/article.html

html

{% extends 'forum/index.html' %}


{% block main %}
    内容详情页
{% endblock %}


{% block footer_script %}
    <form class="layui-form register_form" lay-filter="register_form">
        <!-- 表单内容 省略 -->
     </form>

    <form class="layui-form login_form"lay-filter="login_form">
        <!-- 表单内容 省略 -->
    </form>

    <script src="/static/js/passport.js"></script>
    <script src="/static/js/main.js"></script>
    <script src="/static/js/article.js"></script>
{% endblock %}

详情页内容渲染

article.htmlarticle.css

html

{% block main %}
    <div class="article-content">
        <h3>开源 – “这是最好的时代，这是最坏的时代”</h3>
        <div class="detail_about">
            <span class="time_source">2018-01-16 14:38</span>
            <span class="author"> 来源: 商务部</span>
            <span class="comment_count">3</span>
        </div>

        <p class="summary">
            开源给程序员提供了一个展现自己个人能力的绝好机会，特别是对于大厂、大系统的开发者。这个展现，能让大家更加客观地评价一个程序员的价值。
        </p>

        <p>
            今天一早，我给一位远在西安还从未谋面的程序员小邓发出了一份很不错的offer。一周前，他观看腾讯开发者大会的直播视频，听了我的演讲之后，加了我的微信，并主动告诉我，很想加入涛思数据。虽然他毕业的学校还有工作的经历，不是那么靓丽，但我一下看到了他简历里列的GitHub地址以及参与的开源项目，因此马上进GitHub浏览他的程序，发现程序挺漂亮，结构、层次都很清晰，代码可读性很强，更让我惊讶的是，用英文写的文档以及注释完全不输给我这个在美国留学工作10多年的海归。我立即让另外一个同事也去看一下他的代码，得出的结论是，这人很优秀，即使远程工作，也值得马上录用。因此我们马上视频交流，很快，我就定下了录用的决定。
        </p>
        <p>
            如果没有GitHub，没法翻看他写的上万行代码以及文档，没法查看修改记录，我绝不会考虑录用一个连面都没有见过的小伙子，而且招聘时，还是会更倾向于我中国科大的师弟师妹，或有过其他名校就读和大厂工作经历的人。<strong>开源，改变了我的面试流程，改变了涛思数据，也改变了一个程序员的人生轨迹。</strong>
        </p>
        <p>现在的软件系统往往很大，以大家熟悉的Linux内核为例，源代码行数已经超过2500万行，文件超过6万个，参与的开发者超过2万人。就连涛思数据开源的TDengine,
            一个看似简单的物联网大数据处理平台软件，C/C++代码已经超过30万行，Python测试代码都已超过15万行，而且还会成倍增长。开发一款软件，更多的是团队协同，而不是单兵作战。单个程序员的贡献如何体现？如何让外界的人知道并评估？对于闭源软件来说，这个价值判断问题无从下手。但开源不同，因为程序员写的任何一行代码，注释，做的任何修改都会被记录下来，而且任何人都可以看到。能力的高低，贡献的大小随时可查。</p>
        <p>
            <img alt=""
                 src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9zTkVDYVZqNUtYUHJFeXliV0pLOUNrQXRiOVRVTUtpYXJ2RWljQWljajNvbzNOVnJ2Sm1GWTR6MnZQbk1wblR0ZWFZVzJxalNEVEFsSjZnVDdPb1Jnd1hiQS82NDA?x-oss-process=image/format,png">TDengine
            在 GitHub 上的页面</p>
        <p>
            开源给程序员提供了一个展现自己个人能力的绝好机会，特别是对于大厂、大系统的开发者。这个展现，能让大家更加客观地评价一个程序员的价值。长期以来，大家更容易相信在大厂工作过的，虽然他有可能从没贡献过核心代码，从没解决过重大技术问题，只是一个滥竽充数之辈；大家更倾向于相信名校毕业的，即使他早已停止学习，只是曾经高考分数不错；大家更容易相信35岁以下的人，不相信大龄程序员依然有很强的战斗力。开源的代码，能让大家抛弃对教育、年龄、性别、经验、肤色、地域、文化的偏见，看到一个程序员背后真正的价值，便于组建团队，便于协同作战。</p>
        <p>
            开源让程序员的代码成为了作品，与画家的画、音乐家的曲子一样，可以被全球程序员欣赏、使用，并传承。对于闭源的软件而言，这是不可能的，大家看到的只是UI或API，无法让人看到程序本身，更无从欣赏。你在微软为Windows
            操作系统开发的核心模块，无论设计得多么优雅，你在腾讯为微信后台设计的消息处理模块，无论高并发能力有多么强悍，都无法让人欣赏、惊叹。但开源之后，一切都变了。只要你的代码足够好，解决了重大问题，那一定会成为传世之作。即使有瑕疵，后来者也可以在你的基础上修改，但你的名字永远会镌刻在代码上，而不会被历史冲刷掉。</p>
        <p>
            有了作品这个感觉之后，程序员会天然的对自己的代码产生一种自豪感，会对代码的质量产生极致的追求，因为他不想自己的代码被人唾弃，而是被欣赏。在2019年7月决定将TDengine开源之前，涛思数据团队花了好几个月的时间整理代码，编写文档，目的就是不想让它过于难看，被人诟病。不开源的话，我们根本没有这个动力去做，因为用户是看不见的。在2019年底启动TDengine
            2.0的开发，更是如此，就是想让TDengine的设计与代码更加优雅，结构更加清晰，让其他程序员看的时候，能享受到一种快乐和美感。3个月前，我花了几天时间动手为TDengine写了一个小模块tref.c，就想完美地解决在多线程情况下，资源的生命周期管理问题，而且就希望这个500来行的小程序能被全球的程序员学习、使用和改进，不再为多线程问题所烦。如果不是因为开源，没有会成为作品的感觉，我大半就是仅仅解决一个具体问题而已。</p>
        <p style="text-align:center;">
            <img alt=""
                 src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9zTkVDYVZqNUtYUHJFeXliV0pLOUNrQXRiOVRVTUtpYXJuOXU4WnZMa29IWXdYZ01zYW9Ic1RpYXp2UEdsYk9JUzRTa2dZR2Y5Rmx2dzROdFQwZlUydjRBLzY0MA?x-oss-process=image/format,png">
        </p>
        <p>GitHub&nbsp;上 tref.c 的一段源代码</p>
        <p>
            对于初入茅庐的程序员而言，参与开源项目，更是一种学习的机会。不仅可以观摩、学习绝顶高手的代码，更可以参与其中，贡献一段代码。自己写的代码有问题，一定会被测试出来、被人指出毛病，甚至直接被人修改或抛弃。与大侠直接过招，相比闭门造车，相比自己摸索，成长的速度要快N倍。而且参与的方式有很多种，除直接贡献产品代码外，还可以贡献测试例、测试代码，贡献文档，贡献使用案例等。就象TDengine，测试代码的行数将会远超过产品本身的代码行数，而且对技术的要求一点都不亚于产品本身。我的第一行程序是1984年写下的，当时正读高中一年级，只能看到谭浩强编写的《BASIC语言程序》这本书，书里尽是一些简单得不能再简单的程序。如果当时就能像现在这样访问无数优秀的开源代码，对于一个如饥似渴的学生而言，那无疑找到了世界上最好的课本和老师。</p>
        <p>
            对于90后00后程序员而言，开源，让他们赶上了程序员前所未有的黄金时代。对于我这个52岁的大龄程序员而言，仍然是赶上了黄金时代，因为可以依靠自己的实力证明，编程没有年龄的限制，而且仍大有用武之地。真心的希望，三十年之后，还有人在看在用我写的代码，而且我自己还能给TDengine贡献代码，那才是我最大的幸福。</p>
        <p style="text-align:center;">
            <img alt=""
                 src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9zTkVDYVZqNUtYUHJFeXliV0pLOUNrQXRiOVRVTUtpYXJ1elU1bXh4T3JsTFM2c0hqRjJQaWNsUFI5SElINHlZbURPc3NUend1bEtRMVl0MGFUNUVqNGpBLzY0MA?x-oss-process=image/format,png">
        </p>
        <p>这台Mac为TDengine贡献了4万多行代码</p>
        <p><strong>“这是最好的时代”</strong>，开源，让程序员的价值能更客观地展现，让程序员有了属于自己的作品，让程序员去追求极致，有动力去打磨作品，让其成为传世之作。对于真正的程序员而言，毫无疑问，这是最好的时代。
        </p>
        <p><strong>“这是最坏的时代”</strong>，开源，让滥竽充数的程序员无所遁形，能传承下去的一定是精美的作品，不再会有劣币驱逐良币之说。对于靠拍、靠混，依赖炫酷的PPT和报告升迁的程序员而言，毋庸置疑，这是最坏的时代。
        </p>
        <p>无论年龄，无论学历，无论是在BAT还是在startup工作,&nbsp;
            只要你热爱编程，就一定要参与到开源的浪潮中。无论你是全职加入涛思数据这样的开源软件公司，还是作为社区贡献者参与一个开源项目，只要持续努力，你一定会给世界留下一个印迹，给人类留下一幅作品。</p>
        <p>陶建辉</p>
        <p>2020年12月27日于北京望京</p>

        <!--收藏/取消收藏-->
        <a href="javascript:;" class="collection block-center">收藏</a>
        <a href="javascript:;" class="collected block-center" style="display: none">
            <!--      <a href="javascript:;" class="collected block-center">-->
            <span class="out">已收藏</span>
            <span class="over" style="display: none">取消收藏</span>
        </a>


        <!--评论栏-->
        <!--评论栏-未登陆显示登陆之后进行评论-->
        <div class="comment_form_logout">
            登录发表你的评论
        </div>
        <!--评论栏-登陆之后显示用户头像并进行评论-->
        <form class="layui-form comment_form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label person_pic">
                    <img src="../static/images/cat.jpg" alt="用户图标">
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="float: right">
                    <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit
                            lay-filter="comment">评论
                    </button>
                </div>
            </div>
        </form>
        <!--评论列表-->
        <div class="comment_list">
            <div class="comment">
                <div class="person_pic">
                    <img src="../static/images/worm.jpg" alt="用户图标">
                </div>
                <div class="comment-content">
                    <div class="username">用户张山</div>
                    <div class="comment_text">
                        写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！
                    </div>
                    <div class="comment_info" data-cid="1">
                        <div class="comment_time">2020-01-01 00:00:00</div>
                        <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                        <a href="javascript:;" class="comment_reply">回复</a>
                    </div>

                    <div class="sub-comment">
                        <div class="sub-username">用户李思</div>
                        <div class="comment_text">
                            个人认为，这篇文章同样代表了开源的另一个现实——令人悲哀。推广请好好推，别把应聘和推广以及开源相提并论，这样只会拉低你们开源的价值。
                        </div>
                        <div class="comment_info" data-cid="2">
                            <div class="comment_time">2020-01-01 00:00:00</div>
                            <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                            <a href="javascript:;" class="comment_reply">回复</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="comment">
                <div class="person_pic">
                    <img src="../static/images/worm.jpg" alt="用户图标">
                </div>
                <div class="comment-content">
                    <div class="username">用户张山</div>
                    <div class="comment_text">
                        写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！
                    </div>
                    <div class="comment_info" data-cid="3">
                        <div class="comment_time">2020-01-01 00:00:00</div>
                        <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                        <a href="javascript:;" class="comment_reply">回复</a>
                    </div>

                    <div class="sub-comment">
                        <div class="sub-username">用户李思</div>
                        <div class="comment_text">
                            个人认为，这篇文章同样代表了开源的另一个现实——令人悲哀。推广请好好推，别把应聘和推广以及开源相提并论，这样只会拉低你们开源的价值。
                        </div>
                        <div class="comment_info" data-cid="4">
                            <div class="comment_time">2020-01-01 00:00:00</div>
                            <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                            <a href="javascript:;" class="comment_reply">回复</a>
                        </div>
                    </div>

                    <form class="layui-form reply_form" action="">
                        <div class="layui-form-item">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="float: right">
                                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm"
                                        lay-submit
                                        lay-filter="sub-comment">评论
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="comment">
                <div class="person_pic">
                    <img src="../static/images/worm.jpg" alt="用户图标">
                </div>
                <div class="comment-content">
                    <div class="username">用户张山</div>
                    <div class="comment_text">
                        写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！
                    </div>
                    <div class="comment_info" data-cid="5">
                        <div class="comment_time">2020-01-01 00:00:00</div>
                        <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                        <a href="javascript:;" class="comment_reply">回复</a>
                    </div>
                </div>
            </div>

            <div class="comment">
                <div class="person_pic">
                    <img src="../static/images/worm.jpg" alt="用户图标">
                </div>
                <div class="comment-content">
                    <div class="username">用户张山</div>
                    <div class="comment_text">
                        写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！
                    </div>
                    <div class="comment_info" data-cid="6">
                        <div class="comment_time">2020-01-01 00:00:00</div>
                        <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                        <a href="javascript:;" class="comment_reply">回复</a>
                    </div>
                    <form class="layui-form reply_form" action="">
                        <div class="layui-form-item">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="float: right">
                                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm"
                                        lay-submit
                                        lay-filter="sub-comment">评论
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            <div class="comment">
                <div class="person_pic">
                    <img src="../static/images/worm.jpg" alt="用户图标">
                </div>
                <div class="comment-content">
                    <div class="username">用户张山</div>
                    <div class="comment_text">
                        写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！
                    </div>
                    <div class="comment_info" data-cid="7">
                        <div class="comment_time">2020-01-01 00:00:00</div>
                        <a href="javascript:;" class="comment_up" style="float: right">赞</a>
                        <a href="javascript:;" class="comment_reply">回复</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="right-side">
        <div class="article_author_card">
            <a href="user.html" class="author_pic">
                <img src="../static/images/user_pic.png" alt="author_pic">
            </a>
            <a href="user.html" class="author_name">张大山</a>


            <div class="author_resume">
                张大山的简介,张大山张大山的简介,张大山张大山的简介,张大山张大山的简介,张大山张大山的简介,张大山
            </div>

            <div style="margin-bottom: 10px;">
                <span class="writings"><span>总篇数：</span><b>23</b></span>
                <span class="follows"><span>粉丝：</span><b>36</b></span>
            </div>

            <div>
                <a href="javascript:;" class="focus">关注</a>
                <a href="javascript:;" class="focused">
                    <span class="out">已关注</span>
                    <span class="over">取消关注</span>
                </a>
            </div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272

css


.article-content {
    /*文章详情内容*/
    flex: 2.3;
    overflow: hidden;
    /*width: 778px;*/
    padding: 20px;
    background: #fff;
    border: 1px solid #ececee;
}

.article-content h3 {
    font-size: 30px;
    line-height: 45px;
}

.detail_about {
    /*文章详情（发布时间/评论）*/
    margin: 10px 0;
    border-bottom: 1px solid #ebebeb;
    padding: 10px 0;
}

.detail_about .time_source {
    color: #999;
    font-size: 12px;
    padding-left: 20px;
    background: url(/static/images/clock.png) left center no-repeat;
}

.detail_about .author {
    color: #999;
    font-size: 12px;
    padding-left: 20px;
}

.detail_about .comment_count {
    /*评论数量*/
    color: #999;
    font-size: 12px;
    margin-left: 20px;
    padding-left: 20px;
    background: url(/static/images/comment_icon.png) left center no-repeat;
}


.article-content .summary {
    /*摘要*/
    letter-spacing: 0.5px;
    text-align: justify;
    background: #f0f2f5;
    font-size: 16px;
    line-height: 28px;
    padding: 15px 25px;
    margin-top: 30px;
    position: relative;
}

.article-content .summary:before {
    position: absolute;
    left: 5px;
    top: 5px;
    content: "『";
}


.article-content .summary:after {
    position: absolute;
    right: 5px;
    bottom: 5px;
    content: "』";
}

.article-content h4 {
    /*文章内容*/
    font-size: 18px;
    font-weight: 700;
    color: #16baaa;
    border-left: 5px solid #16baaa;
    padding-left: 10px;
}


.article-content p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 30px;
}

.article-content img {
    width: 100%;
}


.collection {
    /*收藏*/
    display: block;
    margin: 0 auto;
    width: 98px;
    line-height: 34px;
    text-indent: 45px;
    border: 1px solid #16baaa;
    color: #16baaa;
    border-radius: 4px;
    font-size: 14px;
    background: url(/static/images/collect_icons.png) 21px 7px no-repeat;
    overflow: hidden;
}

.collection:hover {
    background: url(/static/images/collect_icons.png) 21px -33px no-repeat;
}

.collected {
    /*取消收藏*/
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 36px;
    line-height: 34px;
    text-indent: 45px;
    color: #666;
    border-radius: 4px;
    font-size: 14px;
    background: url(/static/images/collect_icons.png) 15px -73px no-repeat #e6e6e6;
    position: relative;
    overflow: hidden;
}

.collected:hover {
    color: #666;
    border: 1px solid #16baaa;
    background: url(/static/images/collect_icons.png) 21px 7px no-repeat;
    width: 120px;
}

.comment_form_logout {
    /*登录之后进行评论*/
    border: 1px solid #e3e8ee;
    border-radius: 4px;
    padding: 15px 10px;
    outline: none;
    font-size: 16px;
    color: #e3e8ee;
    margin-top: 50px;
}


.comment_form {
    /*登录之后评论表单数据渲染*/
    margin-top: 50px;
    overflow: hidden;
}

.person_pic {
    padding: 6px 0;
    margin: 0 auto;
}

.comment_form .person_pic img {
    width: 80px;
    border-radius: 50%;
}

.comment_list {
    border-top: 1px solid #ebebeb;
}

.comment {
    /*评论列表*/
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
    margin-top: 15px;
    padding-bottom: 15px;
    display: flex;
}

.comment_list .person_pic {
    width: 40px;
}

.comment_list .person_pic img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
}

.comment-content .username {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
}

.comment_text {
    width: 718px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin: 10px 0;
}


.comment_time {
    font-size: 12px;
    color: #999;
}

.comment_up {
    /*评论点赞*/
    font-size: 12px;
    color: #999;
    text-indent: 20px;
    background: url(/static/images/zan_icon.png) left top no-repeat;
}

.has_comment_up {
    /*如果已经被点赞了就高亮图标*/
    font-size: 12px;
    color: #999;
    text-indent: 20px;
    background: url(/static/images/zan_icon.png) left bottom no-repeat;
}

.comment_reply {
    /*回复评论*/
    font-size: 12px;
    color: #999;
    text-indent: 20px;
    background: url(/static/images/reply_icon.png) left center no-repeat;
}

.reply_form {
    margin-top: 10px;
}

.sub-comment {
    /*二级回复显示*/
    width: 698px;
    padding: 10px;
}

.sub-username {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: #333;
    margin-bottom: 8px;
}

.comment_info {
    display: flex;
    flex-direction: row;
    gap: 10px
}

.article_author_card {
    /*文章作者信息展示*/
    padding: 10px;
    border: 1px solid #ececee;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #fff;
}

.article_author_card .author_pic {
    width: 60px;
    height: 60px;
}

.article_author_card img {
    width: 60px;
    height: 60px;
    border-radius: 30px;
}

.article_author_card .author_name {
    color: #333;
    font-size: 22px;
    line-height: 60px;
    margin-left: 16px;
}


.article_author_card .author_name:hover {
    color: #16baaa;
}

.article_author_card .author_resume {
    width: 100%;
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    margin-bottom: 10px;
}

.article_author_card .writings,
.article_author_card .follows {
    margin: 20px 30px 0 0;
}

.focus {
    /*个人信息 关注*/
    display: inline-block;
    width: 98px;
    line-height: 34px;
    text-indent: 45px;
    border: 1px solid #f80;
    color: #f80;
    border-radius: 4px;
    font-size: 14px;
    background: url(/static/images/focus_icons.png) 21px 7px no-repeat;
    overflow: hidden;
}

.focus:hover {
    background: url(/static/images/focus_icons.png) 21px -33px no-repeat;
}

.focused {
    /*个人信息 取消关注*/
    display: inline-block;
    width: 100px;
    height: 36px;
    color: #666;
    border-radius: 4px;
    font-size: 14px;
    background: url(/static/images/focus_icons.png) 15px -73px no-repeat #e6e6e6;
    position: relative;
    overflow: hidden;
}

.focused:hover {
    background-position: 10px -73px;
}

.focused:hover .out {
    left: 40px;
    top: 35px;
}

.focused:hover .over {
    left: 33px;
    top: 8px;
}


.focused .out {
    position: absolute;
    left: 40px;
    top: 8px;
}


.focused .over {
    position: absolute;
    left: 40px;
    top: 35px;
}

文章详情页静态页面 ​

详情页骨架渲染 ​

后端视图 ​

前端静态页面 ​

详情页内容渲染 ​

文章详情页静态页面

详情页骨架渲染

后端视图

前端静态页面

详情页内容渲染