本文共 4482 字，大约阅读时间需要 14 分钟。

导读

本文主要基于 Hexo 的主题 NexT 优化，路径：./themes/next，其他主题类似。

优化

多个标签

使用[标签1, 标签2…标签n]

主页文章使用预览

找到 ./themes/next/_config.yml

c

调节 length，调节文章预览长度。

修改博客字体：找到 ./themes/next/source/css/_variables/custom.styl

$font-family-headings          = Georgia, sans                             //标题，修改成你期望的字体族$font-family-base              = "Microsoft YaHei", Verdana, sans-serif    //修改成你期望的字体族$font-size-base                = 18px                                      //正文字体的大小$posts-expand-title-font-weight = $font-weight-bolder                     //扩展标题

相当于覆盖了 ./themes/next/source/css/_variables/base.styl 定义！

首页增加关于

打开文件 ./themes/next/_config.yml

# ---------------------------------------------------------------# Menu Settings# ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)menu:  home: /  categories: /categories/  about: /about/  archives: /archives/  tags: /tags/  #sitemap: /sitemap.xml  #commonweal: /404.html

命令行操作

hexo new page "about"

打开 ./source/about/index.md

---title: date: 2017-07-16 15:05:49---> 作    者：孙宇 | SY> 别    名：大水猫> 创建时间：2017-7-16

首页增加分类

打开文件 ./themes/next/_config.yml

# ---------------------------------------------------------------# Menu Settings# ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)menu:  home: /  categories: /categories/  about: /about/  archives: /archives/  tags: /tags/  #sitemap: /sitemap.xml  #commonweal: /404.html

命令行操作

hexo new page "categories"

打开`./source/categories/index.md`  ```c  ---  title:   date: 2017-07-16 12:45:09  type: "categories"  ---

首页增加标签

打开文件 ./themes/next/_config.yml

# ---------------------------------------------------------------# Menu Settings# ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)menu:  home: /  categories: /categories/  about: /about/  archives: /archives/  tags: /tags/  #sitemap: /sitemap.xml  #commonweal: /404.html

命令行操作

hexo new page "tags"

打开 ./source/tags/index.md

---  title:   date: 2017-07-16 12:43:53  type: "tags"  ---

增加统计访问量功能

参考：

增加Google、Baidu统计功能

进入目录：./themes/next/_config.yml

# Google Analyticsgoogle_analytics: UA-102634678-1

访问 ，申请账户。获取ID

博客链接持久化

npm install hexo-abbrlink --save

然后修改 _config.yml

# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://muasy.comroot: /permalink: :abbrlink/permalink_defaults:

修改头像为原形

找到文件： .\themes\next\source\css_common\components\sidebar\sidebar-author.styl

.site-author-image {  display: block;  margin: 0 auto;  max-width: 128px;  height: auto;  border: 2px solid #333;  padding: 2px;  border-radius: 50%;}

鼠标悬停在头像上旋转

找到文件：.\themes\next\source\css_common\components\sidebar\sidebar-author.styl

.site-author-image {  display: block;  margin: 0 auto;  max-width: 96px;  height: auto;  border: 2px solid #333;  padding: 2px;  border-radius: 50%  webkit-transition: 1.4s all;  moz-transition: 1.4s all;  ms-transition: 1.4s all;  transition: 1.4s all;}.site-author-image:hover {  background-color: #55DAE1;  webkit-transform: rotate(360deg) scale(1.1);  moz-transform: rotate(360deg) scale(1.1);  ms-transform: rotate(360deg) scale(1.1);  transform: rotate(360deg) scale(1.1);}

修改 code 代码颜色

找到 .\Hexo\themes\next\source\css_common\components\highlight\highlight.styl

code {  padding: 2px 6px;  word-wrap: break-word;  color: $highlight-blue;  background: #f9f2f4;  border-rdius: $code-border-radius;  font-size $code-font-size+1;}

修改 color 属性

设置 language: zh-Hans 还是乱码

将源文件保存为 UTF-8 格式。

添加二维码

找到文件 .\Hexo\themes\next_config.yml

# Wechat Subscriberwechat_subscriber:  enabled: true  qcode: /uploads/QRCode.jpg  description: 扫一扫，用手机访问本站

开启百度自动推送

找到文件： .\Hexo\themes\next_config.yml

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEObaidu_push: true

设置鼠标选中后内容前景色、背景色

找到文件：.\Hexo\themes\next\source\css_custom\custom.styl

// Custom styles.::selection    background #4682B4    color #fff::-moz-selection    background #33a183    color #fff::-webkit-selection    background #33a183    color #fff

参考

转载地址：http://uizii.baihongyu.com/