Posted 2021-06-15Blog39 minutes read (About 5810 words)0 visit

Summary of Hexo Blog Markdown Syntax

I have built a personal website using Hexo and Github Pages. Here, I would like to document the commonly used blog syntax for writing.

公式：
$$
\hat{x}_k=\hat{x}_k^-+K_t\left(y_k\right)
$$

标签插件（Tag Plugins）

常用小结

公式

正常使用LaTeX语法。

代码

使用codeblock

{% codeblock _.compact lang:js http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

_.compact jsUnderscore.js

_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

使用三个反引号

[language] [title] [url] [link text] code snippet

图片

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

链接示例

<a href="https://xxiao.org" target="_blank">
	<img src="/images/logo.png" width="25%" title="title" alt="alt">
</a>

首选：img标签

图片示例© xxiao.org

<img src="/images/logo.png" width="25%" title="title" alt="alt">

图片示例.html

<img src="/images/logo.png" width="25%" title="title" alt="alt">

其他样式

示例的Logo图片

Youtube

在文章中插入 Youtube 视频。

{% youtube video_id [type] [cookie] %}

Examples

视频

Taylor Swift - Lavender Haze (Official Music Video)

播放列表

BLACKPINK

Bilibili

插入Bilibili视频

网易云音乐

标签插件和 Front-matter 中的标签不同，它们是用于在文章中快速插入特定内容的插件。

虽然你可以使用任何格式书写你的文章，但是标签插件永远可用，且语法也都是一致的。

Tag plugins should not be wrapped inside Markdown syntax, e.g. []({% post_path lorem-ipsum %}) is not supported.

引用块

在文章中插入引言，可包含作者、来源和标题。

别号： quote

{% blockquote [author] [link] [source_link_title] %}
content
{% endblockquote %}

content

[author] [link] [source_link_title]

样例

没有提供参数，则只输出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

@DevDocstwitter.com/devdocs/status/356095192085962752

引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Seth GodinWelcome to Island Marketing

代码块

在文章中插入代码。

别名： code

{% codeblock [lang:language] [title] [url] [link text] %}
code snippet
{% endcodeblock %}

demo.py© xxiao.org

import seaborn as sns
print("Hello")
def Fun:
  a=0

以 option:value 的格式指定额外选项，例如：line_number:false first_line:5。

示例

普通的代码块

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

alert('Hello World!');

指定语言

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

[rectangle setX: 10 y: 10 width: 20 height: 20];

附加说明

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

Array.map

array.map(callback[, thisArg])

附加说明和网址

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

_.compactUnderscore.js

_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

反引号代码块

另一种形式的代码块，不同的是它使用三个反引号来包裹。

[language] [title] [url] [link text] code snippet

Pull Quote

在文章中插入 Pull quote。

This is a Pull quote

Gist

在文章中嵌入 Gist。

{% gist gist_id [filename] %}

{% gist 0358ce6eb43ef15f853a [filename] %}

iframe

在文章中插入 iframe，适用于视频、音频等。

{% iframe url [width] [height] %}

YouTube视频

Bilibili视频

{% iframe https://www.bilibili.com/blackboard/html5mobileplayer.html?aid=82766716&bvid=BV1FJ411V7gy&cid=147308234&hasMuteButton=1&danmaku=0&page=1&high_quality=1 %}

是否自动播放(默认否)：autoplay
默认弹幕开关(默认开启)：danmaku
是否默认静音(默认否)：muted
一键静音按钮是否显示(默认不显示)：hasMuteButton
视频封面下方是都显示播放量弹幕量等信息(默认显示)：hideCoverInfo
是否隐藏弹幕按钮（默认不隐藏）：hideDanmakuButton
是否隐藏全屏按钮(默认显示)：noFullScreenButton
是否开始记忆播放(默认开启)：fjw
默认开始时间(单位秒，默认0)：t
是否显示高清(默认否)：highQuality（无用的，因为除了参数外它还判断了网址是否来自bilibili）

网易云音乐

单曲

歌单

Spotify（试听）

QQ音乐

~~（失败）~~ (update 20241005 成功)

{%  iframe https://i.y.qq.com/n2/m/outchain/player/index.html?songid=102793934&songtype=0 marginwidth="0" marginheight="0"  %}

Image

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

![图片](/images/1.png)

{% img [a] /images/1.png [50] [50] '"这是一张图片" "无图片时的替代文字"' %}

Link

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

text url [external] [title]

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

样例

嵌入 test.js 文件全文

只嵌入第 3 行

嵌入第 5 行至第 8 行

嵌入第 5 行至文件结束

嵌入第 1 行至第 8 行

Youtube

在文章中插入 Youtube 视频。

{% youtube video_id [type] [cookie] %}

Examples

视频

播放列表

隐私模式

禁止 YouTube cookie

Vimeo

在文章中插入 Vimeo 视频。

{% vimeo video_id %}

引用文章

引用其他文章的链接。

Post not found: filename [title] [escape]

在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。

例如，在文章中使用 {% post_link how-to-bake-a-cake %} 时，只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake，都没有影响。

默认链接文字是文章的标题，你也可以自定义要显示的文本。

默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项，禁止对特殊字符进行转义。

链接使用文章标题

Post not found: hexo-3-8-released

Hexo 3.8.0 Released

链接使用自定义文字

Post not found: hexo-3-8-released 通往文章的链接

通往文章的链接

引用资源

引用文章的资源，与资源文件夹一起使用。

嵌入图片

hexo-renderer-marked 3.1.0+ 可以（可选）自动解析图片的文章路径，参考本节如何启用它。

“foo.jpg” 位于 http://example.com/2020/01/02/hello/foo.jpg。

默认（无选项）

<img src="/2020/01/02/hello/foo.jpg">

自定义 class 属性

<img src="/2020/01/02/hello/foo.jpg" class="post-image">

title 和 alt 属性

<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor">

Raw

如果您想在文章中插入 Swig 标签，可以尝试使用 Raw 标签，以免发生解析异常。

content

文章摘要和截断

在文章中使用 ，那么  之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。

例如：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

首页中将只会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

正文中则会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

注意，摘要可能会被 Front Matter 中的 excerpt 覆盖。

Updated on 2023-07-14

Refer to https://www.imaegoo.com/2020/icarus-with-bulma/ for reference.

按钮

点击展开代码 >folded

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

光有按钮肯定是不行的，一般我们还需要给按钮增加事件，比如点击下面的按钮，可以显示一条一言（Hitokoto）。

↑↑↑ 试着点击“显示一言”！

点击展开代码 >folded


<button class="button is-info" onclick="showHitokoto(event)">显示一言</button>
<blockquote class="hitokoto">↑↑↑ 试着点击“显示一言”！</blockquote>

<script>
function showHitokoto (event) {
    event.target.classList.add('is-loading');
    $.ajax({
        type: 'GET',
        url: 'https://v1.hitokoto.cn/',
        success: function (data) {
            $('.hitokoto').text(data.hitokoto);
            event.target.classList.remove('is-loading');
        }
    });
}
</script>

进度条

点击展开代码 >folded


<progress class="progress is-info" value="20" max="100"></progress>
<progress class="progress is-success" value="40" max="100"></progress>
<progress class="progress is-warning" value="60" max="100"></progress>
<progress class="progress is-danger" value="80" max="100"></progress>
<progress class="progress is-info" max="100"></progress>

Pixabay 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材…

网易云音乐是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。

哔哩哔哩是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。

石墨文档是全新一代云 Office 办公软件,支持多人在线协作编辑文档和表格,独有内容级安全,全过程留痕可追溯。PC 端和移动端全覆盖,随时随地远程办公。即写即存…

点击展开代码 >folded


<div class="tabs is-toggle"><ul>
<li class="is-active"><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a></li>
</ul></div>

{% raw %}<div id="Pictures" class="tab-content" style="display: block;">{% endraw %}
[Pixabay](https://pixabay.com/zh/) 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材...
{% raw %}</div>{% endraw %}
{% raw %}<div id="Music" class="tab-content">{% endraw %}
[网易云音乐](https://music.163.com/) 是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。
{% raw %}</div>{% endraw %}
{% raw %}<div id="Videos" class="tab-content">{% endraw %}
[哔哩哔哩](https://www.bilibili.com/) 是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。
{% raw %}</div>{% endraw %}
{% raw %}<div id="Documents" class="tab-content">{% endraw %}
[石墨文档](https://shimo.im/) 是全新一代云 Office 办公软件,支持多人在线协作编辑文档和表格,独有内容级安全,全过程留痕可追溯。PC 端和移动端全覆盖,随时随地远程办公。即写即存...
{% raw %}</div>{% endraw %}

<style type="text/css">
.content .tabs ul { margin: 0; }
.tab-content { display: none; }
</style>

<script>
function onTabClick (event) {
    var tabTitle = $(event.currentTarget).children('span:last-child').text();
    $('.article .content .tab-content').css('display', 'none');
    $('.article .content .tabs li').removeClass('is-active');
    $('#' + tabTitle).css('display', 'block');
    $(event.currentTarget).parent().addClass('is-active');
}
</script>