HEXO笔记⑥-Hexo博客NexT主题一些常用客制化修改

目录

• 修改文章内链接文本样式、
• 修改底部标签样式
• 主页文章添加阴影效果
• 显示文章结束标记
• 网站底部加上访问量
• 网站底部字数统计
• 实现文章统计功能
• 添加 AddThis 分享
• 在文章底部增加版权信息
• 添加外链网易云音乐

参照简书

修改文章内链接文本样式

修改themes/next/source/css/_common/components/post/post.styl，在末尾添加如下 css 样式

/* 文章内链接文本样式 */
.post-body p a {
    /* 原始链接颜色 */
    color: #0593d3;
    border-bottom: none;
    /* 底部分割线颜色 */
    border-bottom: 1px solid #0593d3;
    &:hover {
        /* 鼠标经过颜色 */
        color: #fc6423;
        border-bottom: none;
        /* 底部分割线颜色 */
        border-bottom: 1px solid #fc6423;
    }
}

修改底部标签样式

修改 NexT 主题的_config.yml 文件，修改tag_icon节点值为true，即可启用fa fa-tag标签图标

tag_icon: true

主页文章添加阴影效果

在文件themes/next/source/css/_common/components/post/post.styl中，找到.post-block 处，修改 if 判断成立时里面 css 样式如下

/* 主页文章添加阴影效果 */
.post-block {
    opacity: 0;
    /* margin-top: 30px; */
    /* margin-bottom: 30px; */
    padding: 25px;
    box-shadow: 0 0 5px rgba(202, 203, 203, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 0.5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, 0.5);
}
.pagination,
.comments {
    opacity: 0;
}

显示文章结束标记

• 在themes/next/layout/_macro路径下新建文件passage-end-tag.swig，输入一下内容

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

• 修改NexT主题目录下文件themes/next/layout/_macro/_post.swig，在END POST BODY后面添加如下文章结束标记

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

网站底部加上访问量

• 修改themes/next/layout/_partials/footer.swig文件，在copyright处加上不蒜子网页计数器

<script
    async
    src="//cdn.jsdelivr.net/gh/sukkaw/busuanzi@2.3/bsz.pure.mini.js"
></script>

• 在底部与powered-by前面添加访问量显示

<div class="powered-by">
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
        本站访客数:<span id="busuanzi_value_site_uv"></span>
    </span>
</div>

<span class="post-meta-divider">|</span>

<!--pv的方式，单个用户连续点击n篇文章，记录n次访问量-->
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

<!--uv的方式，单个用户连续点击n篇文章，只记录1次访客数-->
<span id="busuanzi_container_site_uv">
    本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

网站底部字数统计

• 安装hexo-wordcount插件

> npm install hexo-wordcount --save

• 在文件themes/next/layout/_partials/footer.swig末尾添加如下内容

<span class="post-meta-divider">|</span>
<div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

实现文章统计功能

• 安装hexo-symbols-count-time插件，详细说明请查看GitHub

> npm install hexo-symbols-count-time --save

• 配置博客根目录下的_config.yml 添加文件节点symbols-count-time如下，开启文章统计功能

symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true
    exclude_codeblock: false
    awl: 2
    wpm: 275
    suffix: "mins."

添加 AddThis 分享

修改NexT主题目录下面的themes/next/_config.yml文件，在add_this_id节点添加个人的AddThis注册 Id

add_this_id: { your_AddThis_pubid }

在文章底部增加版权信息

找到 NexT 主题目录下的_config.yml 文件，修改节点creative_commons，启用文章版权信息说明

creative_commons:
    license: by-nc-sa
    sidebar: true
    post: true
    language: zh-CN

添加外链网易云音乐

• 打开网易云音乐，选择自己创作的歌单生成外链播放器，得到以下 iframe 代码

<iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width="330"
    height="110"
    src="//music.163.com/outchain/player?type=0&id=818429766&auto=1&height=90"
></iframe>

• 自定义一个网易云音乐外链播放器是否渲染配置项

# 自定义网易云音乐外链播放器是否渲染配置项
netease_music:
    enable: true

• 根据上面渲染配置项是否开启，将网易云 iframe 代码贴在合适位置，比如文件themes/next/layout/_macro/sidebar.swig的sidebar-inner容器最下面

{%- if theme.netease_music.enable %}
<iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width="330"
    height="110"
    src="//music.163.com/outchain/player?type=0&id=818429766&auto=1&height=90"
></iframe>
{%- endif %}