博客主题个性化

搭建好博客后，再对博客进行个性化设置，优化页面。

添加分类、标签、关于等页面

打开git bash，在站点目录下输入hexo new page "categories" 在站点目录source文件夹下，会新增categories文件夹，里面有一个index.md文件，打开后即可更改配置。tags,about页面创建类似，输入

hexo new page "tags"
hexo new page "about"

打开主题配置文件_config.yml找到menu，添加对应菜单。打开next\language文件下的zh-CN，添加菜单标签项：

menu home: 首页 archives: 归档 categories: 分类 tags: 标签 about: 关于 music: 音乐

设置右侧栏头像

编辑站点配置文件，找到avatar，设置url地址为/image/avatar.png，avatar.png放在/站点目录/source/image/里。

设置头像旋转效果

打开themes\next\source\css\_common\components\sidebar\sidebar-author.styl,添加以下注释代码。

.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: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 鼠标经过头像旋转时间 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

设置RSS

在站点目录下，执行git bash命令： npm install --save hexo-generator-feed 安装插件后，打开全局配置文件，加入代码：

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

然后打开主题配置文件_config.yml，找到rss，添加rss: /atom.xml。

自定义博客底部效果

隐藏power by hexo/强力驱动打开themes/next/layout/_partials/footer.swig,直接注释隐藏以下代码即可,建议不要删除，代码如下:
- 实现网站底部访问量显示打开主题配置文件_config.yml,修改如下代码：

busuanzi_count: enable: true total_visitors: true total_visitors_icon: user total_views: true total_views_icon: eye post_views: true post_views_icon: eye

首页文章阴影边框效果

打开next\source\css\_custom\custom.styl文件,添加以下代码:

1
2
3
4
5
6
7
8


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

添加社交链接

编辑站点配置文件，添加

social: github: https://github.com/your-user-name || github twitter: https://twitter.com/your-user-name|| twitter weibo: http://weibo.com/your-user-name || weibo douban: http://douban.com/people/your-user-name || douban zhihu: http://www.zhihu.com/people/your-user-name || name

||后面可以自定义需要的社交图标，name是图标名字

发表新文章

在站点根目录下，打开git bash,输入hexo n "name of new post" 回车后，可以在source文件夹下的_post文件下，看到新建了一个name of new post.md文件，可以给文章贴上相应标签tags，[tag1,tag2,...]，在–下方添加正文内容。

首页博客相关设置

文章以摘要形式显示打开主题配置文件，找到如下位置并修改

auto_excerpt: enable: true length: 150 其中length代表显示摘要的截取字符长度

设置首页文章显示篇数安装插件：

npm install –save hexo-generator-index npm install –save hexo-generator-archive npm install –save hexo-generator-tag 在站点配置文件中添加代码（per_page是显示篇数）
```
index_generator:
per_page: 8

archive-generator:
  per_page: 20
  yearly: true
  monthly: true
```
tag_generator: per_page: 10
文章置顶打开站点根目录下node_modules/hexo-generator-index/lib/generator.js,将以下代码替换原来的。在文章中添加top值，数值越大文章越靠前。

‘use strict’; var pagination = require(‘hexo-pagination’); module.exports = function(locals){ var config = this.config; var posts = locals.posts; posts.data = posts.data.sort(function(a, b) { if(a.top && b.top) { // 两篇文章top都有定义 if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排 else return b.top - a.top; // 否则按照top值降序排 } else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面 return -1; } else if(!a.top && b.top) { return 1; } else return b.date - a.date; // 都没定义按照文章日期降序排 }); var paginationDir = config.pagination_dir || ‘page’; return pagination(’’, posts, { perPage: config.index_generator.per_page, layout: [‘index’, ‘archive’], format: paginationDir + ‘/%d/’, data: { __index: true } }); };
文章底部打赏开启文章底部打赏功能：在主题配置文件中，配置如下：

Reward

reward_comment: 创作不易，感谢支持 wechatpay: /images/wechatpay.jpg alipay: /images/alipay.jpg #bitcoin: /images/bitcoin.png