配置文件

总配置文件地址 _config.yml

主题配置文件地址 yun.yml

文章相关

额外的头部字段

  • author: 设置作者则会显示

  • email: 自动根据邮箱获取 Gravataropen in new window 头像

  • toc: 是否显示目录（文章 post 默认显示，页面 post 默认不显示）

  • readmore: 将会首页卡片摘要末尾强制显示一个 阅读更多 按钮

  • sticky: 通过设置文章 Front Matter 中 sticky 属性以进行置顶，数值越高，优先级越高。

    ​ 设置置顶后，文章卡片右上角将出现置顶图标。

---
title: xxx
author: 云游君
email: me@yunyoujun.cn
readmore: true
sticky: 1
---
---
title: xxx
author: 云游君
email: me@yunyoujun.cn
readmore: true
sticky: 1
---
  • description: 描述（只出现在预览卡片上，不出现在正文中）（默认使用 400 字重以表强调，略细于加粗字体）
  • excerpt: 摘要（不需要在 Front-matter 中设置，通过 <!-- more --> 截断实现，预览卡片与正文中均出现）
---
title: xxx
description: xxxxxxx
---

这里是摘要

<!-- more -->

这里是更多内容

图片注释

你可以遵循如下写法来对图片进行注释。

![Audits - Lighthouse](hexo-yun主题配置相关.assets/A8F0c84aeaDhfLu5yngb7NZE2.png)_谷歌浏览器 Audits - Lighthouse 检测分数_
image-20211216152456645

页面

通用页面的配置。

  • title: 设置页面标题（可以对默认标题进行覆盖）
  • icon: 页面标题前的图标

标签、分类、相册等页面未设置标题时将默认使用语言包中的翻译（显示对应语言的 标签/分类/相册 等。） 你可以通过设置 title 来覆盖这些页面的标题。

譬如：

---
title: xxx
icon: icon-women-line
---

标签 tags

如果您尚未安装 hexo-generator-tag，请输入 npm install hexo-generator-tag。

新建 tags 页面，在博客根目录下输入：

hexo new page tags

修改 source/tags/...md 的 Front Matter

---
date: 2017-10-09 19:11:58
comments: false
type: tags
---

你可以在 yun.yml 中设置：

wordcloud:
  enable: true

来使用彩色的词云替代原生的标签云。

仅会在标签页自动引入 wordcloud2.js

分类 categories

如果您尚未安装 hexo-generator-category，请输入 npm install hexo-generator-category。

新建 categories 页面，在博客根目录下输入：

hexo new page categories

修改 source/categories/....md 的 Front Matter

---
date: 2017-10-12 10:47:16
comments: false
type: categories
---

TIP

分类和标签open in new window

尽管 Hexo 支持了为一篇文章设置多个分类，但我个人更建议你一篇文章只放在一个分类下，而使用标签来为它进行多个描述。

同时太多

归档 archives

Hexo 默认支持

本主题采用时间轴的形式重写

示例：https://www.yunyoujun.cn/archivesopen in new window

关于 About

关于你

默认点击自己的头像或者名称会进入关于页面。

你需要新建好你的关于页面。

hexo new page about

然后就开始介绍你自己吧～

关于站点

主题将根据 source/about/site.md 是否存在，决定是否渲染侧边栏中关于站点的超链接。

此外点击侧边栏中的站点名称，会进入关于站点页面。

你可以在 source/about 文件夹下新建 site.md 来介绍你的站点。

譬如记载站点的变迁历史，我觉得和关于自己放在一起可能会互相干扰，就分开了。

404

你需要先新建 404 页面。可以直接在 source 目录下新建 404.md。

---
layout: 404
title: 四大皆空
permalink: /404.html
reward: false
---

只有当你将其部署到 GitHub Pages 上，你访问不存在的页面才会显示。

Example: https://www.yunyoujun.cn/404.htmlopen in new window

在本地，你也可以直接访问 /404.html 查看效果。

Creating a custom 404 page for your GitHub Pages siteopen in new window

相册 albums

存在一个相册主页，放置多个相册，点击进入相册查看更多照片。

在 yun.yml 中开启相册功能。

albums:
  enable: true

相册示例open in new window

配置示例open in new window

如果想要让相册显示在侧边栏中，你还需要配置一下导航 侧边栏 - 页面链接。

相册集

