Hexo Next主题 配置

增加侧边阅读百分比进度条

打开位于 themes/next/_config.yml 文件，修改如下:

# Scroll percent label in b2t button.
scrollpercent: true

添加动态背景

打开位于 themes/next/_config.yml 文件，修改如下:

# Canvas-nest
canvas_nest: true

添加顶部加载条

打开位于 themes/next/_config.yml 文件，修改如下:

# Progress bar in the top during page loading.
pace: true

在网站底部增加访问量

打开位于 themes/next/_config.yml 文件，修改如下:

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 站点总访客数：
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 站点总访问量：
  site_pv_footer: 
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 浏览
  page_pv_footer: 次

查看文件 themes/next/layout/_third-party/analytics/busuanzi-counter.swig 中引入的js是否是最新的地址

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

侧边栏友情链接

打开位于 themes/next/_config.yml 文件，修改如下:

# Blog rolls
links_icon: link
links_title: 推荐网址
links_layout: block
#links_layout: inline
links:
  阮一峰的个人网站: http://www.ruanyifeng.com/home.html
  廖雪峰的官方网站: https://www.liaoxuefeng.com/
  韩天峰(Rango)的博客: http://rango.swoole.com/

开启文章版权声明

打开位于 themes/next/_config.yml 文件，修改如下:

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

修改头像边框为圆形框

打开位于 themes/next/source/css/_custom/custom.syl 文件,新增样式如下:

/*设置头像*/
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

鼠标放置头像上旋转

打开位于 themes/next/source/css/_custom/custom.syl 文件,新增样式如下:

/*设置头像并设置动画效果*/
.site-author-image {
    display: block;
    margin: 0 auto;
    padding: $site-author-image-padding;
    max-width: $site-author-image-width;
    height: $site-author-image-height;
    border: $site-author-image-border-width solid $site-author-image-border-color;
    /* 头像圆形 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;

    /* 设置旋转 */
    /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ease-out)动画播放的速度曲线为以低速结束 
        (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
    -webkit-transition: -webkit-transform 1.0s ease-out;
    -moz-transition: -moz-transform 1.0s ease-out;
    transition: transform 1.0s ease-out;
}
img:hover {
    /* 鼠标经过头像旋转360度 */
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotateZ(360deg);
}

修改文章底部带#号的标签

打开位于 themes/next/layout/_macro/post.swig 文件,搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

{% for tag in post.tags %}
    <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"> {{ tag.name }}</a>
{% endfor %}

添加字数统计、阅读时长的统计功能

传送门

文章置顶

打开位于 /scaffolds/post.md 文件，添加 top 字段，设置数值，数值越大文章越靠前：

title\: {{ title }}
date: {{ date }}
tags: 
categories: 
copyright: true
comments: true
password: password
top: 100 //设置数值，数值越大文章越靠前

持续更新…

https://chentging.github.io/2018/05/14/hexo%EF%BC%9A%EF%BC%88%E4%B8%89%EF%BC%89hexo-Next-%E4%B8%BB%E9%A2%98%E4%B8%8B%E8%BD%BD%E5%92%8C%E9%85%8D%E7%BD%AE/

https://wylu.me/posts/e0424f3f/