<建站系列-二> Hexo的使用和个性化配置

前言:

上一篇博文中我们基于GitHub和Hexo搭建了一个toy主页。接下来介绍Hexo的基本使用方法,包括新博文的创作、给博文打标签分类,以及Hexo个性化配置。掌握本篇博文后你将可以完成日常的博客管理。

Hexo的个性化配置

先进行Hexo的个性化配置,Hexo的使用有赖于齐全的配置。

修改站点配置文件MyBlog/blog/_config.yml以进行配置。

安装个性化主题 NexT

首先更换主题,Hexo默认的主题功能非常有限,也不够美观。以Hexo最受欢迎的主题NexT为例。Hexo官网主题专栏Themes | Hexo提供了接近400套第三方主题,可根据个人喜好选择,点击选定主题会弹出该主题官网页面。附上NexT最新版本8.11.0下载链接

下载完成后解压,把解压后的文件夹hexo-theme-next-8.11.0移动到MyBlog/blog/themes/路径下。

打开站点配置文件_config.yml,将# Extensions项的theme修改为解压文件夹名:

1
theme: hexo-theme-next-8.11.0

NexT提供四种不同样式,默认是Muse,更改为Pisces,Pisces是带有侧边栏的双栏样式,非常简洁清新。更改方法:

打开主题配置文件MyBlog/blog/themes/hexo-theme-next-8.11.0/_config.yml,找到# Scheme Settings项,把Muse用# 备注掉,把Pisces前的# 删除。(选其它样式同理)

hexo g; hexo s更新再打开4000端口即可查看更换后效果,如下图:

init_NexT.png


进行个性化设置

修改站点主页显示信息# Site项,包括title, subtitle , description, author, language, timezone等,很直观。值得注意的是,timezone没有北京时间,可以设置为上海时间Asia/Shanghai

另外其它项也可根据个人需要修改,比如# Home page setting项的index_generator可以设置博客主页每页显示的文章数量以及排序规则。自行阅读,不再细说。



Hexo的使用

熟悉基本命令

1
2
3
4
5
hexo g # generate
hexo s # server
hexo d # deploy
hexo clean
hexo n xxx # new

以上是常用的5条命令,使用的要领是:

当修改了配置、更新了博文 或是更改了其它信息,hexo g将根据更改生成新的网页,通过hexo s可以在本地localhost:4000端口检验网页是否与预期一致,若确认无误则可部署到远端,在部署前以防旧的网页与新生成的网页冲突先清除缓存hexo clean,然后hexo d部署即可。

值得注意的是,并不是每次更改了本地信息就需要关闭当前4000端口然后重新hexo ghexo s查看更改,事实上除了修改站点配置文件_config.yml外其它时候都可以实时更新到当前监听的端口。

所以建议让本地4000端口处于后台开启状态,完成你的更改,实时在浏览器刷新,确认无误后即可愉快地推送到GitHub远端仓库啦,嘿嘿。


新博文的创作

首先为博文新建一个post,输入命令:

1
hexo n new_post # 新建一个名为new_post的post

这会在在source/_posts路径下自动创建一个名为new_post的Markdown文件,形如MyBlog/blog/source/_posts/new_post.md这个Markdown文件就是博文的源文件,博文显示的内容都来自于它,我们在它上面完成博文写作。

Markdown是一种轻量级标记语言,功能强大。Markdown进阶语法及编辑器推荐见笔者博客,左侧搜索框搜索即可。


打标签分类

标签 Tags, 类别Categories是对博文的标记,养成的好的标记习惯有利于快速分类检索。Hexo打标签分类需要两个步骤:

创建独立Page

为标签和类别分别创建独立的page,这会在source路径下分别创建两个文件夹,并且文件夹内部都有一个Markdown文件index.md。输入以下命令创建:

1
2
hexo n page tags
hexo n page categories

编辑index.md

编辑index.md,让博文中的标签和类别自动关联到对应的Page内。本质上index.md也是博文,不过它单独显示在Tags或者Categories下,用来充当检索页面,所以应该关闭该页面下评论功能。具体而言,只需在顶部注释区添加两行(以tags为例):

1
2
type: "tags" # 加入type使post自动关联检索
comments: false # 关闭评论

在博文中指定标签/类别

在博文顶部注释区添加标签/类别列表,即完成该博文的标记:

1
2
tags: [tag1, tag2] # 多个tag用[]括起来,用逗号分隔
categories: 类别1 # 单个看直接写,也可用[]括起来

在指定标签/类别后,编辑完博文并发布后,Hexo会自动关联,可在TagsCategories页面看到所有标签/类别。

注:TagsCategories页面可通过主页左侧菜单进入,NexT默认是不开启菜单的,开启方法见下一篇博文。


限制文章预览长度

NexT默认主页预览显示完整文章,当文章很长时会占据相当的版面,影响下一篇文章的预览。对于最新版NexT==8.11.0,有两种方法控制文章预览:

第一种,给文章添加摘要描述。那么预览只会显示描述,简明扼要。只需要在博文的顶部注释区添加description,比如:

1
description: 这是文章概括描述,预览只会显示我,不会显示文章具体内容

第二种,手动指定文章可预览到的位置。在文章想要被预览到的位置插入以下语句,那么文章预览会被截断到只显示该语句前的内容:

1
<!-- more -->

第二种方法其实不是Markdown语句,而是HTML语句,但是Hexo可以解析并截断显示。


后话:

文章以NexT主题为例子,其它主题可能有细微差别,但原理大同小异,本质上是修改_config.yml修改配置。快去实践,完成一篇有意思的博文吧!

本博客已同步至笔者知乎文章链接,欢迎关注。

NexT主题的个性化配置见下一篇博客文章。