Hexo、Shoka格式整理（云部署专用版）

发表于 更新于 分类于 阅读次数：
Shoka的作者姐姐什么时候更新版本.jpg

Hexo 格式

Front-matter格式

参考连接：https://hexo.io/zh-cn/docs/front-matter.html

正文格式其实和以前的md书写没什么差别，主要是要开始写【Front-matter】。

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页） -
categories 分类（不适用于分页） -
permalink 覆盖文章网址 -
excerpt 文章摘要 -
disableNunjucks 启用时禁用Nunjucks标签
和标签插件的呈现 -
lang 设定语言 在 _config.yml插入
主题自定义参数 - -

注：现在正在用的主题和这个没啥关系，请参考Hugo-stack的文档（会写）。

自定义Front-matter参数教程（Hexo用）

下面是设定主页隐藏某篇指定文章的教程，因为初始主题没有这个功能，所以需要调整layout的index.swig文件以增加相关的功能。

（同样和目前用的主题无关）

参考页面：https://www.jianshu.com/p/79fe9fb9dfa0

将路径：Hexo\themes\next\layout\index.swig 中的

1
2
3
4
5
6
7
8
9
{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
        {{ post_template.render(post, true) }}
    {% endfor %}
  </section>

  {% include '_partials/pagination.swig' %}
{% endblock %}

改成：

1
2
3
4
5
6
7
8
9
10
11
{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
        {% if post.notshow != true %}
            {{ post_template.render(post, true) }}
        {% endif %}
    {% endfor %}
  </section>

  {% include '_partials/pagination.swig' %}
{% endblock %}

Front-matter示例与问题

另外，这里举一个语雀上书写时的格式标准，对应主题是Shoka：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
tags: 
- tag1 ## tag名称
- tag2 
categories:
- [cat1, cat11] 
sticky: false
cover: https://cdn2.chukogals.top/study/wallpaper.jpg
# 也可以写成
cover: http://placehold.it/350x150.jpg

---

前言描述

<!-- more -->

正文

我在写的时候遇到拼写错误的问题，看样子脑子是该好好整顿一下了?

让我气的半死的‘catagories’，为什么语雀没有拼写检查：

正文markdown格式及问题

可以学习一下shoka使用的插件的根源渲染器：

https://markdown-it.github.io/

里面比较详尽的介绍了所有用得上的md格式。

问题（后续继续更新）：

  1. 表格中不能嵌套列表相关的表达，否则会整个拆掉。
  2. 表格各个单元格都要写点东西，要不然会乱掉。
  3. 代码行前后都需要有空行，否则无法识别代码。

Shoka 格式（括号内为云部署效果）

参考链接：主题特殊功能

内容基本上照抄，测试了一下云端部署的效果。

使用前须知

由于部署渲染并不在本地进行，所以语雀输出到Github Actions到hexo的表达会和Nunjucks标签冲突，因此所有表达中含有花括号{}的都会出现错误。相关无效功能请在相应文件夹建立MD文件进行渲染。

本文中部分示例涉及与Nunjucks标签冲突的情况，因此需要禁用。

相关禁用方法包括：参考自在带有数学公式的markdown文档里的交叉引用

  1. 直接在Front-Matter设置disableNunjucks: true ；
  2. 在_config.yml里添加：
1
2
marked:
  disableNunjucks: false
  1. 修改代码node_modules/hexo/lib/hexo/post.js的390行（但是此方法云部署无效）
1
2
3
4
## From:
if (typeof data.disableNunjucks === 'boolean') disableNunjucks = data.disableNunjucks;
## To:
disableNunjucks = true;

生效情况

因为主题换成Hugo-Stack了，所以下面的内容大幅简化，仅保留相关内容的生效情况和用法。

预览：

  • 代码块（有效）
  • 连接块（无效）
  • 练习题（无效）
  • 绘文字/emoji （有效）
  • effects 文字特效（部分有效）
  • spoiler 隐藏文字（无效）
  • label 标签块（有效）
  • note 提醒块（有效）
  • tab 标签卡（有效）
  • collapse 折叠块（有效）
  • taskList 待办事项（有效）
  • furigana 文字注音（有效）
  • media 多媒体（无效）
  • math 数学公式（有效）
  • mermaid 流程图（部分有效）

代码块（有效）

标准：[language] [title] [url] [link text] [mark] [command]

选项 描述 默认值
language 支持的语言戳此，如果不需要代码高亮，但希望显示代码块样式，则设为 raw；留空或设为 info ，将不显示代码高亮和代码块样式 null
title 代码块的标题文字 null
url 代码块标题右侧显示的链接 null
link text 上述链接显示的标题 link
mark 行高亮显示，格式为 mark:行号,行号开始-行号结束,其他行号 。（内部无空格）
例如 mark:1,4-7,10 ，将高亮显示第 1、4、5、6、7、10 行 null
command 命令行提示符，格式为 command:("提示内容":行号,行号&#124;&#124;"提示内容":行号开始-行号结束) null

连接块（无效）

使用 links 标签块，包围 yml 语法书写的内容，字段包括：

site 站点名称 必填
owner 管理员名字 可选，默认为 site 的值
url 站点链接 必填
desc 站点描述 可选，默认为 url 的值
image 站点图片 可选，默认为 images/404.png
color 方块颜色 可选，默认为 #666

练习题（无效）

首先需要在Front-matter添加quiz: true使其生效。

下面是相关标签和用途：

标签 含义
{.quiz} 选择题
{.quiz .multi} 多选题
{.quiz .true} 正确的判断题
{.quiz .false} 错误的判断题
{.quiz .fill} 填空题
[]{.gap} 空白下划线
[答案内容]{.gap} 答案内容带下划线
{.options} ABCDE 选项
{.correct} 选择题的正确选项
> 答案解析
[8.4]{.mistake} 错题备注

绘文字/emoji （有效）

用法：

1
2
3
:kissing_heart:
:ring:
:notes:

effects 文字特效（部分有效）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
【下为无效部分】
++ 下划线 ++
++ 波浪线 ++{.wavy}
++ 着重点 ++{.dot}
++ 紫色下划线 ++{.primary}
++ 绿色波浪线 ++{.wavy .success}
++ 黄色着重点 ++{.dot .warning}
~~ 删除线～～
~~ 红色删除线～～{.danger}
== 荧光高亮 ==
【下为有效部分】
[赤橙黄绿青蓝紫]{.rainbow}
[红色]{.red}
[粉色]{.pink}
[橙色]{.orange}
[黄色]{.yellow}
[绿色]{.green}
[靛青]{.aqua}
[蓝色]{.blue}
[紫色]{.purple}
[灰色]{.grey}
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
H~2~0
29^th^

spoiler 隐藏文字（无效）

1
2
!! 黑幕黑幕黑幕黑幕黑幕黑幕！！： 鼠标滑过显示内容
!! 模糊模糊模糊模糊模糊模糊！！{.bulr} ： 选中文字显示内容

label 标签块（有效）

1
2
3
4
5
6
[default]{.label}
[primary]{.label .primary}
[info]{.label .info}
[:heavy_check_mark:success]{.label .success}
[warning]{.label .warning}
[:broken_heart:danger]{.label .danger}

note 提醒块（有效）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:::default
默认默认
:::
:::primary
基本基本
:::
:::info
提示提示
:::
:::success
成功成功
:::
:::warning
警告警告
:::
:::danger
危险危险
:::
:::danger no-icon
危险危险
:::

tab 标签卡（有效）

注意：

开始行：;;;[同一ID] [标签名称]

结束行：;;;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
;;;id1 卡片 1
这里是卡片 1 的内容
** 加粗 **
[success]{.label .success}

{% links %} ## 无效，改了
- site: 雾雾的百宝箱
owner: 佳凌雾杨
url: https://dream.emergy.cyou
desc: 计算化学 & 生活杂谈
image: https://cdn.jsdelivr.net/gh/chukogals/chukogals.github.io@latest/images/avatar.jpg
color: "#e9546b"
{% endlinks %}
;;;

;;;id1 卡片 2
这里是卡片 2 的内容
:::danger
危险危险
:::
- 第一行
- 第二行
;;;

;;;id2 ②号标签卡片 1
这里是卡片 1 的内容
;;;

;;;id2 ②号标签卡片 2
这里是卡片 2 的内容
;;;

collapse 折叠块（有效）

注意：

开始行：+++[风格颜色] [标题文字]

结束行：+++

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
+++ 默认默认 这里是一段文字
示例文字。
+++
+++primary 紫色
:::info
参考信息
:::
- 第一行
- 第二行
+++
+++info  蓝色
;;;id3 卡片 1
这里是卡片 1 的内容
;;;
;;;id3 卡片 2
这里是卡片 2 的内容
;;;
+++
+++success 绿色
示例内容。
+++
+++warning 黄色
无效内容。
[label]{.label .success}
+++
+++danger 红色
[danger]{.label .danger}
+++

taskList 待办事项（有效）

1
2
3
4
5
6
7
8
9
10
11
12
- [ ] 这是一个小叉叉
- [x] 这是一个红色勾勾

{.danger}

- [ ] 未完成
- [x] 完成

{.primary}

- [ ] 未完成
- [x] 默认颜色

furigana 文字注音（有效）

为了兼容性，采用 markdown-it-ruby的基本格式： {文字^注音}，并且为了兼容表格，将分隔符由 | 换成了 ^ 。

注音分隔基于 furigana-markdown-it显示说明看：https://www.npmjs.com/package/furigana-markdown-it#quick-usage

media 多媒体（无效）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% media audio %}
- title: 列表 1
list:
- https://music.163.com/#/playlist?id=2943811283
- https://music.163.com/#/playlist?id=2297706586
- title: 列表 2
list:
- https://music.163.com/#/playlist?id=2031842656
{% endmedia %}


{% media video %}
- name: "测试 1"
url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
- name: "测试 2"
url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
{% endmedia %}

math 数学公式（有效）

需要加math: true 以支持KaTex。

1
2
3
4
5
6
7
8
9
10
11
12
13
行内公式：$\sqrt {3x-1}+(1+x)^2$

独立块显示：
$$\begin {array}{c}

\nabla \times \vec {\mathbf {B}} -\, \frac1c\, \frac {\partial\vec {\mathbf {E}}}{\partial t} &
= \frac {4\pi}{c}\vec {\mathbf {j}}    \nabla \cdot \vec {\mathbf {E}} & = 4 \pi \rho \\

\nabla \times \vec {\mathbf {E}}\, +\, \frac1c\, \frac {\partial\vec {\mathbf {B}}}{\partial t} & = \vec {\mathbf {0}} \\

\nabla \cdot \vec {\mathbf {B}} & = 0

\end {array}$$

mermaid 流程图（部分有效）

两组mermaid代码中部分类别生效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
···mermaid
graph LR
    A [Square Rect] -- Link text --> B ((Circle))
    A --> C (Round Rect)
    B --> D {Rhombus}
    C --> D
···
···mermaid
sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
···
（以上所有···均为代码块分割符号（半角），此处为了不出现表现混乱因此改了）