全栈范

互联网 & 技术 & 产品 & 阅读 & 生活

0%

搭建 HEXO 博客(二):个性化定制

搭建 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
2
hexo clean
hexo s -g

Next 也提供了四种主题样式,到 next 目录下面修改其主题配置文件 _config.yml,将 Schemes 属性,将指定的注释去掉即可,清理,重启,即可预览该主题的效果。

下面我们介绍一下 Next 和 Hexo 个性化的一些定制方式。

2、博客评论

这里以 gitalk 为例。在新版本的 Next 中已经提供了 gitalk 的集成选项,参考注释,到 Gitalk 进一步了解如何使用。

首先,您需要选择一个公共 Github 存储库(已存在或创建一个新的 Github 存储库)用于存储评论,

然后需要创建 GitHub Application,如果没有 点击这里申请,Authorization callback URL 填写当前使用插件页面的域名。

然后将获取到信息填写到 Next 的配置文件中,

1
2
3
4
5
6
7
8
9
10
11
12
gitalk:
enable: true
github_id: xxxxxxxxx
repo: xxxxxxxxx
client_id: xxxxxxxxx
client_secret: xxxxxxxxx
admin_user: xxxxxxxxx
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language: zh-CN

这样重启预览 Hexo,页面或者文章页面下面就出现评论的入口了。

3、Local Search 本地搜索

安装插件 hexo-generator-searchdb,执行以下命令:

1
npm install hexo-generator-searchdb --save

修改 hexo/_config.yml 站点配置文件,新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

编辑 主题配置文件,启用本地搜索功能:

1
2
3
# Local search
local_search:
enable: true

重启并浏览效果即可。

4、设置网站图标

在 EasyIcon 中找一张(32 * 32)的 ico 图标,或者去别的网站下载或者制作,并将图标名称改为 favicon.ico,然后把图标放在 /themes/next/source/images 里,并且修改主题配置文件:

1
2
Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

或者自己制作一些图标也行。

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
2
3
4
5
6
7
8
9
10
11
12
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false
awl: 4
wpm: 275
suffix: "mins."

7、修改链接文字样式

打开 themes\next\source\css\_common\components\post\post.styl 添加以下代码:

1
2
3
4
5
6
7
8
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #ff106c;
text-decoration: underline;
}
}

8、头像设置圆形,停留旋转效果

修改 themes/next/_config.ymlavatar: /images/avatar_2.gif 替换为自己的头像,

可以将自己的头像上传自定义的图片到下列目录 /themes/next/source/images/ 下面,然后进行引用即可。

9、代码复制

在 next 配置中修改如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Add copy button on codeblock
border_radius: 8 # 按钮圆滑度
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style:

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
2
3
4
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 #算法: crc16(default) and crc32
rep: hex #进制: dec(default) and hex

11、标签页和分类页

进入项目目录下,开启命令行,输入

1
hexo new page tags

这样会在生成一个文件:/source/tags/index.md

修改这个文件的注释,注意这里的 type: "tags" 标记了这个文件的类型,

1
2
3
4
5
---
title: tags
date: 2016-06-08 16:19:38
type: "tags"
---

categories 的使用同理。

12、显示预览内容

首先修改配置文件:

1
excerpt_description: true 

两种方式,

方法一:写概述

在文章的 front-matter 中添加 description,其中 description 中的内容就会被显示在首页上,其余一律不显示。

1
2
3
4
5
6
7
---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述,正文内容均会被隐藏。
photos: # 如果要显示图片的话
"https://faithlove.github.io/pic/2018/HexoThumb/topPicPre.png-slim"
---

比较不方便的是还得写一下概述,很多时候会懒得写概述,于是就需要第二种方法了。

方法二:文章截断

在需要截断的地方加入:

1
2
<img src="https://faithlove.github.io/pic/2018/RMTP_1/topPicPre.png-slim" width=50% />
<!--more-->

首页就会显示这条以上的所有内容,隐藏接下来的所有内容。

未完待续,请参见下文


-----本文结束 感谢阅读---------

欢迎关注我的其它发布渠道