Hexo个人博客-主题优化(一)

---

声明：本文是基于NexT v5.1版本的主题进行的优化配置，与目前最新版本v7.2会有一些区别，大部分设置都没有影响，变化的部分会在该部末尾指出。以下内容都切实可行，博客平台的搭建请移步Hexo个人博客-搭建站点，7.2版本的变化请移步NexT v5到v7.2的版本变化。

注意：文件目录分隔符在Windows下为\，而Linux下为/，本文没有区分。读者需区分站点配置文件(\myblog\_config.yml)和主题配置文件(\myblog\themes\next\_config.yml)。

Description: 对Hexo-NexT主题的优化，添加头像和网站图标，添加菜单项，搜索功能，字体大小，代码样式，主页阴影效果，网页背景和图片，文章版权声明，，动态背景，友情链接，以及NexT v7版本的一些变化。

---

项目主页添加README

在Github上建立博客仓库的时候，没有生成README文件，这样使得其他人无法知道我们这个仓库是做什么，即我们的这个仓库缺少一个说明文件；但是如果直接使用命令hexo n README，再部署后会被解析为html文件，这不是我们想要的。

解决方式是在路径\myblog\source下手动新建README.mdown，注意这里的后缀是.mdown，然后再在这个新建文件中写README即可。部署后它会被复制到public文件夹，而不会被解析成html文件。

添加头像和网站图标

将头像或图标文件放入/themes/next/source/images/文件夹内，在myblog/themes/next/_config.yml中，找到favicon字段，修改为：

favicon: /images/xxxx.png    # 网站图标
...
avatar: /images/avatar.png   # 头像

添加友情链接

在myblog/themes/next/_config.yml中配置，

# Blog rolls
links_title: 友情链接 #修改名称
#links_layout: block
#links_layout: inline
links: #该行取消注释
  Paul Romer: https://paulromer.net/
  周其仁: http://www.zhouqiren.net/

添加菜单项

在博客根目录中执行:

$ hexo new page "categories"
$ hexo new page "tags"
$ hexo new page "about"

完成后在/source/文件夹下会有categories,tags,about三个文件夹，将其中的index.md文件分别进行修改，

---
title: categories
date: 2017-03-12 22:06:24
type: "categories"
---
---
title: 标签
date: 2017-03-12 17:27:16
type: "tags"
---
---
title: about
date: 2017-03-12 22:07:26
type: "about"
---

在myblog/themes/next/_config.yml中找到menu，去掉categories、tags、about的注释。

添加归档，执行hexo new page archives，后将主题配置文件中对应的注释取消。其他类似。

添加搜索功能

在博客根目录执行cnpm install hexo-generator-searchdb --save，在/myblog/_config.yml中新增配置:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在/myblog/themes/next/_config.yml中启用local_search。

效果展示：

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成17px。

设置顶部加载条

修改/myblog/themes/next/_config.yml中，修改 pace: true ，还可以换不同样式的加载条。

自定义代码块样式

在\themes\next\source\css\_custom\目录下新建custom.styl文件，加入以下配置: (颜色可自定义)

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

文章主页阴影效果

在上一步的基础上，在\themes\next\source\css\_custom\custom.styl文件中添加:

// 主页文章添加阴影效果
 .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);
  }

如果是V7.0或以上版本，要将主题设置custom.sytl文件放在myblog/source/_data/路径下更名为styles.styl，然后在/myblog/themes/next/_config.yml中找到custom_file_path，取消相应注释。推荐lei2rock的配置

注意： 是博客根目录而不是主题目录下的source文件夹。

背景颜色和图片

1. 页面背景在themes\next\source\css\_variables\base.styl中修改body-bg-color
2. 头部背景色在themes/next/source/css/_schemes/Mist/sidebar/_header.styl中
3. 底部背景色在themes/next/source/css/_schemes/Mist/index.styl中
4. 其他部分同理
5. 背景图片在\themes\next\source\css\_custom\custom.styl中添加:

//导航区背景
.site-meta {
  background: url("../images/header-bg.jpg");
  background-position:70% 20%; 
}

//页面背景
body {
  background-image:url("../images/body-bg.png");
  background-repeat: repeat;
  background-attachment:fixed;
  background-position:50% 50%; 
}

注意：V7.0或以上版本要添加到 myblog/source/_data/styles.styl 中。

显示浏览进度和文章预览

在myblog/themes/next/_config.yml中，修改scrollpercent: true和excerpt_description: true。

设置预览字数：

auto_excerpt:
  enable: true
  length: 150

文章末尾添加版权信息

在myblog/themes/next/_config.yml里修改:

post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

在NexT v7.0以上的版本中，只需要修改 creative_commons 的设置即可。

修改文章底部#标签

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

在NexT v7.0以上的版本中，只需要在/themes/next/_config.yml中修改tag_icon: true即可。

文章结束标志

在\themes\next\layout\_macro路径下，新建passage-end-tag.swig文件，粘贴如下代码:

{% if theme.passage_end_tag.enabled %}
  <div style="text-align:center;color: #ff0000;font-size:14px;">
      ------ 本文结束 ------</div>
  {% endif %}

然后在路径\themes\next\layout\_macro\下找到并打开post.swig文件，在post-body之后,post-footer之前添加如下代码(post-footer之前两个DIV):

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

最后在 /myblog/themes/next/_config.yml 中，在末尾添加:

passage_end_tag:
  enabled: true

效果展示：

---

未完，待续 Hexo个人博客-主题优化(二)

---

本文参考

知乎Hexo搭建的GitHub博客之优化大全