Hexo-Theme-Yun

简体中文

English

简体中文

English

Appearance

页面配置 ​

本主题默认支持并使用以下页面类型。

你可能需要先了解 Hexo 的 Front-matter

如果想要让扩展页面链接（如：Girls, 相册等）显示在侧边栏中，你还需要配置一下导航 侧边栏 - 页面链接。

文章 ​

额外的头部字段

  • author: 设置作者则会显示
  • email: 自动根据邮箱获取 Gravatar 头像
  • toc: 是否显示目录（文章 post 默认显示，页面 post 默认不显示）
  • readmore: 将会首页卡片摘要末尾强制显示一个 阅读更多 按钮
  • hideTime: 强制隐藏时间显示
md
---
title: xxx
author: 云游君
email: me@yunyoujun.cn
readmore: true
hideTime: true
---
  • description: 描述（只出现在预览卡片上，不出现在正文中）（默认使用 400 字重以表强调，略细于加粗字体）
  • excerpt: 摘要（不需要在 Front-matter 中设置，通过 <!-- more --> 截断实现，预览卡片与正文中均出现）
md
---
title: xxx
description: xxxxxxx
---

这里是摘要

<!-- more -->

这里是更多内容

图片注释 ​

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

md
![Audits - Lighthouse](https://i.loli.net/2020/03/08/DhfLu5yngb7NZE2.png)_谷歌浏览器 Audits - Lighthouse 检测分数_

img-caption-example.png

页面 ​

通用页面的配置。

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

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

譬如：

yaml
---
title: xxx
icon: ri:women-line
---

图标效果可见: Lovely Girls

标签 tags ​

示例: https://www.yunyoujun.cn/tags/

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

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

bash
hexo new page tags

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

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

你可以在 _config.yun.yml 中设置：

yaml
wordcloud:
  enable: true

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

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

分类 categories ​

示例： https://www.yunyoujun.cn/categories/

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

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

bash
hexo new page categories

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

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

TIP

分类和标签

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

同时太多的分类与标签，既不方便整理，也不利于移动端的展示。

归档 archives ​

Hexo 默认支持

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

示例：https://www.yunyoujun.cn/archives

关于 About ​

关于你 ​

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

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

bash
hexo new page about

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

关于站点 ​

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

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

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

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

404 ​

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

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

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

Example: https://www.yunyoujun.cn/404.html

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

Creating a custom 404 page for your GitHub Pages site

新建友链页面

bash
hexo new page links

进入 source/links/index.md，设置 links 字段。

  • url: 博客链接
  • avatar: 头像图片链接
  • name: 怎么称呼？
  • blog: 站点名称
  • desc: 一句话描述
  • color: 代表色，默认是灰色 gray

你可以进入 我的小伙伴们 查看效果

  • tip: 友链未加载成功时的文字提示，加载完后会被移除。（仅当通过 JSON 加载友链时生效。）
yaml
---
layout: links
title: 我的小伙伴们
date: 2019-06-21 13:06:06
keywords: 链接
description: 云游的小伙伴们
comments: true
links:
  - url: https://yunyoujun.cn
    avatar: https://cdn.jsdelivr.net/gh/YunYouJun/yunyoujun.github.io/images/avatar.jpg
    name: 云游君
    blog: 云游君的小站
    desc: All at sea.
    color: '#0078e7' # 代表色
    email: # 非必须
placeholder: 还没想好说些什么 # 默认对友链的描述
tip: 友链加载中～如失败请刷新重试～
---

让友链显示在侧边栏中 侧边栏 - 页面链接

随机友链 ​

想要启用随机友链，你必须将其改为外置的 JSON 加载方式。

譬如：https://cdn.jsdelivr.net/gh/YunYouJun/friends@gh-pages/links.json

你可以参考我的 YunYouJun/friends 来自动生成你友链的 JSON 数据格式。 （当然你自己手写存放在本地也可以。）

  • random: 随机友链顺序，默认未开启
yaml
---
layout: links
title: 我的小伙伴们
date: 2019-06-21 13:06:06
keywords: 链接
description: 云游的小伙伴们
comments: true
links: https://cdn.jsdelivr.net/gh/YunYouJun/friends@gh-pages/links.json
random: true
---

当您尝试手动自定义 JSON，请保证随机友链的格式正确。

创建一个新的 JSON 文件，如 source/links.json。

模板：

json
[
  {
    "url": "博客链接",
    "avatar": "头像地址",
    "name": "作者昵称",
    "blog": "博客名称",
    "desc": "描述",
    "color": "主题色",
    "email": "电子邮箱（非必需）"
  }
]

例如：

json
[
  {
    "url": "https://www.yunyoujun.cn",
    "avatar": "https://cdn.jsdelivr.net/gh/YunYouJun/yunyoujun.github.io/images/avatar.jpg",
    "name": "云游君",
    "blog": "云游君的小站",
    "desc": "All at sea.",
    "color": "#0078e7",
    "email": "me@yunyoujun.cn"
  }
]

注意：你使用 jsdelivr 可能会因为 CDN 有所延迟。 你也可以像我一样使用自定义域名。https://friends.yunyoujun.cn/links.json

Girls ​

记录喜欢的女孩子们

页面示例：https://yunyoujun.cn/girls/

先设置开启。（我知道大多数人，可能并不会使用这个功能。所以默认是关闭的。）

当关闭时，该页面的 CSS 文件也不会被打包进最后的 CSS 文件。所以不用担心本主题该功能会影响加载速度。

yaml
girls:
  enable: true
bash
hexo new page girls

进入 source/girls/index.md

yaml
---
layout: girls
title: 可爱的女孩子
banner: <span title="大家都是我的天使！">排名不分先后</span>
girls:
  - name: 名称
    avatar: 头像图片链接
    from: 出自什么作品
    url: 人物百科链接
    reason: 喜欢的理由
---

当你不输入 url 人物百科链接时，会自动将人物名与萌娘百科前缀拼接以获得人物百科链接。

可参考我的配置。

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

相册 albums ​

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

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

yaml
albums:
  enable: true

相册示例

配置示例

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

相册集 ​

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

新建相册集页面

bash
hexo new page albums

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

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

相册页 ​

相册页示例

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

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

新建相册页面。

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

或通过命令行新建：

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

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

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

TIP

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

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

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

测试页面：https://hexo-theme-yun.yunyoujun.cn/albums/sunset.html 测试密码：test

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

yaml
---
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

Slides 幻灯片 ​

DANGER

将会被弃用！

让我们使用 slidev 吧！

使用 reveal.js 实现，更多信息请参见文档。

你可以使用 Markdown 混合 Html 来快速编写你的幻灯片。

source 下新建 slides/test.md。

或者命令：

bash
hexo new page --path slides/test "测试 Slides"

进入 test.md，修改头部如下（遵循对应语法即可开始编辑你的 Slides 文件）

yaml
---
title: Color Dust
date: 2020-06-23 16:27:24
updated: 2020-06-23 16:27:24
layout: slide
slide:
  theme: white
  config:
    history: true
    mouseWheel: true
---

接着直接在下方用 Markdown 开始编写你的 Slides 文件吧。

md
## Slide 1

## A paragraph with some text and a [link](http://hakim.se).

## Slide 2

---

## Slide 3

我的一个 Slides 示例:

通用配置 ​

默认水平分页分隔符为 ---，垂直分页分隔符为 ~~，笔记开始关键字为 Note:。

按 S 开启演讲者模式。

主题为 white，更多主题名称。

config 对应更多配置。

yaml
slide:
  separator: ---
  separator_vertical: ~~
  data_separator_notes: '^Note:'
  theme: white
  config:
    history: true
    mouseWheel: false

至于想要 Slides 的列表嘛，自己建个 source/slides/index.md 在里面列吧。

Released under the SATA | MIT License.

Copyright © 2020-PRESENT YunYouJun