侧边栏壁纸
博主头像
soulballad博主等级

技术文章记录及总结

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

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

soulballad
2020-10-30 / 0 评论 / 0 点赞 / 50 阅读 / 6,047 字
温馨提示:
本文最后更新于 2022-03-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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/blogurl 需为 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生成唯一永久文章链接
0

评论区