hexo：next主题美化进阶设置

hexo进阶教程

[toc]

Hexo博客-绑定个人域名

1. 首先得有一个域名，在腾讯云阿里云购买都可以。

2. 设置域名解析

3. 设置CNAME

4. 在 hexo 项目下的source 文件夹下面创建 CNAME 文件（没有后缀名的），Mac用户可以

   

   在里面写上购买的域名。

5. 在 github 上面，打开 username.github.io 项目的（Settings）设置，然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如：

点击save就可以了。

在每篇文章末尾统一添加“本文结束”标记

实现效果图

具体实现方法

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.njk 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------------- 本文结束 <i class="fas fa-book-reader"></i> 感谢阅读 -------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.njk文件，在post-body 之后， post-footer 之前添加如下圈住的代码：

<div>
  {% if not is_index %}
  {% include 'passage-end-tag.njk' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

代码复制和设置Mac风格

copy_button: # 复制代码按钮
  enable: true #原始false
  show_result: true #原始true
  # Available values: default | flat | mac
  style: mac #代码更换mac风格

添加本站运行时间和底部信息排列优化

打开themes/next/layout/_partials/footer.njk文件，在末尾加入如下代码：

<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("01/01/2022 00:00:00");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

要是觉得时间有两行不好看的花，也可以将

<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>

改成以下代码

<span><span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span></span>

将访问人数和字数统计合并在同一行，用一个span标签包裹起来,在themes/next/layout/_partials/footer.njk这个文件中，找到class="wordcount"，将其标签从div改成span。class="busuanzi-count"这个div也同样改成span，然后再用一个span将它们两个包裹起来。

这里博主有个不明白的地方，span本来就是行内元素，假设有两个span为a和b，怎么两个span就变成了两行，然后将a和b这两个span用一个span包裹起来，它们就可以在同一行上了，如果有知道的大佬可以告知本菜鸡一些，不胜感激！