Windows下使用Github页面搭建个人博客Hexo二（设置主题）

发表于

为了让Hexo更加个性化，Hexo也提供了不同的主题。官网主题：https://hexo.io/themes
以目前用的最多的Next为例

1.下载主题至Hexo的theme文件夹

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

2.启用主题。

在站点目录中（blog），打开配置文件_config.yml，修改theme：next

3.打开本地调试服务

1
hexo s

4.在浏览器预览

localhost:4000

5.主题设定

在next主题目录下的_config.yml文件中将scheme设定为Pisces

6.语言设定

在站点根目录下修改配置文件_cofig.yml中的language为zh-Hans（简体中文）

7.修改菜单项

在主题目录下修改配置文件_cofig.yml中的menu增添一个something（注：千万不要在这设置中文，后面的值那是查找文件的地方！若你的站点运行在子目录中，请将链接前缀的 / 去掉）

1
2
3
4
5
6
7
menu:
  home: / || home
  about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  tags: /tags

这些配置都要与你主题目录下的languages文件中对应的yml文档里配置相关联。比如你在站点根目录中的配置文件设置language为zh-Hans，那么就要进入到主题目录下的languages文件中修改zh-Hans.yml，这样才能显示出菜单项新增的中文内容（以something为例子）

1
2
3
4
5
6
7
8
9
10
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  something: 有料

8.设置菜单项图标

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

1
2
3
4
5
6
7
8
9
10
11
12
13
menu_icons:
  enable: true


# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

9.设置侧栏位置

修改主题目录下sidebar的position值

1
2
3
4
5
6
7
8
9
10
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Sidebar Display, available value (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.

10.设置头像

在站点根目录下载配置文件中新增avatar值设置为头像的链接地址。地址可以是网络地址，也可以是本地地址（放置在source/images/目录下）

1
avatar: /images/ossend.jpg

11.设置文章代码主题

在主题目录下修改配置文件highlight_theme默认值为nomal可以设置为night

1
highlight_theme: night

12.添加标签页面

前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found此时我们要新建一个页面

1
hexo new page tags

在新建的index.md文件中添加type: "tags"

1
2
3
4
5
---
title: tags
date: 2018-04-14 16:19:27
type: "tags"
---

当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的tags中添加标签即可

注：CNAME文件在下次hexo deploy的时候就消失了，需要重新创建，这样就很繁琐
方法一：每次hexo d之后，就去GitHub仓库根目录新建CNAME文件
方法二：在hexo g之后，hexo d之前，把CNAME文件复制到\public\目录下面，里面写入你要绑定的域名。
方法三（推荐）：将需要上传至github的内容放在source文件夹，例如CNAME、favicon.ico、images等这样在hexo d之后就不会被删除了。
方法四：通过安装插件实现永久保留

1
$ npm install hexo-generator-cname --save

之后在_config.yml中添加一条

1
2
Plugins:
- hexo-generator-cname

需要注意的是：如果是在github上建立的CNAME文件，需要先clone到本地，然后安装插件，在deploy上去即可。CNAME只允许一个域名地址。
之前每一次hexo d -g 都会出现访问不了网站，需要手动在github page的setting里重新设置一下，下面就是解决方案。
修改 _config.yml

1
2
3
4
url: http://www.hostname.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults: