【Hexo】-4.Hexo使用Matery主题及配置

Hexo
Hexo 博客
发布日期:   2020-10-30
文章字数:   2.3k
阅读时长:   9 分
阅读次数:  

1. Hexo配置

在 Hexo/_config.yml 中保存了很多Hexo相关的配置，可以根据实际需要进行修改。

1.1 Site

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支持多个关键词。
author 作者
language 网站语言。中文用户可设置成 zh-CN。
timezone 网站时区。Hexo 默认使用电脑的时区。中国时区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

1.2 URL

参数 描述 默认值
url 网址, must starts with http:// or https://
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
pretty_urls 改写 permalink 的值来美化 URL
pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html，设置为 false 时去除 true
pretty_urls.trailing_html 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) true

注意：

  1. 如果网站路径为根目录，最后面不需要 /，root 部分为 //；这里是为了防止 search.xml 出现 404；
  2. 如果网站路径为子目录，例如 http://example.com/blog，url 需为 http://example.com/blog 并把 root 设为 /blog/；
  3. permalink 生成的文章链接默认为时间+文章名，如：http://example.com/2018/10/20/Hexo使用Matery主题及配置.html，这里使用了永久链接；
  4. abbrlink 为永久链接，下文说明。

1.3 Plugin

Hexo 可以很方便的支持插件，只需使用 npm 安装，并在 _config.yml 中配置即可。以下是几个实用插件

1.3.1 代码高亮插件

hexo 自带的代码高亮主题不太美观，可以选择使用 hexo-prism-plugin 插件，安装插件

npm i -S hexo-prism-plugin
# 同 npm install hexo-prism-plugin --save

开启插件，

# 关闭hexo自带高亮插件
highlight:
  enable: false

# 开启prism_plugin插件
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

1.3.2 搜索插件

可以使用 hexo-generator-search 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

插件安装完成后，执行 hexo clean && hexo g 会在 Hexo/public 目录下生成 search.xml 文件

1.3.3 RSS订阅

可以使用 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

1.3.4 Emoji表情

如果要支持表情符号的渲染，可以使用 hexo-filter-github-emojis 插件，安装命令如下：

npm install hexo-filter-github-emojis --save
githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

1.3.5 永久链接

hexo 文章链接默认日期+标题来生成，如：https://www.example.com/2019/08/12/hello-world.html ，如果文章标题是中文的话，URL链接是也会是中文。

这种链接有几个缺点：

  • 如果文章标题较长，链接也会很长，不够简洁，不便于阅读；
  • 文章的标题或日期修改，使用 hexo g 重写生成的文章，链接发生了变化；如果之前有引用，则会失效

可以使用 hexo-abbrlink 的 Hexo 插件来生成永久链接，安装命令如下：

npm install hexo-abbrlink --save
permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

2. 更换主题

2.1 主题下载

默认的主题比较简陋，可以在 主题商店 选择合适的主题，然后找到它的项目地址，使用Git将其下载到 Hexo/themes 目录下。可以使用 hexo-theme-matery 。

使用Git下载选中的主题

git clone git@github.com:blinkfox/hexo-theme-matery.git

2.2 启用主题

在 _config.yml 中，找到关键字 theme，修改参数为：theme：hexo-theme-matery，注意冒号后面有一个空格！

3.主题设置

3.1 站点配置

修改 Hexo 根目录下的 _config.yml：

  • 由于 matery 每行显示3条记录，所以分页参数 per_page 可设置为 6 的倍数。一般可设为 12

3.2 增加页面

3.2.1 新建分类 categories 页

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "categories"

编辑页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

3.2.2 新建标签 tags 页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "tags"

编辑页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

3.2.3 新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "about"

编辑页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

3.2.4 新建友情连接 friends 页

friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

3.3 主题配置

修改 Hexo/themes/hexo-theme-matery 目录下的 _config.yml

3.3.1 time

开启站点运行时间统计，设置开始时间

time:
  enable: false
  year: 2019 # 年份
  month: 06 # 月份
  date: 28 # 日期
  hour: 00 # 小时
  minute: 00 # 分钟
  second: 00 # 秒

修改社交链接

socialLink:
  github:  https://github.com/blinkfox
  email: 1181062873@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 1181062873
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false

3.3.3 toc

toc 可以用来显示 markdown 文章目录，默认开启 h2/h3/h4 标题

# 是否激活文章 TOC 功能，并配置TOC支持选中哪些标题类型，这是全局配置。
# 可以在某篇文章的 Front-matter 中再加上`toc: false`，使该篇文章关闭TOC目录功能
toc:
  enable: true
  heading: h1, h2, h3, h4
  collapseDepth: 0 # 目录默认展开层级
  showToggleBtn: true # 是否显示切换TOC目录展开收缩的按钮

问题：将之前写的md文件发布到Hexo上时，目录一直不展示。经过分析排查后发现：TOC 从 h2 开始支持，md中最高级别是 h1，所以 TOC 无法显示；后面在 heading 中增加了 h1，目录显示正常。

3.3.4 others

hexo-theme-matery 主题还支持很多配置项的修改和自定义，如：

  • 菜单
  • 我的梦想
  • 首页的音乐播放器和视频播放器配置
  • 是否显示推荐文章名称和按钮配置
  • favicon 和 Logo
  • 个人信息
  • 文章打赏信息
  • 复制文章内容时追加版权信息
  • MathJax
  • 文章字数统计、阅读时长
  • 点击页面的’爱心’效果
  • 我的项目
  • 我的技能
  • 我的相册
  • 不蒜子统计和谷歌分析（Google Analytics）
  • 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

3.4 主题支持插件

3.4.1 文章字数统计插件

如果要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。安装命令如下：

npm i --save hexo-wordcount

然后在本主题下的 _config.yml 文件中，激活以下配置项：

postInfo:
  date: true # 发布日期
  update: false # 更新日期
  wordCount: true # 文章字数统计
  totalCount: true # 站点总文章字数
  min2read: true # 文章阅读时长
  readCount: true # 文章阅读次数
wordCount:
  enable: true # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

3.4.2 Valine评论插件

如果需要支持文章评论功能，可以激活 Valine 插件。AppId 和 appKey 需要注册 Leancloud 后获取并配置

# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
  enable: true
  appId: xxxxxxx
  appKey: xxxxxxx
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: '欢迎留言！请在这里说出你的想法！' # Comment Box placeholder
  background: /medias/comment_bg.png

4. 参考

  1. Hexo文档
  2. hexo-theme-matery文档
  3. Hexo-abbrlink生成唯一永久文章链接
文章作者: Soulballad
文章链接: https://soulballad.github.io/posts/3abaf009
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Soulballad !
Hexo
赏
评论
  目录