MPFLY

Hexo使用Next主题的配置

1. 博客底部标签样式

只需要修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成

2. 文章结束标志

在路径 \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>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加如代码：

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

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

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

3. RSS

切换到根目录下，然后运行如下代码，安装hexo-generator-feed
```
$ npm install --save hexo-generator-feed
```

在hexo的_config.yml中，在最后添加如下代码：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

在next主题的_config.yml中ctrl + F找到rss:，添加代码如下：

（注意在冒号后面要加一个空格）

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 github中。

4. 修改文章内链接文本样式

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

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  transition color .3s;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

5. 文章字体大小改为`16px`

修改文件 themes\next\source\css\_common\components\post\post.styl，找到.post-body，修改其中代码如下：

.post-body {
  font-family: $font-family-posts;
  font-size 16px;
  +mobile() {
    word-break: break-word;
  }
}

6. 修改作者头像鼠标上移旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  cursor pointer;
  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: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform .5s ease-out;
  -moz-transition: -moz-transform .5s ease-out;
  transition: transform .5s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

7. 代码样式——包括代码块和多行代码

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
    border: 1px solid #d6d6d6;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}
.highlight .line {
    height: 24px;
}

8. 站点访问量

较低版本的next没有内置busuanzi，推荐以下方法

打开\themes\next\layout\_partials\footer.swig文件

在一开头加上以下代码：

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

然后在合适的位置添加显示统计的代码

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

在这里有两中不同计算方式的统计代码：

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>

清除缓存，重新加载，搞定。

版本较高的内置的busuanzi

只需要在主题配置文件中修改如下：

# 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: -user">> 本站访问量
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: -eye">> 本站访客数
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: -file-o">> 文章阅读量
  page_pv_footer: