博客更换主题、页面设置及问题解决

Posted on In Word count in article: 1.2k Reading time ≈ 4 mins.

上一篇解决了博客的生成、部署和更新的问题，实现了基本的功能。这一篇主要来解决更换主题、子页面设置和乱码三个问题。

hexo博客主题更换

hexo官网就提供了大量的可用主题，我们要做的就是把主题克隆过来。我这里用的是next主题。

其实next主题的文档已经写的很清楚了，我这里主要写一下我对next主题所做的修改。

在这里先区分两个概念，站点配置文件是指根目录下的＿config.yml 文件，主题配置文件是指themes目录下的_config.yml文件。

next主题安装

唤出gitbash，进入站点目录，输入以下命令

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

即可下载next主题。然后打开站点配置文件,ctrl+f找到theme字段，将它的值改为next

1
theme:　next

接下来输入

1
2
$ hexo clean
$ hexo g -d

即可在网页中看到站点的外观。

next主题设定

这里next主题文档写的十分详细，我选用的是mist主题，并且进行了选择Scheme、设置语言、设置菜单、设置侧栏、设置作者昵称，在这里写一下除了官方文档之外我做的修改。

文章摘要设置

打开主题配置文件，找到如下

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把这里的False改为true就可以启动文章显示预览了length是显示预览的长度。

这里我们可以通过在文章使用标志来精确控制文章的摘要预览，比如这篇文章就是在这个段落的末尾添加了该标志，所以本文在首页的预览就会显示到这个段落为止。 强烈推荐使用该标志来控制文章的摘要预览，因为这种方式可以让摘要也按照css文件中的样式来渲染。如果使用了自动摘要的功能，你会发现文章摘要是一大团没有样式的文本，很是难看。

hexo页面设置

这里包括添加标签、分类、404页面、关于、代码高亮、社交、数学公式、建立时间、搜索工具，站点地图等到后面添加第三方服务的时候再讲，日程这个我还没弄明白（雾）。

在讲之前先说一下，标签、分类、关于、404需要在主题配置文件中的menu进行开启

1
2
3
4
5
6
7
8
9
menu:
  首页: / || home
  关于: /about/ || user
  标签: /tags/ || tags
  分类: /categories/ || th
  归档: /archives/ || archive
  日程: /schedule/ || calendar
  站点地图: /sitemap.xml || sitemap
  公益站点: /404/ || heartbeat

标签、分类、关于页面

这三个都是一样的，标签和分类页面next主题文档写的很清楚，我写一下关于页面和多标签的方法。

唤出gitbash，在站点根目录下输入

1
$ hexo new page "about"

然后在source目录下会有一个新的about文件夹，打开可以看到index.md，进行修改。

由于主题配置文件已经修改了，直接进行hexo g -d即可看到效果。

如果想给一篇文章天假多个标签的话，可以有以下两种方式

1
2
3
tags:
- PS3
- Games

或者

1
tags: [标签1,标签2,标签3]

404、社交、建立时间、代码高亮、数学公式

前四个next主题文档也都讲的很清楚，这里写一下数学公式。

打开主题配置文件，找到math并作如下修改

1
2
3
4
5
6
7
8
9
10
11
# Math Equations Render Support
math:
  enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

另外，在写文章的时候也需要打开mathjax开关，以加快渲染速度

1
2
3
4
5
6
---
title: index.html
date: 2019-03-07 12:01:30
tags:
mathjax: true
--

搜索工具

安装npm install hexo-generator-search:

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

在配置文件中加入：

1
2
3
search:
        path: search.xml
        field: post

即可启用。

常见问题解决

常见问题都可以在这个博客中找到解决方案。我这里主要说一下中文乱码的解决方案。

中文乱码的原因一般是没有采用utf-8编码，我自己测试了一下发现是站点配置文件没有采用utf-8。用notepad++打开，在编码选项中选择转为utf-8即可。

结尾

下一期将说明第三方服务的使用，包括评论、站点地图、阅读量、统计分析、分享等功能。

这一期主要参考了官方文档，因此这里不再另外写明参考文献。