Hexo博客要求必须使用Github风格的Markdown语言编辑。所以需要了解具体的编写格式。
一、编辑器
市面上有很多的Markdown编辑器,之前很多人喜欢用Typora,但目前这个已经没有免费版可以用了。干脆直接用VSCode。
使用VSCode需要下载两个插件,第一个是【Markdown All in
One】,是一个组合包,把最常用的markdown优化都安装好;第二个是【Markdown
Preview Github
Styling】,是Github使用的Markdown渲染样式。使用这个样式,在本地就能预览Markdown文件最终在Github
Pages中显示的效果。
二、常用语法
标题
利用#设置标题,一个表示一级,两个表示二级,依次类推
1 2 3 # 一级标题 ## 二级标题 ……………… 以此类推
引用
利用>可以创建引用块
文本高亮
利用一组反引号`来把文本包起来。
代码块
利用三个反引号`把内容扩起来即可。在上面的那个反引号后面还可以加上语言名称来进行自适应。
斜体
可以用一组*号来把文字包起来,也可以直接用快捷键Ctrl+I。
加粗
k可以用一组**来把文字包起来,也可以用快捷键Ctrl+B。
删除线
用一组~~把文字包起来。
下划线
下划线可以用<u> </u>把文字包起来 。
按键效果
可以用一组 <kbd> </kbd>把文字包起来,实现按键效果。
列表
列表分为有序列表和无序列表 1 2 3 4 5 6 7 无序列表:用-加空格 - 第一- 第二有序列表:用数字加.加空格 1. 第一2. 第二
三、链接与图片
图片其实是一种超链接,所以把图片归类为链接里面。
1、跳转链接
普通的网站跳转都属于跳转链接,语法很简单:
2、图片链接
图片链接的markdown语法和跳转链接类似:
3、图片存储
网上很多教程都是利用相对路径来存储图片,操作如下: 1. 安装图片插件
1 npm install hexo-asset-image --save
_config.yml配置文件中,修改为 post_asset_folder: true
其中第二步可以忽略,第二步的意义在于我们新建文章的时候,会在soruce目录下生成文章同名文件夹供我们存储图片,我们也可以手动创建文件夹。
但是对于GitPages或者云服务器来说,其提供的免费存储空间都是有上限的,这样操作只适用于图片较少的情况。我们可以利用云服务器对象存储功能实现图床。
我的域名使用的是腾讯的,那就用腾讯的COS来操作,并且腾讯提供可视化工具COSBrowser,很方便。
参考博客: Hexo
博客图片添加至图床---腾讯云COS图床使用
一个图片测试:
四、公式
公式使用的是Latex语法。但需要注意,Hexo并不支持Laxte语法,所以我们需要开启相关的开关。有些主题就自带这个功能。
Markdown使用$包裹实现行内公式,使用$$包裹实现行间公式。
Latex语法可以不掌握,借助工具即可: HostMath
不过Hexo显示数学公式还需要一些其他设置,Hexo默认使用
hexo-renderer-marked 引擎渲染网页,该引擎会把一些特殊的 markdown
符号转换为相应的 html 标签,导致公式不显示。
五、表格
1 2 3 4 5 6 | 1 | T2 | T3 | |----------|:------------- :|------ :| | 1 | 1 | 1 | | 22 | 22 | 22 | | 333 | 333 | 333 |
1
1
1
22
22
22
333
333
333
------表示左对齐,:------:表示居中,-----:表示右对齐
Hexo的表格必须和正文之间有空行,否则不能正常显示
六、流程图
流程图的使用参考自Hexo-Next
主题的图形工具 -- Mermaid
Mermaid
是一个支持在Markdown文档中绘制流程图、甘特图、序列图等图形的工具。它基于JavaScript实现,能够将Markdown中的元素渲染成HTML元素,从而在网页上直观地展示各种图表。我使用的是Next主题,所以记录Next主题中使用流程图的方式。
配置 :
NexT config file 中找到mermaid配置,并设置为true,theme
可以设置浅色和深色背景的样式,共有4个可用选项
1 2 3 4 5 6 mermaid: enable: true theme: light: dark dark: dark
使用方法:mermaid与endmermaid是固定搭配,type
用于设置图形的种类,如流程图、时序图、甘特图等
1 2 {% mermaid type %} {% endmermaid %}
也可以使用代码块的方式:
但是此时需要在 Hexo config file
中找到highlight,并添加如下内容,才会使代码块的形式生效:
1 2 3 highlight : exclude_languages : - mermaid
Flowchart
用于绘制流程图,支持方向(例如从左到右、从上到下)和节点间关系的定义。
type 为 "graph TD"或者"graph
LR",分别表示从上到下和从左到右的方向
1 2 3 4 5 6 - 流程图方向: - TB - 从上到下 - TD - 自上而下,等同于TB - BT - 从下到上 - RL - 从右到左 - LR - 从左到右
示例:
1 2 3 4 5 6 {% mermaid graph TD %} A[Hard] -->|Text | B (Round) B --> C{Decision} C -->|One | D [Result 1 ] C -->|Two | E [Result 2 ] {% endmermaid %}
效果:
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
说明:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 graph TD ,定义一个从上到下的流程图。TD 是 Top to Down 的缩写,表示流程图从上向下排列。A [ Hard ] -->| Text | B ( Round ) ,定义了一个节点 A ,显示为 Hard 。一个带标签的箭头 -->| Text | 指向节点 B ,箭头上的标签为 Text 。 节点 B 被定义为 Round ,这是一个椭圆形节点。 B --> C { Decision } ,节点 B 指向节点 C 。节点 C 被定义为 Decision ,这是一个决策节点,用大括号 { } 表示。 C -->| One | D [ Result 1 ] ,决策节点 C 的一个分支,带标签 One ,指向节点 D 。节点 D 显示为 Result 1 ,这是一个矩形节点。 C -->| Two | E [ Result 2 ] ,决策节点 C 的另一个分支,带标签 Two ,指向节点 E 。节点 E 显示为 Result 2 ,也是一个矩形节点。
七、特殊字符
常见转义如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ! ! ” " # # $ $ % % & & ‘ ' ( ( ) ) * * + + < < = = - - > > ? ? @ @ [ [ \ \ ] ] { { | | } }
八、hexo模板
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 # !!!!!!!!!! # 每一项的 : 后面均有一个空格 # 且 : 为英文符号 # !!!!!!!!!! title: # 文章标题,可以为中文 date: # 建立日期,如果自己手动添加,请按固定格式 # 就算不写,页面每篇文章顶部的发表于……也能显示 # 只要在主题配置文件中,配置了 created_at 就行 # 那为什么还要自己加上? # 自定义文章发布的时间 updated: # 更新日期,其它与上面的建立日期类似 # 不过在页面每篇文章顶部,是更新于…… # 在主题配置文件中,是 updated_at permalink: # 若站点配置文件下的 permalink 配置了 title # 则可以替换文章 URL 里面的 title(文章标题) categories: # 分类,支持多级,比如: # - technology # - computer # - computer-aided-art # 则为 technology/computer/computer-aided-art # (不适用于 layout: page) tags: # 标签 # 多个可以这样写 [标签1,标签2,标签3] # (不适用于 layout: page) description: # 文章的描述,在每篇文章标题下方显示 # 并且作为网页的 description 元数据 # 如果不写,则自动取 <!-- more --> # 之前的文字作为网页的 description 元数据 keywords: # 关键字,并且作为网页的 keywords 元数据 # 如果不写,则自动取 tags 里的项 # 作为网页的 keywords 元数据 comments: # 是否开启评论 # 默认值是 true # 要关闭写 false layout: # 页面布局,默认值是 post,默认值可以在 # 站点配置文件中修改 default_layout # 另:404 页面可能用到,将其值改为 false type: # categories,目录页面 # tags,标签页面 # picture,用来生成 group-pictures # quote? # https: photos: # Gallery support,用来支持画廊╱相册,用法如下: # - photo_url_1 # - photo_url_2 # - photo_url_3 # https: link: # 文章的外部链接 # https: image: # 自定义的文章摘要图片,只在页面展示,文章内消失 # 此项只有参考本文 5.14 节配置好,否则请勿添加! sticky: # 文章置顶 # 此项只有参考本文 5.15 节配置好,否则请勿添加! password: # 文章密码,此项只有参考教程: # http: # 第 24 节,配置好,否则请勿添加! # 发现还是有 bug 的,就是右键在新标签中打开 # 然后无论是否输入密码,都能看到内容