静态博客搭建指北（二）

发表于 | 更新于 | 分类于

静态博客搭建第二弹上线啦～

本篇集中于 NexT 主题配置问题，将博客美化成你喜欢的样子（大概）～

Let’s go!

添加「标签」页面

以下内容参考 「NexT」主题配置

  • 在终端窗口下，定位到 Hexo 站点目录下输入以下命令：

    1
    $ hexo new page tags

  • 编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

    1
    2
    3
    4
    title: 标签
    date: 2014-12-22 12:39:04
    type: "tags"
    ---

  • 在菜单中添加链接。编辑主题配置文件， 添加 tags 到 menu 中，如下:

    1
    2
    3
    4
    menu:
        home: /
        archives: /archives
        tags: /tags

同样的原理，分类(categories)、关于(about)等页面也可以自行添加了。

给文章模版增加分类选项

当我们通过 hexo n "name" 命令来新建一篇文章时，默认格式是这样的

1
2
3
4
5
---
title: name
date: yyyy-mm-dd xx:xx:xx
tags:
---

可编辑的选项有标题、时间、标签，但是没有分类选项，如果每次都手动添加，难免感到麻烦。所以让我来给文章模版加入 categories: 项：

  • 找到站点根目录下的 scaffolds/post.md 文件
  • 打开该文件，在 tags: 项上面添加 categories: 并保存
  • 再次执行 hexo n "name" 命令，新建的文件里就有 categories: 项了

增加 Read more 按钮

默认情况下，首页的博文会显示全文，不仅阅读不方便，对一些人来说也不美观（没错就是我）。

修改 NexT 的配置文件限制博文在首页显示的长度可以解决这个问题，但会造成代码块显示混乱等一些问题。

最好的解决办法就是在每一篇博文里增加一行 <!--more--> 分隔符，hexo 会自动识别这行分隔符，在首页只显示分隔符上面的内容，分隔符下面的内容必须进入文章才能看到。但是手动给每一篇文章添加这个分隔符实在过于繁琐，一不小心就会忘记，所以我们来修改文章模版，将这条分隔符添加进去。

前面我们已经通过增加分类选项修改过一次文章模版文件了，再次打开这个文件，增加代码使之变成下面的格式

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

<!--more-->

你可以在 <!--more--> 上面的位置写一些类似于文章摘要的东西，把文章主体放在下面的位置，对于不喜欢首页显示全部内容的同学，现在你的首页会焕然一新。

设置分类列表

有时我们给文章设置的分类会包含中文，比如

1
categories: 编程

这样推送后，分类列表里就会出现编程这个选项，但是有点瑕疵的是访问路径也会包含中文

1
*/categories/编程

如果不希望这种情况出现，可以通过设置站点配置文件实现

1
2
3
4
5
6
# Category & Tag
default_category: uncategorized
category_map:
	编程: programming
	生活: life
	其他: other

修改主题样式

NexT 主题包含有四种样式，如果你不喜欢默认的样式，可以修改配置文件换一个你喜欢的样式。

打开主题文件夹下的配置文件 _config.yml 找到下面的字段：

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

Muse 就是 NexT 默认的样式，删除你想要切换的样式前面的注释符号 #，再将默认样式注释掉，保存更改并重新生成即可完成修改，打开本地服务器看看新的样式，满意的话就可以部署上线了。

另外，配置文件中有这样一个字段：

1
2
3
4
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

这一项配置对应修改的是边栏所在的位置，但需要注意的是，只有第三个样式 Pisces 支持这项修改，所以如果你喜欢 Pisces 的风格，不妨也试试这个选项吧。

第二弹到这里就结束了，内容不多，但相对第一弹更偏向细节，毕竟粗枝大叶的搭建工作在第一弹已经完成了，剩下的都是细节～

以上！