前面记录的我的Hexo建站过程，Hexo+ThemeNext的优化配置，这里来到博客网站中最重要的部分：写作。
其实写作很简单，只需要三步即可：
# 步骤1，创建post文章： |
但是如何写好文章，文章排版，图片的引用，注意提醒，流程图等等，这些光靠Markdown还是不够的，我们需要知道Hexo以及主题Next对于我们的写作扩展了哪些非常好用的功能，来丰富我们的写作内容。
主要参考：
首先来到Hexo这里
名词解释
post: 文章，一个文件，一般咱们写的Markdown都是在这里写的。 |
hexo目录结构
# 继续之前创建的myblog |
写作
如果需要创建文章（post）或者一个页面（page），可以使用一下命令：
$ hexo new [layout] <title> |
layout 的默认值是post，也就是如果不指定layout默认就是创建文章post。这里的默认值可以在Hexo的_config.yml中的default_layout 指定。
Layout 布局：
在Hexo中有三种布局layout，分别是：post,page,draft，他们在创建时都是放在不同的目录中的，如下：
| Layout | Path |
|---|---|
post 文章 |
source/_posts |
page 页面 |
source |
draft 草稿 |
source/_drafts |
例如：创建post 文章：
$ hexo new mypost |
创建page 页面：
$ hexo new page docs |
创建draft 草稿：
$ hexo new draft mydraft |
设置新建post文件名
Hexo 在新建文章的时候默认使用post title作为其文件名，你可以在 Hexo 的_config.yml中的new_post_name指定：
# 默认值 |
这里的mypost.md就是以mypost这个title作为文件的名称存放在source/_posts中的。
你可以通过下面的占位符来制定生成的文件名称。
| 占位符 | 描述 |
|---|---|
:title |
Post title (lower case, with spaces replaced by hyphens) 文章名 |
:year |
Created year, e.g. 2015 年 |
:month |
Created month (leading zeros), e.g. 04 月 |
:i_month |
Created month (no leading zeros), e.g. 4 日 |
:day |
Created day (leading zeros), e.g. 07 星期 |
:i_day |
Created day (no leading zeros), e.g. 7 星期 |
例如：
我们更改Hexo的_config.yml配置：
new_post_name: :year-:month-:day-:title.md |
我们来再次创建post：
$ hexo new mynewpost |
我们发现这里的文件名变成了我们制定的格式：年-月-日-title.md
2019-11-17-mynewpost.md
草稿 Drafts
前面讲过文章post是放在source/_posts 目录下面的，而草稿draft是存放在source/_drafts下面的。我们可以使用publish 发表命令，将草稿从source/_drafts目录移动到source/_posts目录中，意思就是说草稿写完了，可以使用publish命令发表了变成文章了。
# 格式是等同于上面的new命令的。 |
草稿默认是不显示的，也就是说在博客中是看不到的。你可以是加上--draft参数在hexo启动的时候；或者在hexo的配置文件_config.yml中配置render_draft: true来开启对草稿的渲染，默认只是false。
Front-matter
再使用hexo命令创建文章的时候，我们发现文章内已经有一些内容了：
$ hexo new mypost |
在文章的最顶端的以---包裹的这块区域就是：Front-Matter，什么叫Front-Matter呢？
front matter
前页（指扉页、版权页、目次等）
Front-matter 是在文章开始部分的一块JSON或YAML的代码块，用来设置你的文章用的。
上面是YAML格式的，YAML 是以三个链接线作结束符的；也可以写成下面的JSON样式的，JSON样式的是以三个分号作为结束符的。
"title": "mypost" |
Front-matter 的设置和默认值如下：
| Setting | Description | Default |
|---|---|---|
layout |
Layout 布局 | |
title |
Title 标题 | Filename (posts only) 文件名 |
date |
Published date 发布时间 | File created date 文件创建时间 |
updated |
Updated date 更新时间 | File updated date 文件更新时间 |
comments |
Enables comment feature for the post 是否开启文章的评论功能 | true |
tags |
Tags (Not available for pages) 文章的tags | |
categories |
Categories (Not available for pages) 文章的分类 | |
permalink |
Overrides the default permalink of the post 永久链接 | |
keywords |
The keywords that only used in meta tag and Open Graph (not recommended) 不推荐使用 | |
excerpt |
Page excerpt in plain text. Use this plugin to format the text |
脚手架Scaffolds
Scaffold
英 /ˈskæfəʊld/ 美 /ˈskæfoʊld/ 全球(美国)
n. 脚手架；鹰架；绞刑台
vt. 给…搭脚手架；用支架支撑
复数 scaffolds
你可曾想过如何配置生成新的post时，如果根据模板配置Front-matter呢，这里的scaffod文件就是这个作用。
前面的hexo目录结构中我们可以看到scaffold目录有如下三个文件：
$ ls scaffolds/ |
分别用来指定创建新的draft、page、post时默认的模板，我们来看一下具体的内容：
$ cd scaffolds/ |
再来看一下我们新创建的post文件内容：
$ cat source/_posts/mypost.md |
是不是就是scaffolds/post.md中的内容呢？只不过scaffold中使用了模板语言，双大括号的格式。
所以呢，我们可以在scaffolds/post.md中定义我们需要的格式了：
$ vim scaffolds/post.md |
我们再次创建新的post：
$ hexo new myscffoldpost |
我们看到新创建的post文件已经使用了我们在scaffolds/post.md中配置的模板了。
typora-root-url: ..
这个参数很有用哦，是设置Typora软件的图像根目录为该文章的上级目录(在linux中，两个..代表上级目录)，后面会讲解。
Categories & Tags：分类和标签
只有文章支持分类和标签。分类用于生成有层次的分类和子分类。标签也用于定义层次感的，这样标签的位置就不重要了。
例如：
categories: |
注意：
上面的分类写了两个，但是这两个并不是并列的关系，Baseball是Sports的子分类的。如果需要为一篇文章添加多个分类，多个并列的分类，可以使用下面list的方式：
categories: |
此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。
Tag Plugin
这是tag插件，不同于上面介绍的标签，这里的标签插件是为了在文章快速插入指定的内容。
块引用 Block Quote
在你的文章中添加引用的块，可以设定作者，源文，名称，源文链接等，格式如下：
{% blockquote [author[, source]] [link] [source_link_title] %} |
别名是quote，可以简写成：
{% quote [author[, source]] [link] [source_link_title] %} |
例如：
没有参数，普通引用：
{% quote %} |
显示效果如下：
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.
从书中引用
{% blockquote David Levithan, Wide Awake %} |
显示效果如下：
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
从Twritter中引用
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %} |
显示效果如下：
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
从网络上的文章引用
{% 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.
代码块 Code Block
在文章中添加代码片段，格式如下：
{% codeblock [title] [lang:language] [url] [link text] %} |
别名：code，可以简写成：
{% code [title] [lang:language] [url] [link text] %} |
例如：
普通的代码引用
{% codeblock %} |
显示效果如下：
|
指定语言
{% codeblock lang:objc %} |
显示效果如下：
|
为代码块增加标题
{% codeblock Array.map %} |
显示效果如下：
|
为代码块增加标题和链接
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %} |
显示效果如下：
|
反引号代码块 - 常用
Markdown内置格式，跟上面的一样，只是使用三个反引号代替，格式如下：
``` [language] [title] [url] [link text] code snippet |
|
拉取引用 Pull Quote
在文章增加Pull Quote，格式如下：
{% pullquote [class] %} |
jsFiddle
在文章中嵌入jsFiddle片段：格式如下：
{% jsfiddle shorttag [tabs] [skin] [width] [height] %} |
Gist
在文章中嵌入Gist片段，格式如下：
{% gist gist_id [filename] %} |
iframe
嵌入iframe，格式如下：
{% iframe url [width] [height] %} |
链接 Link
插入链接，增加target="_blank"属性，格式如下：
{% link text url [external] [title] %} |
Include Code
插入在source/downloads/code目录中的代码块，默认的代码块文件可以在Hexo的_config.yml中的code_dir指定，格式如下：
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %} |
例如：
嵌入整个text.js
{% include_code lang:javascript test.js %} |
只嵌入第三行
{% include_code lang:javascript from:3 to:3 test.js %} |
嵌入第5-8行
{% include_code lang:javascript from:5 to:8 test.js %} |
嵌入从第5行到最后
{% include_code lang:javascript from:5 test.js %} |
嵌入从第1行到第8行
{% include_code lang:javascript to:8 test.js %} |
嵌入视频流媒体 Vimeo
可以指定大小：
{% vimeo video_id [width] [height] %} |
插入文章链接 - 常用
{% post_path filename %} |
例如，在文章中使用 时，只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake，都没有影响。
默认链接文字是文章的标题，你也可以自定义要显示的文本。此时 Markdown 语法 不受支持。
默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项，禁止对特殊字符进行转义。
例如：我之前写的一篇文章：文件名为：my-first-blog.md 位于source/_posts/，那么我要加入该文章的链接如下：
{% post_link my-first-blog %} |
效果如下：
使用hexo + github pages 创建博客 使用hexo + github pages 创建博客 使用<b>hexo + github pages</b> 创建博客 使用hexo + github pages 创建博客引用资源
引用文章资源
{% asset_path filename %} |
Raw
如果您想在文章中插入 Swig 标签，可以尝试使用 Raw 标签，以免发生解析异常。
{% raw %} |
文章摘要和截断
在文章中使用 ，那么 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。
例如：
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. |
正文中则会出现
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
注意，摘要可能会被 Front Matter 中的 excerpt 覆盖。
在使用Next主题的时候，默认会在首页显示文章全部内容，效果不太好：可以设置theme/next/_config.yml 设置如下：
# Automatically excerpt (Not recommend). |
文章中插入图片的方法汇总
1.使用Markdown语法：
格式：
 |
例如：
把图像放到hexo/source/images 目录下，名为TX.jpg
 |
显示如下：
2.通过Hexo语法：
这种方式可以在文章中插入指定大小的图片：
格式如下：
{% img [class names] /path/to/image [width] [height] "title text 'alt text'" %} |
例如：
把图像放到hexo/source/images 目录下，名为TX.jpg
{% img https://imgs.knner.wang/images/TX.jpg 25 25 "TX img hexo" %} |
效果如下：
此时markdown不会显示的，需要通过Hexo server看到。
3.通过hexo 资源文件夹方式:
在hexo _config.yml 中开启：post_asset_folder: true
创建名称为Hexo-ThemeNext-Writing的文章，也就是本篇文章：
$ hexo new Hexo-ThemeNext-Writing |
此时Hexo会创建Hexo-ThemeNext-Writing.md文件以及Hexo-ThemeNext-Writing文件夹，都位于hexo/source/_post/ 目录下。
我们把图像放到hexo/source/_post/Hexo-ThemeNext-Writing 目录下，名为TX.jpg
那么我们可以在文章中引用：也有两种方式：
方式1：标签方式
{% asset_img TX.jpg "TX img asset" %} |
显示效果：
方式2：markdown方式
 |
显示效果：
注意此时markdown也不会显示图片的。
4.通过typora软件的文档，也就是html方式：
Typora allows to use
tag for displaying images, which can also be used to adjust the size of images.
For example, you could specify the width or height attribute of an
tag, or set the width/height in its style attribute:
<img src=”https://www.google.com/doodles/kamma-rahbeks-241st-birthday" width=”200px” />
**
<img src=”https://www.google.com/doodles/kamma-rahbeks-241st-birthday" style=”height:200px” />
Another common use case is that when you try to insert a retina image, and want to scale it to a “correct” size according, then you could specify a zoom factor in its style attribute.
<img src=”https://www.google.com/doodles/kamma-rahbeks-241st-birthday" style=”zoom:50%” />
Above syntax can be understood and displayed by Typora. Although you could set other css properties in its style attribute, they will be ignored when you edit or preview by Typora, but could affect the exported HTML or PDF.
把图像放到hexo/source/images 目录下，名为TX.jpg
<img src="https://imgs.knner.wang/images/TX.jpg" width="35px" height="35px"> |
显示效果：
因为是typora支持的，所以在typora内是能够显示的。
参考：
https://www.runoob.com/tags/tag-img.html
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
格式说明：
标签定义 HTML 页面中的图像。
标签有两个必需的属性：src 和 alt。
属性
New ：HTML5 中的新属性。
属性 值 描述 align top bottom middle left right HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 alt text 规定图像的替代文本。 border pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 crossoriginNew anonymous use-credentials 设置图像的跨域属性 height pixels 规定图像的高度。 hspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 ismap ismap 将图像规定为服务器端图像映射。 longdesc URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 src URL 规定显示图像的 URL。 usemap #mapname 将图像定义为客户器端图像映射。 vspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 width pixels 规定图像的宽度。
文章中插入图片的方法总结
方法1,4能够在typora中显示
方法2,4能够设置图片大小
总体下来4比较好，但是不能使用asset folder了，只能在hexo/source/images 下自行新建和文章同名的目录用于存放该文章的所有图片了。
但是由于不是Markdown语法，可以在通过Markdown Here把Markdown语法转换成微信文章的时候会有问题，所以综合下来，我采用的方式还是1和3的结合：
过程如下：
在hexo _config.yml 中开启：post_asset_folder: true
那么在新建文章的时候会自动创建与文章同名的目录，位于hexo/source/_post/目录下，此时我们把这个目录移动到hexo/source/images目录下，然后将本文所有用到的图片都放到这里，然后设置Typora–格式–图像–设置图片根目录，
然后我们选择hexo/source即可，此时typora会自动的在该文章的Front Matter中添加：typora-root-url: ..的字段。
所以呢我们直接把这个字段添加到hexo/scaffolds/post.md这个文章模板文件中，这样下次在新建文章的时候就自动设置了图片根目录为改文章的上级目录，也就是hexo/source，那么在typora中插入图片只需要按typora快捷方式：Ctrl + Shift + i，他会自动插入markdown语法，然后点击文件夹图标选择``hexo/sourcehttps://imgs.knner.wang/images/<文章名目录>`即可。
例如：
 |
