Theme page

This theme supports and uses the following page types by default.

Article

author: Set the author will show
email: Automatically obtain Gravatar avatar based on email
toc: Whether to display the table of contents (the article post is displayed by default, and the page post is not displayed by default)
readmore: Boolean, will force a READ MORE button to be displayed at the end of the homepage card summary
hideTime: Forces time information to be hidden

---
title: xxx
author: 云游君
email: me@yunyoujun.cn
readmore: true
---

description: only appears on the preview card, not in the text (default is 400 and the weight is emphasized by the table, slightly thinner than the bold font)
excerpt: Summary (no need to set in Front-matter, through  truncation to achieve, appear in both the preview card and the text)

---
title: xxx
description: xxxxxxx
---

This is excerpt.

<!-- more -->

This is more content.

Image references

You can annotate the images as follows.

![Audits-Lighthouse](https://i.loli.net/2020/03/08/DhfLu5yngb7NZE2.png) _Google Chrome Audits-Lighthouse detection score_

About

about you

Click on your avatar or name will enter the about page by default.

You will need to create your about page.

bash

hexo new page about

Then start to introduce yourself ~

About the site

If source/about/site.md is not exist, href will not be rendererd.

Click on the site name on the sidebar to enter the About Site page.

You can introduce your site by creating a new site.md in the source/about folder.

404

You will need to create a new 404 page first. You can do it by creating a new 404.md directly under the source directory.

---
layout: 404
title: Nothing
permalink: /404.html
reward: false
---

Your custom 404 page will only be displayed after you deploy it to GitHub Pages.

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

You can also directly visit /404.html to see the effect locally.

Creating a custom 404 page for your GitHub Pages site

Friend links

New Friends Link Page

bash

hexo new page links

Go to source/links/index.md and set thelinks field.

url: blog link
avatar: avatar image link
name: their name
blog: site name
desc: one-sentence description
color: the default is gray gray

You can enter My Friends to see the effect

tip: a text reminder when FriendChain is not loaded successfully and will be removed after loading. (This only takes effect after successfully loaded FriendChain via JSON.)

---
layout: links
title: My friends
date: 2019-06-21 13:06:06
keywords: link
description: Friends of Yunyou
comments: true
links:
  - url: https://yunyoujun.cn
    avatar: https://cdn.jsdelivr.net/gh/YunYouJun/yunyoujun.github.io/images/avatar.jpg
    name: Yunyou Jun
    blog: Yunyoujun's blog
    desc: All at sea.
    color: '#0078e7' # representative color
    email: # not required
placeholder: I haven't thought about what to say # The default description of YouChain
tip: Friendchain loading in progress ~ If it fails, please refresh and try again ~
---

Let the friend chain display on the sidebar sidebar-page link

To enable a random friend chain, you must change it to an external JSON loading method.

For example: https://cdn.jsdelivr.net/gh/YunYouJun/friends@gh-pages/links.json

You can refer to my YunYouJun/friends to automatically generate the JSON data format of your friend chain. (Of course, you can also store it locally manually.)

random: random friend chain order, not enabled by default

yaml

layout: links
title: My friends
date: 2019-06-21 13:06:06
keywords: link
description: Friends of Yunyou
comments: true
links: https://cdn.jsdelivr.net/gh/YunYouJun/friends@gh-pages/links.json
random: true

When you try to customize JSON manually, make sure that the JSON file is formatted correctly.

Create a new JSON file, e.g. source/links.json.

Template:

json

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

Example:

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"
  }
]

Note: Using jsdelivr may be delayed due to the CDN. You can also use a custom domain name as I did. https://friends.yunyoujun.cn/links.json

Girls

Record my favorite girls

Sample page: https://yunyoujun.cn/girls/

Set to enable first. (I know most people may not use this feature, so it is set to disable by default.)

When disabled, the CSS file of the page will not be packed into the final CSS file. So no need to worry about this if the feature will affect the loading speed.

