美化你的博客文章

文章样式

多彩引用标签

20210527232523

> Primary

<div class="success">

> Success

</div>

<div class="warning">

> Warning

</div>

<div class="danger">

> Danger

</div>

<div class="info">

> Info

</div>

Primary

Success

Warning

Danger

Info

折叠

这是折叠案例 这是内容 
<details>
  <summary>Summary</summary>
  Content
</details>

加深背景

type

`type`

修改设置效果生成

cd themes/yun
git pull

文章内跳转

<span id="jump2"><font color=#00ffff>2即标题1</font></span>
<p id="test1">2级标题1正文</p>
[点击跳转到](#test2)
[点击跳转到底部](#jump)


<div id="tset2">4级标题2</div>
<span id="jump">4级标题2</span>
[点击跳转到2级标题1正文](#test1)
[跳转到2级标题1](#jump2)

卡片样式

内容卡片

  • opacity: 自定义展示的文章卡片透明度，默认为 0.8
post_card:
  opacity: 0.8

# type

为文章设置 type 属性，即可将其转为其他类型卡片，并跳转 url 设置的链接。

譬如：

---
title: xxx
type: bilibili
url: https://www.bilibili.com/video/av8153395/
---

在文章标题前将会出现 bilibili 的图标，点击标题会跳转至对应的链接。

目前默认支持以下类型（哔哩哔哩、豆瓣、GitHub、网易云音乐、推特、微信公众号、微博、语雀、知乎、Notion、外链）：

types:
  link:
    color: blue
    icon: icon-external-link-line
  bilibili:
    color: "#FF8EB3"
    icon: icon-bilibili-line
  douban:
    color: "#007722"
    icon: icon-douban-line
  github:
    color: black
    icon: icon-github-line
  netease-cloud-music:
    color: "#C10D0C"
    icon: icon-netease-cloud-music-line
  notion:
    color: black
    icon: icon-notion
  twitter:
    color: "#1da1f2"
    icon: icon-twitter-line
  wechat:
    color: "#1AAD19"
    icon: icon-wechat-2-line
  weibo:
    color: "#E6162D"
    icon: icon-weibo-line
  yuque:
    color: "#25b864"
    icon: icon-yuque
  zhihu:
    color: "#0084FF"
    icon: icon-zhihu-line

你也可以自己在 yun.yml 设置你跳转不同链接专属的图标和颜色。

type:
  google:
    color: xxx
    icon: xxx

当你指定的 type 不存在于默认支持中，也没有进行自定义，将默认使用蓝色的额外链接图标。

如果你想在你的外链卡片上显示一些信息，你可以写在 <!-- more --> 前，它会被当作摘要显示。

譬如：

---
title: hexo-theme-yun
type: github
url: https://github.com/YunYouJun/hexo-theme-yun
---

Hexo 主题 Yun

<!-- more -->

# hide

你可以在文章头部添加 hide 属性，来临时隐藏某篇文章。

  • hide

    
  :

  - `index`: 设置为 `index` 时，将只在首页隐藏，归档中仍然展示。（譬如放一些没有必要放在首页的笔记，并在归档中方便自己查看。）
  - `true`: 当设置为 `true` 时，该文章仍然会被渲染，你自己可以直接访问链接进行查看。但不会被显示在展示的文章卡片与归档中。

> 什么？你想完全不渲染不显示？那你为何不将其放在 `_drafts` 文件夹下，或干脆不提交这篇文章。

```yaml
---
title: xxx
hide: true
# hide: index
sitemap: false
indexing: false
---

Tabs

表格

{% tabs First unique name %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

文章优先级设置

置顶

    确保你的 hexo-generator-index

    (opens new window) 为 2.0.0 或以上

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

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

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

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

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

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

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

打赏开关

您也可以在某篇文章的首部单独设置是否开启打赏。

reward: true
# reward: false

文章播放器开关

---
title: xxx
aplayer: true
---

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

编写文章Front-matter

参数 描述
layout 布局
title 标题
date 建立日期
updated 更新日期
comments 开启文章的评论功能
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址

生成新文章

hexo new [layout] <title>   //layout默认是post    缩写hexo new paper

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

page

如果你想另起一页，那么可以使用

hexo new page board

系统会自动给你在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board

draft

draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以

hexo new draft newpage

这样会在source/_draft中新建一个newpage.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用

hexo server --draft1

在本地端口中开启服务预览。

如果你的草稿文件写完了，想要发表到post中，

hexo publish draft newpage

就会自动把newpage.md发送到post中。