Hexo-修改Hexo主题

本文主要学习的内容如下：

在上节介绍如何快速去搭建 Hexo ，最终展示的效果如下图所示：

这是 hexo 默认的主题，我们需要修改这个主题，那么我们可以去找一些符合我们个人爱好的一些主题 选择一个自己喜欢的 Hexo 主题

这个网站有很多主题可以供我们去选择，如下图所示。每一个主题都有对应网站可以预览，并且都有 Github 地址，我们可以照着 Github 的 wiki 就可以安装了，过程都比较简单。

将主题克隆到 themes 目录下，以下截图就是 clone 之后的结果。

第一步：打开 _config.yml 文件，该文件为 站点配置文件 ，存放位置如下兄裂图所示：

第二步：将主题修改为 next

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标

在设置 菜尺迹单项的名称和链接 中的名称并不会直接显示在网页上，而是会通过 NexT 主题目录下的 languages/{language}.yml 找到对应的显示文本。

对应的字段是 menu_icons。 此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

按照上面的方式设置的菜单之后，点击标签，分类，或者关于我都会出现 404 页面，意思就是没有找到对应的页面，那这是怎么回事呢？

在默认情况，source 目录只有 _posts 一个文件夹的，并没有生成对应的 tags,categories,about 等文件夹，所以就会出现 404 的情况。

将 source/tags/index.md 的内容修改为如下：

将 source/categories/index.md 的内容修改为如下：

将 source/about/index.md 的内容修改为如下：

下面是生成的结果图：

现在再重新部署一下项目，就不会出现 404 问题陵尘并了。好了，以上就是本文要介绍的一些关于 Hexo 更换主题的知识了。

  hexo搭建好后，默认的主题叫 landscape 。可是，如果你不想自己的博客就这么干巴巴的，那就去 Hexo Themes 里面挑一个喜欢的吧，然后换掉它。

  从上图可以看到，Hexo Themes 目前已经提供了超过200个主题供大家选择，这些主题呢都饥竖是世界各地简数热爱开源的小伙伴分享出来的（下一个可能就是你了）。心动了吧，那么改个主题很难吗？答案当然是否定的，只需要下面简单几步，我们就可以拥有一个好看又有个性又有逼格的博客。

PS： 支持安装多个主题，但一次只能使用一个，在根目录下的 _config.yml 文件中修改切换主题即可。安装和使用主题中遇到的任何问题，可以通过查看主题所在Github仓库的 Issues 来排查和提问，或者直接联系主题贡献者协助解决吧拦肢首。

  hexo博客换装，大概就以上这么几步。下来给大家介绍一下 我的博客 换装过程，有兴趣的可以接着往下看。

  我这个博客用的主题叫 MiHo ，然后这套主题贡献者博客大概长下面这个样子。

  是不是觉得有点不太一样，这是因为默认的主题还是不太符合我的个性，所以我是有做一点点改造。如果大家接触过前端或者干脆就是做前端开发的，那这些应该都不是难事。好了，下面正式介绍下我是怎么换装的。

神奇吗？用Hexo，自定义博客主题就这么简单，你还在犹豫什么呢？

创建项目

你需要在 Coding 上面新建一个项目，项目名称随意：比如我的chenlianjiang。

填写项目名称、描述、设置属性、初始化文件，最后点击逗创建项目地

安装博客

我们在本地随便找一个盘来安装的 hexo :

$hexo init chenlj-hexo-blog

进入目录文件夹里面，使用 npm install 把 package.json 里面需要的东西都搭袜安装好。

接着我们需要在本地先预览一下自己博客的样子，就要先安装 hexo server ：

$ npm install hexo-server --save

安装好之后在命令行里面运行 hexo server ，然后在浏览器的地址栏上面输入localhost:4000 就可看到自己博客的样子。

Hexo全局配置

本地浏览自己的博客没问题后，我们就需要把它部署到 Coding 上了。

1 编辑根目录下 _config.yml 文件，我们找到 deploy 这一项，修改如图：

2 修改好 _config.yml 文件过后，我们还需要安装 hexo-deployer-git 才能够部署到 Coding 上面。

npm install hexo-deployer-git --save

接着我们就生成静态页面和把代码 push 到 Coding 上：

$ hexo clean

$ hexo g

$ hexo d

注意把代码 push 到 Coding 上之前会让你输入你的 Coding 用户名和密码。

如果使用ssh协议需要先配置好公钥。

使用Coding演示

我们进入演示模式的配置页面里：

在开启演示模式之前，会提醒你没有检测到环境，你直接强制开启就可以了。

接着我们在高级选项中把运行环境设为 HTML ，部署版本为 master ，设置访问域名。然后应用内存选用 256M 就足够了。

最后点击一键部署，等待部署成功嫌租就行了。

然后你可以访问域名来查看自己是否部署成功了。

设置自动部署

我们在设置里找到 webhook， 然后点击新建 Hook 、

第一个输入框中是填你的博客域名，然后在后面加上 /_ 。

第二个输入框是输入一个 token ，我们直接填写 {{TOKEN}} 就可以了。

回到演示里，芹枝兆在左边的栏目中找到环境变量,变量名填写为 WEBHOOK_TOKEN ，值为 {{TOKEN}} ，接着重新启动应用就 ok 了！

测试自动部署

设置好自动部署之后我们要测试一下是否 push 代码的时候就会自动部署。

创建一个新的文章（可以什么都不写），然后生成静态页面 push 到仓库去：

$ hexo new test

$ hexo g

$ hexo d

我们回到浏览器在输入博客的地址，如果那篇新写好的文章出现在首页了，说明我们自动部署成功了。以后再也不用自己去手动部署一次了！

---