关于Hexo + NexT的配置

关于Hexo + NexT的配置

一、参考资源

本静态网站的部署主要参考了下文:

鱼先生发布于 2019-01-22的“超详细Hexo+Github Page搭建技术博客教程【持续更新】

因为原来已经有了GitHub账户,因此相对简单一些,配置主要涉及到了:

  • 准备 node 和 git 环境
  • 安装 Hexo
  • 配置 SSH key
  • 部署到 Github
  • 主题配置
  • 添加gitalk评论系统
  • 配置腾讯公益404页面
  • 添加字数统计和阅读时长
  • 开启fancybox
  • 百度站长平台添加网站管理
  • 添加百度统计

等方面的配置。

当前的结果如下图所示:

lymanzhanggithubio

目前还有绑定域名、SEO优化、添加sitemap站点地图、添加蜘蛛协议、自动推送、主动推送、sitemap、手动提交等不少功能需要进行配置。留待后续抽时间完成。

二、其他资源

其他部分设置还参考了以下一些资源:

硕子鸽 2020-02-03 10:00:44的帖子Hexo搭建个人博客网站

对next主题页面生成、站内搜索的实现、个人头像设置、RSS订阅设置、社交栏设置、实现侧边栏页面的圆角、为文章中的代码块增加一键复制功能、增加站点访问人数和总访问量、增加网易云音乐、部署到阿里云等有更加详细的配置说明。

reuixiy发表的打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化以及Moorez发表的hexo的next主题个性化教程:打造炫酷网站也有更多详细的介绍,值得仔细研读。

三、博客编写规范

基于markdown编写博客并发布时需要遵循hexo关于Front-matter 和页面变量的规范。如果自己直接新建markdown文件,一定要记得加上文件最上方的参数,即下面的相关内容,还有编码请用 UTF-8。

关于文件最上方的参数,参见网友们对 Hexo 官方文档的 Front-matter 和页面变量定义规范的总结:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
# !!!!!!!!!!
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# !!!!!!!!!!

title:
# 文章标题,可以为中文

date:
# 建立日期,如果自己手动添加,请按固定格式
# 就算不写,页面每篇文章顶部的发表于……也能显示
# 只要在主题配置文件中,配置了 created_at 就行
# 那为什么还要自己加上?
# 自定义文章发布的时间

updated:
# 更新日期,其它与上面的建立日期类似
# 不过在页面每篇文章顶部,是更新于……
# 在主题配置文件中,是 updated_at

permalink:
# 若站点配置文件下的 permalink 配置了 title
# 则可以替换文章 URL 里面的 title(文章标题)

categories:
# 分类,支持多级,比如:
# - technology
# - computer
# - computer-aided-art
# 则为 technology/computer/computer-aided-art
# (不适用于 layout: page)

tags:
# 标签
# 多个可以这样写 [标签1,标签2,标签3]
# (不适用于 layout: page)

description:
# 文章的描述,在每篇文章标题下方显示
# 并且作为网页的 description 元数据
# 如果不写,则自动取 <!-- more -->
# 之前的文字作为网页的 description 元数据

keywords:
# 关键字,并且作为网页的 keywords 元数据
# 如果不写,则自动取 tags 里的项
# 作为网页的 keywords 元数据

comments:
# 是否开启评论
# 默认值是 true
# 要关闭写 false

layout:
# 页面布局,默认值是 post,默认值可以在
# 站点配置文件中修改 default_layout
# 另:404 页面可能用到,将其值改为 false

type:
# categories,目录页面
# tags,标签页面
# picture,用来生成 group-pictures
# quote?
# https://io-oi.me/tech/hello-world/

photos:
# Gallery support,用来支持画廊╱相册,用法如下:
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/hello-world/

link:
# 文章的外部链接
# https://io-oi.me/tech/hello-world/

image:
# 自定义的文章摘要图片,只在页面展示,文章内消失
# 此项只有参考本文 5.14 节配置好,否则请勿添加!

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好,否则请勿添加!

password:
# 文章密码,此项只有参考教程:
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节,配置好,否则请勿添加!
# 发现还是有 bug 的,就是右键在新标签中打开
# 然后无论是否输入密码,都能看到内容