Ecke-Lee

稳扎、稳打

0%

使用GitHub Pages和Hexo快速建立私人Blog（2）-Next主题设置

发表于 更新于 分类于

主要以Next主题为例，讲解如何在Hexo框架中选取主题并进行设置

Next主题的安装

在Hexo中安装新的主题，需要将下载的主题放至themes文件夹下，随后对两个_config.yml文件进行修改，一个是博客主目录下的站点配置文件，用于选择主题，另一个在主题目录下主题配置文件，主要进行主题的一些个性化设置。

1
2
/hexo/_config.yml
/hexo/themes/theme_name/_config.yml

1.下载Next主题：

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

2.修改站点配置文件/hexo/_config.yml：

2.1 语言主题选择

1
2
3
4
5
Themes: https://hexo.io/themes/
theme: landscape
author:
language:
timezone:

将theme改为next,language后面输入zh-CN

2.2添加装饰动图

git输入如下代码npm install -save hexo-helper-live2d
站点配置文件添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜欢的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

可选择的模型名字可以自行搜索，这里以tororo为例
1.在站点目录下建立文件夹live2d_models
2.live2d_models文件夹中建立tororo文件夹
3.tororo文件夹中建立文件tororo.model.json
git执行命令安装
npm install --save live2d-widget-model-tororo
这样设置后动图就会出现在网页右下角

3.修改主题配置文件/themes/next/_config.yml：

3.1设置标签分类

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user关于
  #tags: /tags/ || fa fa-tags标签
  #categories: /categories/ || fa fa-th分类
  archives: /archives/ || fa fa-archive归档
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

这里将需要添加的标签页取消注释即可，我添加了about，categories，tags，archives标签
在这里categories和tags需要额外进行下列设置，在git中执行命令

1
2
$ hexo new page categories
$ hexo new page tags

此命令在source文件夹中建立了categories和tags两个文件夹，分别修改两个文件夹中index.md为以下内容
categories/index.md
tags/index.md
经过上面设置就可以为文章增加标签和分类了，具体如何添加，请参考这里

3.2设置主题样式

1
2
3
4
5
6
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini 
选择你喜欢的一种样式，去掉前面的 #，其他主题前加上 # 即可。

Pisces样式示例图片如下
Pisces

3.3显示文章当前浏览进度

搜索关键字scrollpercent，将false改为true

3.4设置网站图标

将一张32x32的ico图标放在themes/next/source/images里，修改配置文件如下：

1
2
3
favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico

3.5 开启多国语言支持

1
language_switcher: true

3.6 开启代码块复制

1
2
3
4
codeblock:
copy_button: 
	enable: true
	show_result: true

4.其他设置

4.1 隐藏底部Powered By Hexo显示

PBH
博客在网页的最底端会显示上图中文字，去除这行文字我们可以打开\themes\next\layout\_partials\footer.swig文件，删除如下内容：

1
2
3
4
5
6
7
8
9
{%- if theme.footer.powered %}
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
  </div>
{%- endif %}

其他更多的设置请参考主题配置