Hexo 博客搭建:个性篇

通过上一篇文章，我们已经搭建好了一个博客的基本功能，已经可以开始编写博客了。 下面我们简单写一点Hexo的美化配置

文章页个性配置

主题目录下的 themes\next_config.yml 文件负责与主题相关的配置，用户可以通过修改该文件来自定义与主题相关的内容或功能，修改后刷新浏览器即可即时生效。

目录导航设置

基础配置

themes\next\_config.yml

# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

展开/隐藏目录层级

默认情况下，next 的目录是多级折叠的，阅读时只会展开当前目录分支。我们希望目录完全展开，同时为了避免长目录结构，约定只展开到三级目录。三级以下的目录会被隐藏，只有当文章阅读到的时候才会展开。

themes\next\source\css_custom\custom.styl

//TOC目录默认展开三级，这里是指Markdown标签的h3
.post-toc .nav .nav-level-2>.nav-child {
  display: block;
}

若是希望三级以下的目录完全被隐藏

//TOC目录默认只显示两级目录
.nav-level-2 > .nav-child {
  display: none !important;
}

文章置顶

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在置顶的文章 Front-matter 加上 top: true，如

---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---

美化

字体美化

在 Google Fonts 上找到心仪的字体，然后在主题配置文件中为不同的应用场景配置字体，我们这里直接使用别人配置好的字体：别人的字体

# themes\next\_config.yml
font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family:

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family:

标签图标美化

默认情况下标签前缀是 # 字符，用户可以通过修改主题源码将标签的字符前缀改为图标前缀

在文章布局模板中找到文末标签相关代码段，将 # 换成 <i class="fa fa-tags"></i> 即可：

# themes\next\layout\_macro\post.swig  <footer class="post-footer">
    {% if post.tags and post.tags.length and not is_index %}
      <div class="post-tags">
        {% for tag in post.tags %}
-          <a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
+          <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tags"></i> {{ tag.name }}</a>
        {% endfor %}
      </div>
    {% endif %}
    ...
  </footer>