显示如下：
好了，这样既用到了Hexo asset资源管理的方式，也用到了Markdown语法，同时呢Typora内也会显示图片。但是唯一的一点是此时的图片我们不能设置了大小或者缩放，不过经过测试就是你插入了很大的图片，在文章中也是会显示缩略图的。
接着来到主题Next这里
之所以选择Next主题，是因为主题足够简介，很适合做IT的人使用，同时呢Next可配置项很多很全，完全不需要在二次的开发，很适合我这种前端小白了 。
Centered Quote 居中引用
居中引用比较适合单行文本：格式如下：
{% centerquote %}Something input here{% endcenterquote %} |
显示效果：
居中显示效果
Note 注意
Next 设置，hexo/themes/next/_config.yml
# Note tag (bs-callout) |
关于note tag 的三种样式，查看如下图，选择自己喜欢的：
style: simple
style: modern
style: flat
我这里设置成flat样式，设置好了，下面来看具体如何使用：
使用方式：
{% note [class] [no-icon] %} |
下面这种写法是错误的：
{% note danger %}note text, note text, note text{% endnote %} |
这种也是错误的：
{% note danger %}note text |
正确的如下：
{% note danger %} |
{% note danger %} # 这里不能有文本 |
不指定样式
{% note %} |
显示效果：
default 样式
{% note default %} |
显示效果：
Default Header
Welcome to Hexo!
primary 样式
{% note primary %} |
显示效果：
Primary Header
Welcome to Hexo!
info 样式
{% note info %} |
显示效果：
Info Header
Welcome to Hexo!
success样式
{% note success %} |
显示效果：
Success Header
Welcome to Hexo!
warning 样式
{% note warning %} |
显示效果：
Warning Header
Welcome to Hexo!
danger 样式
{% note danger %} |
显示效果：
Danger Header
Welcome to Hexo!
当然在Note中是可以使用Markdown语法的，如下示例：
{% note info no-icon %} |
显示效果：
Note内使用代码块：
{% note success %} |
显示效果：
使用Markdown序列：
{% note default %} |
显示效果：
Note 内使用表格：
{% note default %} |
显示效果：
| 1 | 2 |
|---|---|
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
Tabs 标签
Next设置：hexo/themes/next/_config.yml
# Tabs tag |
使用格式：
{% tabs Unique name, [index] %} |
示例
{% tabs First unique name %} |
显示效果：
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例：默认显示第三个tab
{% tabs Second unique name, 3 %} |
显示效果：
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例：没有默认tab显示：
{% tabs Third unique name, -1 %} |
显示效果：
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例：自定义tabs的labels名：
{% tabs Fourth unique name %} |
显示效果：
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例：tabs中labels只有图标：
{% tabs Fifth unique name %} |
显示效果：
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例：tabs中有labels和图标
{% tabs Sixth unique name %} |
显示效果：
This is Tab 1.
This is Tab 2.
This is Tab 3.
tabs 的固定链接
Permalink for > [Tab one](#tab-one). |
显示效果：
Permalink for > Tab one.
Permalink for > Tab one 1.
Permalink for > Tab one 2.
Permalink for > Tab one 3.
Permalink for > Tab two.
Permalink for > Tab two 1.
Permalink for > Tab two 2.
Permalink for > Tab two 3.
This is Tab 1.
This is Tab 2.
This is Tab 3.
This is Tab 1.
This is Tab 2.
This is Tab 3.
tabs 中使用其他tag
- tabs 中使用Markdown 语法
- tabs 中使用note
- tabs 中嵌入youtube视频
- tabs 中嵌套子tabs
{% tabs Tags %} |
显示效果：
This is Tab 1.
One
Two
Three
4-spaces code block:
nano /etc
Tagged code block:
code tag
code tag
code tag
Note default tag.
This is Tab 2.
- Five
- Six
- Seven
This is Tab 3.
This is Sub Tab 1.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
This is Sub Tab 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
This is Sub Tab 3.
This is Sub-Sub Tab 1 of Sub Tab 3.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
This is Sub-Sub Tab 2 of Sub Tab 3.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
This is Sub-Sub Tab 3 of Sub Tab 3.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
文章中嵌入PDF文档
Next 配置：hexo/themes/next/_config.yml
# PDF tag, requires two plugins: pdfObject and pdf.js |
使用方法：
{% pdf url [height] %} |
例如：url可以使用网络上的
{% pdf https://example.com/sample.pdf %} |
也可以使用本地路径：
{% pdf /path/to/your/file.pdf 600px %} |
真实示例：使用本地路径：
将pdf文件：名为：201905-servicemesh-development-trend.pdf，放入到hexo/sourcehttps://imgs.knner.wang/images/Hexo-ThemeNext-Writing 中，然后引用如下：
{% pdf https://imgs.knner.wang/images/Hexo-ThemeNext-Writing/201905-servicemesh-development-trend.pdf 600px %} |
显示效果：
Mermaid 使用文本创建图表等
mermaid
英 /ˈmɜːmeɪd/ 美 /ˈmɜːrmeɪd/ 全球(英国)
n. 美人鱼（传说中的）；女子游泳健将
复数 mermaids
Next 设置：hexo/themes/next/_config.yml
# Mermaid tag |
使用方式：
{% mermaid type %} |
Mermaid Github:
https://github.com/mermaid-js/mermaid
Mermaid Website:
http://mermaid-js.github.io/mermaid/#/
我们参考官网，测试一下：
Flowchart 流程图：
http://mermaid-js.github.io/mermaid/#/flowchart
{% mermaid graph TD %} |
显示效果：
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Sequence diagram 顺序图
http://mermaid-js.github.io/mermaid/#/sequenceDiagram
Sequence
英 /ˈsiːkwəns/ 美 /ˈsiːkwəns/ 全球(英国)
n. [数][计] 序列；顺序；续发事件
vt. 按顺序排好
过去式 sequenced过去分词 sequenced现在分词 sequencing复数 sequences第三人称单数 sequencesdiagram
英 /ˈdaɪəɡræm/ 美 /ˈdaɪəɡræm/ 全球(美国)
n. 图表；图解
vt. 用图解法表示
过去式 diagramed或diagrammed过去分词 diagramed或diagrammed现在分词 diagraming或diagramming复数 diagrams第三人称单数 diagrams
{% mermaid sequenceDiagram %} |
显示效果：
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hi John，你好嘛？
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail!
John-->>Alice: 我很好!
John->>Bob: Hi Bob，你好吗？
Bob-->John: Good~
也可以写成：
{% mermaid sequenceDiagram %} |
显示效果：
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Gantt diagram 甘特图
http://mermaid-js.github.io/mermaid/#/gantt
{% mermaid gantt %} |
显示效果：
gantt
dateFormat YYYY-MM-DD
title 使用Hexo Next主题通过的Mermaid中的甘特图
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
甘特图2：
{% mermaid gantt %} |
显示效果：
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
State diagrams 类图
http://mermaid-js.github.io/mermaid/#/stateDiagram
{% mermaid stateDiagram %} |
显示效果：
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Pie 饼状图
http://mermaid-js.github.io/mermaid/#/pie
{% mermaid pie %} |
显示效果：
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Label 标签
类似于[Note](#Note 注意)的方式：
使用方式：
{% label [class]@Text %} |
示例：
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@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.
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.
video 视频
使用方式：
{% video url %} |
例如：引用网络上的
{% video https://example.com/sample.mp4 %} |
引用本地：
{% video /path/to/your/video.mp4 %} |
Button 按钮
使用格式：
{% button url, text, icon [class], [title] %} |
示例：
{% button #, Text %} |
效果：
Text按钮的text和title：
{% btn #, Text %}{% btn #, Text & Title,, title %} |
效果：
TextText & Title{% btn #, Text %} {% btn #, Text & Title,, title %} |
效果：
Text Text & Title{% btn #, Text %} |
效果：
Text Text & Title按钮上添加icon图标
{% btn #,, home fa-5x %}{% btn #,, home fa-4x %}{% btn #,, home fa-3x %}{% btn #,, home fa-2x %} |
效果：
按钮上添加文本和icon图标
{% btn #, Text & Icon (buggy), home %} |
效果：
Text & Icon (buggy) Text & Icon (fixed width){% btn #, Text & Large Icon, home fa-fw fa-lg %} |
效果：
Text & Large Icon Text & Large Icon & Title在文本中添加按钮
点击 {% btn #, 这个按钮, home fa-fw fa-lg %} 跳转到文章开头。 |
效果：
点击 这个按钮 跳转到文章开头。
在其他tag中使用按钮
{% note info %} |
效果：
按钮边缘
<div class="text-center"><div>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</div> |
效果：
按钮链接的相对路径
{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %} {% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %} |
效果：
Previous Chapter Next Chapter按键链接的绝对路径
{% btn https://github.com/theme-next/hexo-theme-next, NexT, github fa-fw fa-lg, NexT source code %} |
效果：
NexT图片墙
使用格式：
{% grouppicture [group]-[layout] %}{% endgrouppicture %} |
实例：
{% gp 5-3 %} |
{% gp 6-2 %} |
效果：
本文到这里就结束了，欢迎期待后面的文章。您可以关注下方的公众号二维码，在第一时间查看新文章。