yaml

girls:
  enable: true

bash

hexo new page girls

Enter source/girls/index.md

---
layout: girls
title: kawaii girls
banner: <span title = "Everyone is my angel!"> ranked in unintentional order </ span>
girls:
  - name: name
    avatar: avatar image link
    from: the project she's from
    url: character encyclopedia link
    reason: the reason for crushing
---

Please refer to my configuration.

If you want it to be displayed on the sidebar, you also need to configure the navigation sidebar-pagelink

Albums

There is an album homepage, place multiple albums, click to enter the album to view more photos.

In _config.yun.yml:

yaml

albums:
enable: true

Albums Example

Config Example

albums

The album collection is the navigation page of the album, you can place multiple albums here.

New page for albums:

bash

hexo new page albums

Enter source/albums/index.md, set type, and add album link, cover, etc.

caption: album title
url: album link
cover: album cover (It's better to use the link form that begins with http or https)
desc: album description

yaml

---
type: albums
albums:
  - caption: 夕阳西下
    url: /albums/sunset.html
    cover: https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg
    desc: 我想起那天夕阳下的奔跑
---

Gallery

Gallery Example

The photo album page is where you actually store your photos.

Use lightgallery.js, the library will only be loaded on the album page.

New page.

You just need to create the md file in the newly created albums folder above, for example, create a new sunset.md.

Or create new via command line:

bash

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

Enter the sunset.md file and modify it.

Note: This is layout instead of type.

TIP

You can also set gallery_password to encrypt the album. (Remember to set your repo as private.)

It is not directly named password to prevent conflicts with hexo-blog-encrypt plugin keyword password.

Because crypto-js is used, you also need npm install crypto-js.

Test page: https://hexo-theme-yun.yunyoujun.cn/albums/sunset.html Test password: test

If you find that the album cannot be decrypted normally when PJAX is turned on in hexo s, don't worry, this is that when Hexo is used as a server, the link is re-encrypted again, and there is no problem when generating static files for deployment.

yaml

---
title: Sunset
date: 2020-04-18 16:27:24
updated: 2020-04-18 16:27:24
layout: gallery
password: test
photos:
  - caption: me
    src: https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg
    desc: I think of running under the sunset that day.
  - caption: Remember
    src: https://i.picsum.photos/id/198/510/300.jpg
    desc: That is my lost youth
---

Why use album collection as albums and gallery as album? What is the Difference Between Albums vs Galleries in WordPress

Slides

DANGER

Will be deprecated!

Let's use slidev!

Use reveal.js to achieve, see document for more information.

You can use Markdown to mix Html to quickly write your slides.

Create a new slides/test.md under source.

Or command:

bash

hexo new page --path slides/test "Test Slides"

Enter test.md, modify the header as follows (follow the corresponding syntax to start editing your Slides file)

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

Then start writing your Slides file with Markdown directly below.

## Slide 1

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

## Slide 2

---

## Slide 3

An example of my Slides:

General configuration

The default horizontal page separator is ---, the vertical page separator is ~~, and the start keyword of the note is Note:.

Press S to turn on the speaker mode.

The theme is white, more theme names.

config corresponds to More Configuration.

yaml

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

As for the list of Slides, create your own source/slides/index.md and list it.

Theme page

Article

Image references

Tags

Categories

Archives

About

about you

About the site

404

Friend links

Girls

Albums

albums

Gallery

Slides

General configuration

Theme page ​

Article ​

Image references ​

Tags ​

Categories ​

Archives ​

About ​

about you ​

About the site ​

404 ​

Friend links ​

Random Friend Link ​

Girls ​

Albums ​

albums ​

Gallery ​

Slides ​

General configuration ​

Theme page

Article

Image references

Tags

Categories

Archives

About

about you

About the site

404

Friend links

Random Friend Link

Girls

Albums

albums

Gallery

Slides

General configuration