搭建 HEXO 博客(二):个性化定制
1、主题配置
Hexo 有多种主题可供选择,我们可以到 Github 上面搜索 Hexo 主题即可。众多主题中使用最多的是 Next 主题,这里我们以 Next 主题为例。如果要使用 Next 主题,我们只需要到其 Github 仓库 https://github.com/theme-next/hexo-theme-next,将其克隆到我们 Hexo 项目的 themes/next
下面即可。
然后在站点的 _config.yml
配置文件里面将 theme 修改为 next,清理,重启并预览效果即可,
1 | hexo clean |
Next 也提供了四种主题样式,到 next 目录下面修改其主题配置文件 _config.yml
,将 Schemes 属性,将指定的注释去掉即可,清理,重启,即可预览该主题的效果。
下面我们介绍一下 Next 和 Hexo 个性化的一些定制方式。
2、博客评论
这里以 gitalk 为例。在新版本的 Next 中已经提供了 gitalk 的集成选项,参考注释,到 Gitalk 进一步了解如何使用。
首先,您需要选择一个公共 Github 存储库(已存在或创建一个新的 Github 存储库)用于存储评论,
然后需要创建 GitHub Application,如果没有 点击这里申请,Authorization callback URL 填写当前使用插件页面的域名。
然后将获取到信息填写到 Next 的配置文件中,
1 | gitalk: |
这样重启预览 Hexo,页面或者文章页面下面就出现评论的入口了。
3、Local Search 本地搜索
安装插件 hexo-generator-searchdb,执行以下命令:
1 | npm install hexo-generator-searchdb --save |
修改 hexo/_config.yml
站点配置文件,新增以下内容到任意位置:
1 | search: |
编辑 主题配置文件,启用本地搜索功能:
1 | # Local search |
重启并浏览效果即可。
4、设置网站图标
在 EasyIcon 中找一张(32 * 32)的 ico 图标,或者去别的网站下载或者制作,并将图标名称改为 favicon.ico,然后把图标放在 /themes/next/source/images
里,并且修改主题配置文件:
1 | Put your favicon.ico into `hexo-site/source/` directory. |
或者自己制作一些图标也行。
5、修改文章底部的 # 号的标签,改为图标
修改模板 /themes/next/layout/_macro/post.swig
搜索 rel="tag"
,将 {{ tag.name }}
之前的内容换成 <i class="fa fa-tag"></i>
,就是更改一个标签的意思。
6、增加文章字数统计及阅读时常功能
参考:https://github.com/theme-next/hexo-symbols-count-time
安装插件 symbols_count_time,执行以下命令:
1 | npm install hexo-symbols-count-time |
修改 themes/next/_config.yml
主题配置文件,搜索关键字 symbols_count_time
,修改如下:
1 | symbols_count_time: |
7、修改链接文字样式
打开 themes\next\source\css\_common\components\post\post.styl
添加以下代码:
1 | .post-body p a{ |
8、头像设置圆形,停留旋转效果
修改 themes/next/_config.yml
将 avatar: /images/avatar_2.gif
替换为自己的头像,
可以将自己的头像上传自定义的图片到下列目录 /themes/next/source/images/
下面,然后进行引用即可。
9、代码复制
在 next 配置中修改如下,
1 | codeblock: |
10、修改文章链接
hexo-next 文章链接默认的生成规则是::year/:month/:day/:title
,是按照年、月、日、标题来生成的。比如:https://zxiaoxuan.github.io/2019/08/12/hello-world/
这样,如果文章标题是中文的话,URL链接是也会是中文,那么要生存简洁且唯一的 URL,怎么办呢?
安装插件
1 | npm install hexo-abbrlink --save |
修改根目录站点配置文件 config.yml,改为:
1 | permalink: posts/:abbrlink/ |
11、标签页和分类页
进入项目目录下,开启命令行,输入
1 | hexo new page tags |
这样会在生成一个文件:/source/tags/index.md
修改这个文件的注释,注意这里的 type: "tags"
标记了这个文件的类型,
1 |
|
categories 的使用同理。
12、显示预览内容
首先修改配置文件:
1 | excerpt_description: true |
两种方式,
方法一:写概述
在文章的 front-matter 中添加 description,其中 description 中的内容就会被显示在首页上,其余一律不显示。
1 |
|
比较不方便的是还得写一下概述,很多时候会懒得写概述,于是就需要第二种方法了。
方法二:文章截断
在需要截断的地方加入:
1 | <img src="https://faithlove.github.io/pic/2018/RMTP_1/topPicPre.png-slim" width=50% /> |
首页就会显示这条以上的所有内容,隐藏接下来的所有内容。