相册集是相册的导航页面，你可以在此放置多个相册。

新建相册集页面

hexo new page albums

进入 source/albums/index.md，设置 type，和添加相册链接、封面等。

  • caption: 相册标题
  • url: 相册链接
  • cover: 相册封面（请使用 http 或 https 开头的链接形式）
  • desc: 相册描述
---
type: albums
albums:
  - caption: 夕阳西下
    url: /albums/sunset.html
    cover: https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg
    desc: 我想起那天夕阳下的奔跑
---

相册页

相册页示例open in new window

相册页，才是你真正存放照片的地方。

使用 lightgallery.jsopen in new window 实现，仅在相册页才会加载该类库。

新建相册页面。

你只需在上面新建好的 albums 文件夹中，继续创建 md 文件，譬如新建 sunset.md。

或通过命令行新建：

hexo new page --path albums/sunset "夕阳"

进入 sunset.md 文件，进行修改。

注意：这里是 layout 而不是 type。

TIP

你还可以设置 gallery_password 来对相册进行加密。（记得将你的仓库设置为私有。）

没有直接命名为 password 以防止与 hexo-blog-encryptopen in new window 插件关键字 password 冲突。

因为使用了 crypto-jsopen in new window，所以你还需要 npm install crypto-js。

测试页面：https://www.yunyoujun.cn/albums/sunset.htmlopen in new window 测试密码：test

如果你发现在 hexo s 并开启了 PJAX 时，无法正常解密相册，不用担心，这是 Hexo 作为服务器时，对链接又重新加密了一遍，生成静态文件部署时是没有问题的。

---
title: 夕阳
date: 2020-04-18 16:27:24
updated: 2020-04-18 16:27:24
layout: gallery
password: test
photos:
  - caption: 我
    src: https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg
    desc: 我想起那天夕阳下的奔跑
  - caption: 想起
    src: https://i.picsum.photos/id/198/510/300.jpg
    desc: 那是我逝去的青春
---

为什么使用相册集作为 albums，gallery 作为相册 ？ What is the Difference Between Albums vs Galleries in WordPress

额外依赖库支持

与第三方支持的区别是，此处大部分功能为安装插件或引入 CDN 实现，并由主题进行简单适配。

字数统计

v0.9.4 使用 hexo-wordcountopen in new window 替代 hexo-symbols-count-timeopen in new window

安装 hexo-wordcountopen in new window

npm install hexo-wordcount
# or
# yarn add hexo-wordcount

在配置文件 source/_data/yun.yml 中：

  • count: 字数统计
  • time: 阅读时间
wordcount:
  enable: true
  count: true
  time: true

RSS

安装 hexo-generator-feedopen in new window。

npm install hexo-generator-feed --save

配置默认图标为 icon-rss-line，如需自定义，进入 source/_data/yun.yml 进行配置。

可配置在 yun.yml 的 social 字段里，如：

social:
  - name: RSS
    link: /atom.xml # config.feed.path
    icon: icon-rss-line
    color: orange

更多配置请参见官方文档open in new window（在 Hexo 工作目录下的 _config.yml 中进行）。

置顶

确保你的 hexo-generator-indexopen in new window 为 2.0.0 或以上

通过设置文章 Front Matter 中 sticky 属性以进行置顶，数值越高，优先级越高。

设置置顶后，文章卡片右上角将出现置顶图标。

---
title: xxx
sticky: 100
---

你也可以通过设置权重来实现多篇置顶文章的顺序。

---
title: xxx
sticky: 1
---
---
title: xxx
sticky: 2
---

此时 sticky: 2 的文章将排列在 sticky: 1 的文章上面。

pjax

使用 pjaxopen in new window 实现。

pjax:
  enable: true

其他可用插件推荐

以下的插件配置与使用均与主题无关，你可以自行参考其文档配置。

因为当你想要一些主题并未提供的功能时，它们实际上可以直接通过插件来实现。

hexo-tag-commonopen in new window

扩展的 hexo 标签语法。

譬如实现 Tabs 功能。（Demoopen in new window）

后续可能会添加更多常用标签。

hexo-widget-treeopen in new window

挂件形式，通过树状菜单查看文章。

如果需要 PJAX 效果，开启主题 PJAX 即可。

hexo-blog-encryptopen in new window

你可以使用它来加密一些私密的文章页面。