Hexo创建Markdown格式文章
版权申明:本文为原创文章,转载请注明原文出处
索引
本文基于Hexo静态网页生成器,使用Icarus主题,为基础环境。
如果你还没有使用 可以参考 Hexo安装与使用及遇到的问题 和 有关Hexo的其他文章在这里你可以了解到,如何 创建 编辑 文章。
Markdown格式的书写方式 规则等等。
前言
- Hexo将解析Markdown格式文章。
- 我们只需要创建Markdown格式文件,Hexo会自动解析成静态网页。
- Markdown是轻量级的标记语言 在书写上非常简洁 方便 高效。 更多资料可以参考Markdown指南 Markdown教程
创建文章
创建文章的方式有两种
1 在博客目录的source\_posts文件夹创建后缀为.md的文件
直接创建文件 很方便 但是需要自己来编写Front-matter的每一项
2 通过Hexo new命令创建文章。
这个方法的好处在于,可以根据模板来创建,很多Front-matter可以自动生成。
所以通常使用第2种方式来创建首先 打开博客目录的
scaffolds文件夹 找到post.md文件打开 这个是模板文件
输入以下代码保存。 更多可以参考Hexo官网文档 Icarus官方文档scaffolds\post.md 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
32
33
34
35
36
37
38
39
40
41
42
# 文章的标题
title: {{ title }}
# 创建时间
date: {{ date }}
# 更新时间
updated:
# 分类
categories:
# 标签
tags:
# 布局
layout:
# 作者
author:
# 语言
language: zh-cn
# === 以下项 根据主题不同可能项名称也不同 以下为Icarus使用的项
# 文章封面图片
cover:
# 小的缩略图
thumbnail:
封面内容 通常在这里编辑文章的介绍
<!--more-->
文章内容
# 前言
# 目录
# 正文
# 结束创建好模板后,就可以在命令行新建文章了。在博客目录打开命令行工具。
$ hexo new article_name运行成功后 找到
source\_posts\article_name.md就是更改新建文章的markdown文件文章的
文件名和title可以是不同的。文章创建好了,下一章了解如何编辑markdown格式的文章。
编辑文章
- 首先编辑文件头
- 然后编辑
<!--more-->之前的字符 作为封面介绍 - 在
<!--more-->之后即为文章的正文了
Markdown标记规则
标题
可以使用
#来标记 1-6 级的标题#号越多字体标题等级越低# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
段落
- 使用两行回车来标记段落
字体
在字符的前后加上
* _来标记字体
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本*斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___
分割线
在一个空行使用三个以上的
* -字符来标记分割线*** * * * ***** ---- - - -
删除线
在需要使用的字符前后加上2个
~号abc~~abc~~
下划线
要在字符上使用下划线 需要使用HTML标签
带下划线字符<u>带下划线字符</u>
无序和有序列表
在字符前加符号
+ * -任意字符和一个空格 为无序列表- 123 * abc + 123在字符前加数字
1. 2. 3.和一个空格 为有序列表1. abc 2. 123 3. abc列表之间可以嵌套使用
1. abc - 123 - 456 2. 123 - abc
区块引用
在字符前加
>和一个空格这是区块引用
> 这是使用区块引用的方法还可以使用多层嵌套
这时第一层
这时第二层
这时第三层
> 这时第一层 > > 这时第二层 > > > 这时第三层还可以组合使用
> 区块中使用列表 > 1. 第一项 > 2. 第二项 > + 第一项 > + 第二项 > + 第三项区块中使用列表
- 第一项
- 第二项
- 第一项
- 第二项
- 第三项
代码块
一些简单的语句可以在字符前后加上
`反引号 标记这是代码在字符前可以使用一个制表符(Tab键)或四个空格 来标记代码块
如果有层级关系需要按层级加制表符这是代码块还可以使用
```将代码块包裹起来1
2
3funciton(){
a = a + 1
}| ```js | funciton(){ | a = a + 1 | } | ```语言可以支持很多种
js diff yml css等等。。Hexo对代码块进行了扩展 以实现更多的功能 更多可以参考Hexo代码高亮文档
| ``` [language] [title] [url] [link text] [additional options] | code snippet | ```Icarus还支持了 增加
>folded初始折叠功能
链接
给字符添加链接 例:我的博客 https://blog.pp6f.com/
[字符](链接地址) or <https://blog.pp6f.com/>还可以定义链接变量 我的博客
[我的博客][我的博客链接] [我的博客链接]: https://blog.pp6f.com/
图片
- 添加一个图片可以使用
 - 也可以使用定义图片URL变量使用 类似链接的变量定义
- 还可以使用HTML标签语言
<img scr=图片URL地址 width="100%" height="100%">
表格
制作表格非常简单 一目了然 没什么可说的 哈哈
| 左对齐 | 右对齐 | 居中对齐 | | :---- | ------: | :------: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 |左对齐 右对齐 居中对齐 单元格 单元格 单元格 单元格 单元格 单元格
HTML
- 归根结底markdown的原理还是属于HTML标签语言的范畴,所以markdown完美的支持HTML元素。在一些不能满足需要的地方,可以直接嵌入HTML元素来解决
例:<article class="message is-primary" style="font-size:0.5em"> <div class="message-body"> 添加HTML元素 </div> </article>
转义
markdown使用了很多特殊字符 当需要输入这些字符的时候 可以使用反斜杠
\来转义
abc
**abc****abc** \*\*abc\*\*
思维导图
markdown和github支持
- 竖行显示
1
2
3graph LR
A(根)-->B1(项1)
A-->B2(项2) - 横向显示
1
2
3graph TD
A(根)-->B1(项1)
A-->B2(项2)
markmap插件
安装
npm install hexo-markmap参数
- height: 画布高度
- depth: 可选,自动折叠层数深于depth的节点
使用方法
1
{% markmap height [depth] %}
实例
- 代码
1
2
3
4
5
6
7
8{% markmap 300px %}
- Testa
- test1
- test2
- Testb
- test1
- test2
{%endmarkmap%} - 效果
- 代码
其他插件
End
Hexo创建Markdown格式文章

