Hexo的基本用法汇总 {#CrawlerTitle}

神经蛙 2023-07-01 2023-07-02

Hexo的用法示例 {#Hexo的用法示例}

此部分为Hexo使用知识汇总，方便后续创作使用，汇集各位大佬的总结，此处注明大部分来自安知鱼大佬

Front-matter 的基本认识 {#Front-matter-的基本认识}

Front-matter 是 markdown 文件最上方以 ---- 分隔的区域，用于指定个别档案的变数。
其中又分为两种

如果标注可选的参数，可根据自己需要添加，不用全部都写在 markdown 里

Page Front-matter 用于页面配置

Post Front-matter 用于文章页配置
Page Front-matter Post Front-matter

|------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | --- title: date: updated: type: comments: description: keywords: top _img: mathjax: katex: aside: aplayer: highlight_ shrink: type: --- |

| 写法 | 解释 | |------------------|----------------------------------------------------------------| | title | 【必需】页面标题 | | date | 【必需】页面创建日期 | | type | 【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置 | | updated | 【可选】页面更新日期 | | description | 【可选】页面描述 | | keywords | 【可选】页面关键字 | | comments | 【可选】显示页面评论模块(默认 true) | | top_img | 【可选】页面顶部图片 | | mathjax | 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false) | | katex | 【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false) | | aside | 【可选】显示侧边栏 (默认 true) | | aplayer | 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐配置 | | highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置) |

|------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | --- title: date: updated: tags: categories: keywords: description: top _img: comments: cover: toc: toc_ number: toc _style_ simple: copyright: copyright _author: copyright_ author _href: copyright_ url: copyright _info: mathjax: katex: aplayer: highlight_ shrink: aside: swiper _index: 1 top_ group _index: 1 background: "#fff" --- |

| 写法 | 解释 | |-----------------------|----------------------------------------------------------------| | title | 【必需】文章标题 | | date | 【必需】文章创建日期 | | updated | 【可选】文章更新日期 | | tags | 【可选】文章标签 | | categories | 【可选】文章分类 | | keywords | 【可选】文章关键字 | | description | 【可选】文章描述 | | top_img | 【可选】文章顶部图片 | | cover | 【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空) | | comments | 【可选】显示文章评论模块(默认 true) | | toc | 【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置) | | toc_number | 【可选】显示 toc_number(默认为设置中 toc 的 number 配置) | | toc_style_simple | 【可选】显示 toc 简洁模式 | | copyright | 【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置) | | copyright_author | 【可选】文章版权模块的 文章作者 | | copyright_author_href | 【可选】文章版权模块的 文章作者 链接 | | copyright_url | 【可选】文章版权模块的 文章链接 链接 | | copyright_info | 【可选】文章版权模块的版权声明文字 | | mathjax | 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false) | | katex | 【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false) | | aplayer | 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的 音乐 配置 | | highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置) | | aside | 【可选】显示侧边栏 (默认 true) | | swiper_index | 【可选】首页轮播图配置 index 索引，数字越小越靠前 | | top_group_index | 【可选】首页右侧卡片组配置, 数字越小越靠前 | | background | 【可选】文章背景可配置为 16 进制颜色值 |

首页轮播图配置: swiper_index , 数字越小越靠前
首页卡片配置: top_group_index , 数字越小越靠前
page 中 background , 可配置为 16 进制颜色值

