hexo进阶使用

司徒嘉祥

2023-12-01

在上一篇文章中，记录了我通过hexo+github来搭建博客的过程，本文提供导航功能，介绍一些hexo的进阶用法，让博客显得更有范儿！不过我还是建议大家多关注博客内容，而不是沉迷于折腾中无法自拔 : )

如何应对错误？

在使用命令行搭建博客的过程中，不可避免的会出现错误，如果你是新手，不要慌，这种情况对于有经验的程序员来说，已经是家常便饭了: ) ，不过我可以教大家两个常用的应对错误的方法,错误代码同常在一大堆不知所云的英文字母开头几行，如ERROR balabala，can`t find/load balabala,在其后会跟着出错的文件位置，可以做以下两点：
- 去出错的文件，具体到行，列，如果你看得懂代码，你大概会知道错在哪
- 复制错误信息至搜索引擎寻求网友帮助

另外，在站点配置文件_config.yml中，如果你启用了插件plugins:，hexo server(简写为hexo s)命令会无法识别，我也不知道为什么，这是个bug，把相关代码用#注释掉就行了，不会影响到插件的使用。

配置你喜欢的hexo主题

hexo官网已经提供了一部分的主题，从中选择你喜欢的一个，为你的博客换件新衣服，不过还有许多主题并没有收录到官网里，这要靠你自己去发现了。每个主题都会有安装使用的介绍，有些是官方文档，有些在相应的github主页上，他们的使用大多是一样的：
- clone到本地hexo-site/theme
- 修改站点配置文件_config.yml里的theme字段为刚下载的主题文件夹名
- 修改一系列个人信息、集成插件、主题布局字段

具体以NexT主题官方说明文档为例，不懂的地方可以问我meetdevin.zh@outlook.com.

绑定独立域名

首先，我要给大家简单介绍下，这里面的思路。域名与IP有什么区别？

IP是每台主机的唯一标识，是一串数字，就相当于身份证，当我们的浏览器访问一个网站的时候，首先要找到IP，而域名是为了方便人们记忆而产生的符合人们语言习惯的标识DNS，而DNS就是他们两者的映射表，你可以理解为翻译官。现在你的域名是your_site.github.io,当你在浏览器键入这个地址，你想要浏览器显示github上你的网站资源，你的电脑会先检查本地的DNS缓存，是否有这个地址的对应IP，如果没有，则会请求当前子网的DNS服务器，DNS服务器返回相应的IP地址，而如果这个DNS服务器也没有，它会把请求发给上一级子网的DNS服务器，层层递进，这就叫域名解析。现在我们的目的就明确了：把你的独立域名解析到github。具体来说：
- 购买独立域名
- 设置DNS解析
- 让github认可我们的域名

购买独立域名

域名提供商有很多，有DNSPod ， Gandi，阿里云等，都支持支付宝付款。我推荐DNSPod，因为他提供免费的DNS解析服务。

设置DNS解析

无论在哪里购买，都要设置DNS服务器，如果你使用DNSPod的域名解析服务，在控制台里把DNS服务器地址改为：f1g1ns1.dnspod.net 和 f1g1ns2.dnspod.net，参考DNSPod 各个套餐的 DNS 地址。

让github认可我们独立域名

在hexo-site/sourse下新建文本文档，重命名为CNAME，注意没有后缀，在里面写上你的域名，如：your_site.com，保存，然后编译上传：

hexo g -d
 
 1

优化你的博客加载速度

如果你使用了一个比较牛掰的主题，图片资源较多，或者大量使用了HTML5，这就比较吃性能了，你会发现在浏览器进你的博客比进小伙伴们的都要慢，那怎么办呢？不怕，我给大家挑出了几个靠谱的方案：
- 性能优化篇-joway
- Hexo博客优化-Jory He

这两篇博文都放了一些干货，如果你喜欢折腾，就去试试他们的方法，但你如果是像我这样比较懒的，那我也给你推荐一个立竿见影的方法:

将站点配置文件hexo-site/_config.yml和主题配置文件hexo-site/theme/theme_name/_config.yml中，需要用到的图片，还有你在博文里插入的图片，都放到七牛云-对象存储里。

其实，这个七牛云-对象存储，大家可以理解为：网盘(但其实不是的，七牛云是CDN，是一种缓存机制，CDN=多台服务器+智能DNS)，因为github服务器在国外（之前还被墙过），而七牛云本身就是做云服务的，你从七牛云里拿图片，肯定是比从github拿图片要快的，还能为你节省github page存储，一举两得！

推广

既然搭了博客，那肯定要很多人看才有意思，第一步当然是要让搜索引擎发现我们，至于google在大陆的…科学上网跨过去就好了，让google收录是很简单的，百度反而有点矫情。

收录

在百度-站长工具，google提交入口先手动提交我们的网站，在提交之后，会验证网站所有权，这样才能收录我们的网站，他们都有这么几种验证方式：
- 文件验证
- HTML标签验证
- CNAME验证

我个人觉得HTML标签验证最简单，点击HTML标签验证，然后点击显示完整代码，将代码复制到你的最新一篇博文的开头，然后

$ hexo g -d 
 
 1

直接发布博文就好了。但是对于google，我试了好几次都没成功，最后用的文件验证：

下载该HTML文件，放到你的hexo-site/public目录，然后：

hexo g -d
 
 1

这时，可以在浏览器通过http://your_site.com/name.html访问该文件，这时再在google上点击验证。

提交sitemap

sitemap是你的站点地图，它列出你网站上的网页，将网站内容的组织架构告知搜索引擎。

安装插件：

npm install hexo-generator-sitemap --save 
npm install hexo-generator-baidu-sitemap --save 
 
 1
2

在站点配置文件hexo-site/_config.yml中添加以下代码：

# 自动生成sitemap
sitemap:
 path: sitemap.xml #注意前面有空格
baidusitemap:
 path: baidusitemap.xml #注意前面有空格
 
 1
2
3
4
5

编译上传

hexo g -d
 
 1

在hexo/public目录下可找到sitemap.xml和baidusitemap.xml文件，我们先验证下：

浏览器访问http://your_site.com/sitemap.xml
和http://your_site.com/baidusitemap.xml

如果出现一堆代码，说明生成成功，然后进入百度站长工具
- 点击左侧链接提交
- 下拉，自动提交,选择sitemap
- 填写http://your_site/baidusitemap.xml,提交

同样进入Google站长工具提交sitemap.xml，吐槽一句，google比百度方便多了。

以后每次我们执行hexo g -d命令的时候，这两个站点地图文件就会更新，搜索引擎便能通过上面两个网址抓取我们的内容。

自动推送

这个功能只有百度有，上面步骤完成之后，再点击自动提交->自动推送，复制百度给出的代码，留着，以后每次写博文，就粘贴到博文结尾位置，对博文内容没有任何影响，这段JS代码的作用是：页面被访问时，页面URL将立即被推送给百度。

方便写作

在hexo/sourse/scaffolds目录下，放的是我们的文章模板，有三个，默认是post，这个可以在站点配置文件hexo-site/_config.yml中更改，我们可以自定义post的内容以便符合我们的使用习惯。

你可以执行下列命令来创建一篇新文章。

$ hexo new layout title
 
 1

在命令中指定文章的模板，不写就默认为post，title指文章标题。

基本属性

Front-matter 是文章最上方以 — 分隔的区域，用于指定文章的变量，常用的有：

title: Hello World
date: 2013/7/13 20:46:25
tags:
 - 标签1
 - 标签2
categories:  
 - 分类1
 - 分类2  #hexo不支持多个同级分类，这样分类，会把分类2变成分类1的子类
comments: true #开启文章评论
---
 
 1
2
3
4
5
6
7
8
9
10

我们可以把这些都写到模板中，不用每次都写，另外，我们之前复制的百度自动提交JS也可以放的文章模板里，是不是很方便？

「标签」(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。完整的标签列表可以参考内置标签。另外，Hexo 也开放来接口给主题，使主题有可能提供给写作者更简便的写作方法。这里介绍一个常用的，插入图片，同时指定图片大小：

<!--指定大小图片-->
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
 
 1
2

文章摘录

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。某些主题有这样的功能集成，但还是推荐hexo官方的方法，这样除了可以精确控制需要显示的摘录内容以外，这种方式也可以让 Hexo 中的插件更好的识别：

在文章中使用 手动进行截断

ba la ba la 
 <!-- more -->
ji xu ba la ba la 
 
 1
2
3

使用位置在一行的顶左空一行，不然无效，这是博主试了很多遍试出来的。

更多语法规则：

附录

折腾的过程中，会对站点配置文件hexo-site\ _config.yml改来改去，这有一份备份，配置参考配置-hexo官网

# Hexo Configuration

Docs: http://zespia.tw/hexo/docs/configure.html

Source: https://github.com/tommy351/hexo/

Site

title: my blog #站点名，站点左上角
subtitle: Walk steps step by step #副标题，站点左上角
description: Walk steps step by step #给搜索引擎看的，对站点的描述，可以自定义
author: zippera #博主
email: #你的联系邮箱
language: zh-CN #中文

URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项

If your site is put in a subdirectory, set url as ‘http://yoursite.com/child’ and root as ‘/child/’

url: http://zipperary.com
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories

Writing 文章布局、写作格式的定义，不修改

new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:

Category & Tag

default_category: uncategorized
category_map:
tag_map:

Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文

2: Enable pagination

1: Disable pagination

0: Fully Disable

archive: 1
category: 1
tag: 1

Server 不修改

Hexo uses Connect as a server

You can customize the logger format as defined in

http://www.senchalabs.org/connect/logger.html

port: 4000
logger: false
logger_format:

Date / Time format 日期格式，不修改

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

http://momentjs.com/docs/#/displaying/format/

date_format: MMM D YYYY
time_format: H:mm:ss

Pagination 每页显示文章数，可以自定义，我将10改成了5

Set per_page to 0 to disable pagination

per_page: 5
pagination_dir: page

Extensions 这里配置站点所用主题和插件，暂默认，后面会介绍怎么修改

Plugins: https://github.com/tommy351/hexo/wiki/Plugins

Themes: https://github.com/tommy351/hexo/wiki/Themes

theme: light
exclude_generator:
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

Deployment 站点部署到github要配置，上一节中已经讲过

Docs: http://zespia.tw/hexo/docs/deploy.html

deploy:
type: github
repository: https://github.com/zippera/zippera.github.io.git
branch: master