<建站系列-二> 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
端口即可查看更换后效果,如下图:
进行个性化设置
修改站点主页显示信息# Site
项,包括title, subtitle , description, author, language, timezone
等,很直观。值得注意的是,timezone没有北京时间,可以设置为上海时间Asia/Shanghai
。
另外其它项也可根据个人需要修改,比如# Home page setting
项的index_generator
可以设置博客主页每页显示的文章数量以及排序规则。自行阅读,不再细说。
Hexo的使用
熟悉基本命令
1 | hexo g # generate |
以上是常用的5条命令,使用的要领是:
当修改了配置、更新了博文 或是更改了其它信息,hexo g
将根据更改生成新的网页,通过hexo s
可以在本地localhost:4000
端口检验网页是否与预期一致,若确认无误则可部署到远端,在部署前以防旧的网页与新生成的网页冲突先清除缓存hexo clean
,然后hexo d
部署即可。
值得注意的是,并不是每次更改了本地信息就需要关闭当前4000
端口然后重新hexo g
和hexo 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 | hexo n page tags |
编辑index.md
编辑index.md
,让博文中的标签和类别自动关联到对应的Page内。本质上index.md
也是博文,不过它单独显示在Tags
或者Categories
下,用来充当检索页面,所以应该关闭该页面下评论功能。具体而言,只需在顶部注释区添加两行(以tags为例):
1 | type: "tags" # 加入type使post自动关联检索 |
在博文中指定标签/类别
在博文顶部注释区添加标签/类别列表,即完成该博文的标记:
1 | tags: [tag1, tag2] # 多个tag用[]括起来,用逗号分隔 |
在指定标签/类别后,编辑完博文并发布后,Hexo会自动关联,可在Tags
和Categories
页面看到所有标签/类别。
注:Tags
和Categories
页面可通过主页左侧菜单进入,NexT默认是不开启菜单的,开启方法见下一篇博文。
限制文章预览长度
NexT默认主页预览显示完整文章,当文章很长时会占据相当的版面,影响下一篇文章的预览。对于最新版NexT==8.11.0
,有两种方法控制文章预览:
第一种,给文章添加摘要描述。那么预览只会显示描述,简明扼要。只需要在博文的顶部注释区添加description
,比如:
1 | description: 这是文章概括描述,预览只会显示我,不会显示文章具体内容 |
第二种,手动指定文章可预览到的位置。在文章想要被预览到的位置插入以下语句,那么文章预览会被截断到只显示该语句前的内容:
1 | <!-- more --> |
第二种方法其实不是Markdown语句,而是HTML语句,但是Hexo可以解析并截断显示。
后话:
文章以NexT主题为例子,其它主题可能有细微差别,但原理大同小异,本质上是修改_config.yml修改配置。快去实践,完成一篇有意思的博文吧!
NexT主题的个性化配置见下一篇博客文章。