Hexo创建新的页面 {#Hexo创建新的页面}

|-----------|---------------------------| | 1 | hexo new page XXX |

在项目 blog 目录下执行完上面代码之后就会在 source 目录下生成新的XXX文件夹，里面会有index.md文件，可以自行进行创作

Hexo创作文章 {#Hexo创作文章}

在项目 blog 目录下 source -> _posts 文件中进行新建一个.md的文件即可在里面输入自己的创作内容

Markdown的基本用法 {#Markdown的基本用法}

创建多级标题 {#创建多级标题}

样式预览示例源码

Demo 1 - 标题示例一
test1 1

一级标题 {#一级标题}

二级标题 {#二级标题}

三级标题 {#三级标题}

Demo 2 - 标题示例二
test2 1

我展示的是一级标题 {#我展示的是一级标题}

我展示的是二级标题 {#我展示的是二级标题}

Demo 1 - 标题示例一
test1 1

|---------------|---------------------------------| | 1 2 3 | # 一级标题 ## 二级标题 ### 三级标题 |

Demo 2 - 标题示例二
test2 1

|-------------------|-----------------------------------------------------------------| | 1 2 3 4 5 | 我展示的是一级标题 ================= 我展示的是二级标题 ----------------- |

Markdown段落格式 {#Markdown段落格式}

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。
样式预览示例源码

Demo 1 - 段落示例一
test1 1

段落1
段落2
Demo 2 - 段落示例二
test2 1

段落1

段落2
Demo 1 - 段落示例一
test1 1

|-------------|-----------------| | 1 2 | 段落1 段落2 |

Demo 2 - 段落示例二
test2 1

|---------------|-----------------| | 1 2 3 | 段落1 段落2 |

Markdown字体 {#Markdown字体}

样式预览示例源码

斜体文本
斜体文本
加粗文本
加粗文本
粗斜体文本
粗斜体文本

|-------------------------|---------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | *斜体文本* _斜体文本_ **加粗文本** __加粗文本__ ** *粗斜体文本* ** __ _粗斜体文本_ __ |

Markdown列表 {#Markdown列表}

样式预览示例源码

第一项
第二项
第三项

第一项
第二项
第三项

第一项
第二项
第三项

|------------------------------------------|---------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | * 第一项 * 第二项 * 第三项 + 第一项 + 第二项 + 第三项 - 第一项 - 第二项 - 第三项 |

Markdown区块 {#Markdown区块}

样式预览示例源码

区块引用
菜鸟教程
学的不仅是技术更是梦想

最外层

第一层嵌套

第二层嵌套

区块中使用列表

第一项

第二项

第一项

第二项

第三项

列表中使用区块
如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

列表中使用区块实例如下：

第一项菜鸟教程

学的不仅是技术更是梦想
第二项

|---------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | > 区块引用 > 菜鸟教程 > 学的不仅是技术更是梦想 > 最外层 > > 第一层嵌套 > > > 第二层嵌套 > 区块中使用列表 > 1. 第一项 > 2. 第二项 > + 第一项 > + 第二项 > + 第三项列表中使用区块如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。列表中使用区块实例如下： * 第一项 > 菜鸟教程 > 学的不仅是技术更是梦想 * 第二项 |

Markdown代码 {#Markdown代码}

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`）
样式预览示例源码

printf() 函数

|---------------|-----------------------| | 1 2 3 | `printf()` 函数 |

代码区块 {#代码区块}

代码区块使用 4 个空格或者一个制表符（Tab 键）。
也可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定)。
样式预览示例源码

                        <?php
 echo 'RUNOOB';
 function test(){
  echo 'test'
 }

                      </code>
                    </pre>
    <figure class="highlight javascript">
     <table>
      <tbody>
       <tr>
        <td class="gutter"><pre>
                                <span class="line">
                                  1
                                </span>
                                <br>
                                <span class="line">
                                  2
                                </span>
                                <br>
                                <span class="line">
                                  3
                                </span>
                                <br>
                              </pre></td>
        <td class="code"><pre>
                                <span class="line">
                                  $(
                                  <span class="variable language_">
                                    document
                                  </span>
                                  ).
                                  <span class="title function_">
                                    ready
                                  </span>
                                  (
                                  <span class="keyword">
                                    function
                                  </span>
                                   (
                                  <span class="params">
                                  </span>
                                  ) {
                                </span>
                                <br>
                                <span class="line">
                                  <span class="title function_">
                                    alert
                                  </span>
                                  (
                                  <span class="string">
                                    'RUNOOB'
                                  </span>
                                  );
                                </span>
                                <br>
                                <span class="line">
                                  });
                                </span>
                                <br>
                              </pre></td>
       </tr>
      </tbody>
     </table>
    </figure>

|-----------------------|-------------------------------------------------------------| | 1 2 3 4 5 6 7 | <?php echo 'RUNOOB'; function test(){ echo 'test' } |

|---------------|-----------------------------------------------------------------------| | 1 2 3 | $( document ). ready ( function ( ) { alert ( 'RUNOOB' ); }); |

Markdown链接 {#Markdown链接}

样式预览示例源码

|-------------------|---------------------------------------------------------------------------| | 1 2 3 4 5 | 1. [ 神经蛙的博客 ]( https://hexo.sjava.cn ) 2. <https://hexo.sjava.cn> |

高级链接 {#高级链接}

样式预览示例源码

通过变量来设置一个链接，变量赋值在文档末尾进行: 神经蛙的博客

|-------------------|------------------------------------------------------------------------------| | 1 2 3 4 5 | 通过变量来设置一个链接，变量赋值在文档末尾进行:[ 神经蛙的博客 ][ 1 ] [ 1 ]: https://hexo.sjava.cn |

Markdown图片 {#Markdown图片}

样式预览示例源码

点击图片即可看到实际效果

|---------------------|----------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | 点击图片即可看到实际效果 1. ![ 图片描述 ]( /img/img_1.png ) 2. ![ 图片描述被改为标题 ]( /img/img_1.png "标题" ) |

Markdown表格 {#Markdown表格}

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
样式预览示例源码

| 表头 | 表头 | |-----|-----| | 单元格 | 单元格 | | 单元格 | 单元格 |

| 左对齐 | 右对齐 | 居中对齐 | |-----|-----|------| | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 |

|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 | | 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 | | 左对齐 | 右对齐 | 居中对齐 | | :-----| ----: | :----: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 | |

Markdown高级技巧 {#Markdown高级技巧}

支持的HTML元素 {#支持的HTML元素}

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有： <kbd> <b> <i> <em> <sup> <sub> <br>等

样式预览示例源码

使用 Ctrl + Alt + Del 重启电脑

|-------------|-------------------------------------------------------------------------------------| | 1 2 | 使用 < kbd > Ctrl </ kbd > + < kbd > Alt </ kbd > + < kbd > Del </ kbd > 重启电脑 |

转义 {#转义}

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：
样式预览示例源码

文本加粗
** 正常显示星号 **

|-----------------|-------------------------------------| | 1 2 3 4 | **文本加粗** \ *\* 正常显示星号 \ *\* |

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

|------------------------------------------|-------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | \ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 + 加号 - 减号 . 英文句点 ! 感叹号 |

自定义表格 {#自定义表格}

样式预览示例源码

|------|---------|-------| | 数据类型 || 长度(位) | | 整数类型 | byte | 8 | | 整数类型 | short | 16 | | 整数类型 | int | 32 | | 整数类型 | long | 64 | | 浮点类型 | float | 32 | | 浮点类型 | double | 64 | | 字符型 | char | 16 | | 布尔型 | boolean | ~ |

|------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | < table > <tr> <td colspan="2" style="text-align: center;vertical-align:middle;">数据类型</td> <td>长度(位)</td> </tr> <tr> <td rowspan="4" style="text-align: center;vertical-align:middle;">整数类型</td> <td>byte</td> <td>8</td> </tr> <tr> <td>short</td> <td>16</td> </tr> <tr> <td>int</td> <td>32</td> </tr> <tr> <td>long</td> <td>64</td> </tr> <tr> <td rowspan="2" style="text-align: center;vertical-align:middle;">浮点类型</td> <td>float</td> <td>32</td> </tr> <tr> <td>double</td> <td>64</td> </tr> <tr> <td style="text-align: center;vertical-align:middle;">字符型</td> <td>char</td> <td>16</td> </tr> <tr> <td style="text-align: center;vertical-align:middle;">布尔型</td> <td>boolean</td> <td>~</td> </tr> </table> |

公式 {#公式}

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。

默认下的分隔符：

$...$ 或者 (...) 中的数学表达式将会在行内显示。
或者 [...] 或者 ```math 中的数学表达式将会在块内显示。

样式预览示例源码

|---------------------------------------------|-------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $$ \begin{Bmatrix} a & b \\ c & d \end{Bmatrix} $$ $$ \begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} $$ |