主题雪微调记录 | ZhouZhou Blog

本主题基于 halo 主题雪，在其基础上修改一些细节表现，修改后的地址：zwc456baby

本篇博客纯记录，如果日后 halo 主题进行了同样的细节修改，会进行合并

之所以要记录，是想之后能继续跟随雪进行更新合并。以防时间一长，不知道改了哪里，合并时出错

调整文字页面的关键字和描述(利于 seo 优化)

post.ftl 第二行处

<@layout title="${post.title!} | ${options.blog_title!} " keywords="${meta_keywords!}" description="${meta_description!}">

调整 keywords 和 description 取值

增加文字最后编辑时间

post.ftl 25 行处

                            <#if "${post.createTime}" != "${post.editTime}">
                                <time class="published"
                                      style="font-size: 14px;"
                                      datetime="${post.editTime?string("yyyy-MM-dd")}">最后编辑: ${post.editTime?string("yyyy-MM-dd")}</time>
                            </#if>

除了增加最后编辑时间，还设置了字体大小为 14px (在手机小屏上表现效果好一些)

调整分页逻辑

调整分页逻辑是为了防止蜘蛛爬虫无限爬取下一页

module/pagination.ftl 18行处和 journals.ftl 66 行处

    <#if pagination.hasNext>
        <li class="pagination-next">
            <a class="pagination-circle" href="${pagination.nextPageFullPath!}">
                <span class="iconfont icon-right-fill"> </span>
            </a>
        </li>
    </#if>

不存在下一页时直接不渲染，而不是隐藏（同样是为了对搜索引擎优化）

source/js/_plugins/night-mode.js 修改方法及调用

// 首先定义一个key：
var userSelectNightModeId = 'userSelectNightMode';

// 在 clickNightMode 方法中增加
//这里的目的是记录用户已经手动选择过夜间模式了，使其不要再自动跟随系统
hanUtils.setLocalStorage(userSelectNightModeId, true);

    autoNightMode: function () {
        // 如果用户手动选择过夜间模式,则不要自动跟随系统的夜间模式
        // 如果用户未手动选择过,则判断系统是否已经开启，并跟随
        if(hanUtils.getLocalStorage(userSelectNightModeId)){
            // 根据当前时间判断是否是晚上
            // 如果当前是晚上,由于各种设置会不一样,这里干脆写死, 并且开启了自动夜晚模式
            nightMode.changeNightMode(hanUtils.getLocalStorage(nightModeId));
        }else{
            nightMode.changeNightMode(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
        }
    }

目前是直接 js 代码中自动跟随并开启
有条件的话，应该可以在主题页面中增加一项设置: 是否自动跟随系统夜间模式
目前虽然没提供配置项，但已经足够了，因为系统的夜间模式是用户可以控制的，所以最好是跟随用户设定

卡片点击摘要可跳转

index.ftl 第 55 行处，新增一个 <a> 标签，用这个 a 标签包裹整个 card ，使其可以点击跳转

修改文章留言 a 标签

在 model 的 comment.ftl 模板中


            var findCount = 0;
            var intervalId = setInterval(() => {
              findCount++;
              if(findCount > 100){clearInterval(intervalId);}
              if(document.getElementById('haloComment')){return;}
              const shadowHalo = document.getElementsByTagName('halo-comment')[0]
              const shadowCommentNodes = shadowHalo.shadowRoot.getElementById('comment-nodes')
              if(!shadowCommentNodes){return;}
              clearInterval(intervalId)
              console.log('--- clear element href')
              let tagA = shadowCommentNodes.getElementsByClassName("author-name");
              let tagAvatar = shadowCommentNodes.getElementsByClassName("comment-avatar");
              tagA.forEach(e=>{e.removeAttribute("href");});
              tagAvatar.forEach(e=>{
                e.getElementsByTagName('a').forEach(ea=>{ea.removeAttribute("href");})
              })
              clearInterval(intervalId)
            }, 100)