halo-theme-hao主题：artalk评论区美化

一、效果预览

artalk 评论区的功能确实很强大，但是有些样式的美观程度还是略逊于 twikko 的，因此在 theme-hao 主题的基础上参照 twikko 样式进行了一些修改，最终呈现的评论区样式如下：

亮色模式

二、美化过程

美化的内容主要包括如下几点：

• 表情栏的各个表情包的间距显示样式
• 表情、图片上传、预览之间的显示样式
• 登录时候的输入框美化
• 评论和回复区域加入了边框
• 时间、徽标、浏览器、操作系统标签美化
• 代码展示区域美化
• 评论区回复内容优化
• 评论内容链接优化
• 评论内容图片优化
• 徽章显示修改

1、样式修改

在 theme-hao 主题的 themes/theme-hao/templates/assets/zhheo/custom.css 文件后边加入如下内容：

/*artalk 样式修改*/
[data-theme=dark] .atk-comment-wrap {
    border: 1px solid #3d3d3f !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
    background-color: #1b1c20;
}
.atk-comment-wrap {
    border: 1px solid #e3e8f7 !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
}
.atk-grp-switcher span{
    padding: 0 .6rem !important;
}
[data-theme=dark] .atk-main-editor .atk-header input{
    border-radius: 8px;
    border: 1px solid #3d3d3f;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}
.atk-main-editor .atk-header input{
    border-radius: 8px;
    border: 1px solid #3d3d3f;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}
[data-theme=light] .atk-main-editor .atk-header input{
    border-radius: 8px;
    border: 1px solid #e3e8f7;;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}

.atk-comment>.atk-main>.atk-body>.atk-reply-to{
    border: 1px solid var(--at-color-border) !important;
    border-radius: 8px;
}
.atk-comment>.atk-main>.atk-header .atk-date{
    background: var(--heo-secondbg);
    border: var(--style-border-always);
    padding: 0 8px ;
    border-radius: 8px;
    margin-right: 4px !important;
    color: var(--at-color-meta) !important;
    display: inline !important;
}

.atk-comment>.atk-main>.atk-header .atk-ua-wrap .ua-browser,.ua-os, .atk-region-badge{
    background: var(--heo-secondbg) !important;
    border: var(--style-border-always) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    margin-right: 4px !important;
    color: var(--at-color-meta) !important;
    display: inline !important;
}
.atk-comment>.atk-main>.atk-header .atk-badge{
    border: var(--style-border-always) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    margin-right: 4px !important;
}
.artalk pre code {
    background: var(--heo-secondbg) !important;
    border-radius: 12px;
    border: var(--style-border-always);
}
.atk-comment-children>.atk-comment-wrap>.atk-comment {
    padding: 6px !important;
}
.atk-comment>.atk-main>.atk-body>.atk-content a:not(.fancybox){
    background: var(--heo-secondbg);
    border: var(--style-border-always);
    padding: 0 8px;
    border-radius: 8px;
    display: inline;
}
.atk-comment>.atk-main>.atk-body>.atk-content a:not(.fancybox)::after{
    content: " 🔗";
}
.atk-comment>.atk-main>.atk-body>.atk-content img{
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

2、修改徽章

找到用户选型并对选中的用户进行编辑，在如下界面中进行修改徽章文字和颜色：

三 评论区加入数学公式

theme-hao 主题并没有默认加入数学公式显示功能，如果想要使用该功能只能自行加入，或者使用我开发的 artalk评路区 插件开启数学公式支持进行使用。效果如下：

在 theme-hao 主题中，加入方式如下。只不过需要注意资源加载次序的问题，所以有很多同学自己在主题里边引入数学公式总是报错或者功能无法正常显示。

步骤一：

在 themes/theme-hao/templates/modules/comment/Artalk.html 文件中找到如下内容

<div class="js-pjax">
     <script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
     <input type="hidden" name="page-type" id="page-type" value="album">
</div>

接着在该代码上边引入 katex 相关资源，注意css资源不要下载到本地进行替换，使用在线资源即可，不然会缺失一些在线字体样式，katex.min.js 文件下载到本地引入，具体路径和引入代码中的保持一致即可。

!-- 引入 Katex css -->
<link rel="stylesheet" href="https://unpkg.com/katex@0.16.7/dist/katex.min.css" />
<script data-pjax th:src="${assets_link + '/libs/artalk/katex.min.js'}"></script>

步骤二：

找到文件 themes/theme-hao/templates/assets/js/comment/artalk.js ，在文件中找到如下代码：

const loadArtalk = async () => {
        if (typeof window.artalkItem === 'object') initArtalk()
        else {
            await getCSS(GLOBAL_CONFIG.source.artalk.css)
            await getScript(GLOBAL_CONFIG.source.artalk.js)
            initArtalk()
        }
    }

之后必须在 await getScript(GLOBAL_CONFIG.source.artalk.js) 后边加入如下代码:

await getScript("https://unpkg.com/@artalk/plugin-katex/dist/artalk-plugin-katex.js");

步骤三：

在 themes/theme-hao/templates/modules/comment/Artalk.html 文件中找到如下内容，在 artalk.js 加入版本号防止缓存而导致的不生效问题。

<div class="js-pjax">
     <script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
     <input type="hidden" name="page-type" id="page-type" value="album">
</div>

替换后如下：

<div class="js-pjax">
        <script th:src="${assets_link + '/js/comment/artalk.js' + theme_version}"></script>
        <input type="hidden" name="page-type" id="page-type" value="album">
    </div>

至此，你的评论区便可以支持数学公式了，希望我的记录对你有所帮助！