本来以为第一期就能讲到这…看来还是我太罗嗦了？

本地文件结构

想了想，感觉还是应该先介绍一下Hexo的文件夹结构，不然改个配置都不知道去哪改…

  • 配置：_config.yml和_config.{yourtheme}.yml

    Hexo进行生成的时候两个配置文件都会看，但如果有冲突项，后者（有主题名的那个）优先级更高。
    其中{yourtheme}是你所使用的主题样式，默认是landscape。

    这是本篇最需要关注的文件，避免混淆，我后续把它们分别称为“Hexo配置文件”和”主题配置文件“。

  • 主题：themes

    用来放置各种主题，但有时候主题会被打包作为插件，那就会装在node_modules/*里面去。

  • 插件：node_modules和package.json

    前者存放由npm安装的各种插件，比如搜索引擎、渲染器、主题。
    如果要启用某个插件，需要写在package.json里面。

  • 文章：source

    顾名思义，存放你写的文章内用到的各种源文件，比如图片、markdown代码。

  • 网页：public

    Hexo生成完毕后出现，用于存放转换后的网页文件，也仅有这里面的东西会被推上网页那边。

这就是比较重要的几个玩意了，其他的可以暂时不管。

网页基本信息

基本信息，比如网站名、作者信息啥的，我们需要在_config.yml内改动。
下面我节选了一些比较重要的，其他可以到Hexo官方文档查看

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: 空空 如也 (´･ω･`)?           # 网站名称
author: oooo26                    # 作者名称
language:                         # 语言（可以选择多个）
  - zh-CN
  - zh-tw
  - en                   
url: https://oooo26.github.io/    # 网站域名（前一篇设置过了）
deploy:                           # 部署对象（前一篇设置过了）
  type: git
  repo: https://github.com/oooo26/oooo26.github.io
  branch: master

其他就自行了解吧，我们继续。

主题

更换主题

landscape虽然不难看，但强迫症就是想换掉默认的

Hexo支持一大堆主题，在这里随便选随便挑~

顺便记录一下我感觉还不错的：Butterfly, NexT, stun, Keep, LiveMyLife, Anatolo, Claudia, Diaspora, Volantis, yun, Arknights, Ayer, Autumn，向各位作者大佬致敬，我就点个star白嫖了哈哈哈

强烈建议仔细考虑主题，后续尽量不要改动，因为大部分配置都基于主题的配置文件，并且一些组件的位置也会影响我们的设置方案。

考虑完毕后，点击对应主题的名字，看看他们各自的安装教程（这就没法写统一的教程了）。
装好之后，主题会被存放在themes或是node_modules文件夹里面。一般来说它里面还会包含一个_config.yml，建议复制出来和外层_config.yml放在同一级，并改名为_config.{yourtheme}.yml，以后只需要更改外面这俩即可。

最后打开_config.yml并更改主题：

1
theme: landscape        # 改成你想要的主题

完事

Butterfly主题

我所选用的是Butterfly主题，如果你不是用的这个，那很抱歉不需要往下看了。
但我反正只是写给自己看，所以我自个继续哈哈哈

Butterfly有非常友善的文档，而且作者也讲中文，有不会的东西可以直接提issue交流（不是说可以随便去麻烦的意思）。

下载主题

官方提供了两种安装方法：

  • 从Github/Gitee下载主题文件，放到themes里面（后续利用git进行更新）
  • 利用npm安装主题插件到node_modules里面（后续利用npm进行更新）

它俩基本没区别，但后者只提供稳定版本（反正一般也只装稳定）。

假如使用Github备份源代码，建议使用第二种：因为第一种方法如果保留了主题文件夹内的.git，会导致git push的时候有点小问题（文件夹里包含两个上游仓库信息），但是不保留的话又没法快速更新。

总之装好之后，把themes/hexo-theme-butterfly/_config.yml或者node_modules/hexo-theme-butterfly/_config.yml
复制到外层和_config.yml同级，并改名为_config.butterfly.yml。

安装渲染器

Butterfly的页面需要两个渲染器才能使用，我们在：

1
2
# pwd: my_hexo_fold
$ npm install hexo-renderer-pug hexo-renderer-stylus --save

这样一来hexo-renderer-pug和hexo-renderer-stylus就被安装到了插件文件夹里面，并且由于--save命令，插件也被写进了packages.json开始启用。

应用主题

更改_config.yml里面的子段theme: butterfly，然后重新进行Hexo生成：

1
2
# pwd: my_hexo_folder
$ hexo cl && hexo g

完事，好看多了不是吗

页面配置（使用Butterfly）

这一部分我想来想去，怎么写也肯定没有官方的文档详细好用…罢了，放个链接在这吧：Butterfly主题配置。