如何发布一篇Hexo博文

发表于 分类于 ， 评论数： 阅读次数：

这篇文章用于测试并整理Hexo中的各类内容的写法，便于日后使用。

Hexo段落格式

MarkDown中可以使用两种方式进行标题分类

使用横向创建分级标题

为排版方便，此处不运行

1
2
3
4
使用双横线创建一级标题
===============
使用单横线创建二级标题
---------------

使用井号创建分级标题

为排版方便，不运行此处代码

1
2
3
4
# 使用井号进行标题分类，井号后加空格
## 这里是二级标题的效果
### 三级
#### 四级

文字效果

1
2
3
4
5
6
7
8
9
10
11
12
*斜体*
**粗体**
***粗斜体***
~被删除的文本~
<u>带有下划线的文本</u>
<font color="#dd0000">使用font标签改变字体颜色</font>
<font size="1">使用font标签改变字体大小</font>
<font face="楷体">使用font标签改变字体样式</font>
使用反引号在文中标记代码 `markdown`
使用三个星号来添加分割线
***
这里添加一个带有超链接的文本[我的网站](https://senhai.wang)

斜体
粗体
粗斜体
被删除的文本
带有下划线的文本
使用font标签改变字体颜色
使用font标签改变字体大小
使用font标签改变字体样式
使用反引号在文中标记代码 markdown
使用三个星号来添加分割线

这里添加一个带有超链接的文本我的网站

添加不同对象

添加标签

1
<blockquote class="blockquote-center">Lost yourself, remember to pick it up</blockquote>
Lost yourself, remember to pick it up

使用note标签添加背景色

通过 note 标签可以为段落添加背景色，语法如下:

1
2
3
{% note [class] %}
文本内容 (支持行内标签)
{% endnote %}

支持的 class 种类包括 default primary success info warning danger，也可以不指定 class。
各种 class 种类的效果如下：

primary note tag

success note tag

info note tag

warning note tag

danger note tag

undefined class note tag

lable背景色

1
2
3
4
5
6
7
8
9
10
11
<blockquote class="blockquote-center">
I heard the echo, {% label default@from the valleys and the heart %}<br/>
Open to the lonely soul of {% label info@sickle harvesting %}<br/>
Repeat outrightly, but also repeat the well-being of<br/>
Eventually {% label warning@swaying in the desert oasis %}<br/>
{% label success@I believe %} I am<br/>
{% label primary@Born as the bright summer flowers %}<br/>
Do not withered undefeated fiery demon rule<br/>
Heart rate and breathing to bear {% label danger@the load of the cumbersome %}<br/>
Bored
</blockquote>
I heard the echo, from the valleys and the heart
Open to the lonely soul of sickle harvesting
Repeat outrightly, but also repeat the well-being of
Eventually swaying in the desert oasis
I believe I am
Born as the bright summer flowers
Do not withered undefeated fiery demon rule
Heart rate and breathing to bear the load of the cumbersome
Bored

button 按钮

通过 button 标签可以快速添加带有主题样式的按钮，语法如下：

1
{% button /path/to/url/, text, icon [class], title %}

也可以简写为：

1
{% btn /path/to/url/, text, icon [class], title %}

其中，图表ID来源于FontAwesome
使用示例如下：

1
2
3
4
{% btn #, 文本 %}
{% btn #, 文本 & 标题,, 标题 %}
{% btn #, 文本 & 图标, home %}
{% btn #, 文本 & 大图标 (固定宽度), home fa-fw fa-lg %}
文本

文本 & 标题

文本 & 图标

文本 & 大图标 (固定宽度)

tab标签

tab 标签用于快速创建 tab 选项卡，语法如下：

1
2
3
4
5
{% tabs [Unique name], [index] %}
  <!-- tab [Tab caption]@[icon] -->
  标签页内容（支持行内标签）
  <!-- endtab -->
{% endtabs %}

其中，各参数意义如下：

  • Unique name: 全局唯一的 Tab 名称，将作为各个标签页的 id 属性前缀
  • index: 当前激活的标签页索引，如果未定义则默认选中显示第一个标签页，如果设为 - 1 则默认隐藏所有标签页
  • Tab caption: 当前标签页的标题，如果不指定则会以 Unique name 加上索引作为标题
  • icon: 在标签页标题中添加 Font awesome 图标

使用示例如下：

1
2
3
4
5
6
7
8
9
10
11
{% tabs Tab标签列表 %}
  <!-- tab 标签页1 -->
    标签页1文本内容
  <!-- endtab -->
  <!-- tab 标签页2 -->
    标签页2文本内容
  <!-- endtab -->
  <!-- tab 标签页3 -->
    标签页3文本内容
  <!-- endtab -->
{% endtabs %}

标签页1文本内容

标签页2文本内容

标签页3文本内容

引用站内链接

可以通过如下语法引入站内文章的地址或链接：

1
2
{% post_path slug %}
{% post_link slug [title] %}

其中，slug 表示 _post 目录下的 Markdown 文件名。

post_path 标签将会渲染为文章的地址，即 permalink；而 post_link 标签将会渲染为链接，可以通过 title 指定链接标题。

如以下标签将会生成 /2019/06/25/hello-world/

1
{% post_path hello-world %}

而以下标签则会生成 链接标题

1
{% post_link hello-world 链接标题 %}

这种站内引用方式比直接使用 url 引用的形式更为可靠，因为即使修改了 permalink 格式，或者修改了文章的路由地址，只要 Markdown 文件名没有发生改变，引用链接都不会失效。

加入代码块

行内代码块

使用反引号在行内添加代码`CTRL+ALT`，可以指示一些快捷键的用法。效果：CTRL+ALT

添加bash命令行

1
2
3
4
$hexo new post "title"
$hexo s
$hexo g
$hexo d

添加Python代码

1
2
for i in range(10):#在编译器中会使用python的语法自动缩进
    print("hello")

代码块的高级用法

可以通过为代码块附加参数的形式为其添加更丰富的信息提示，效果如下：

代码标题可以添加一个链接
1
ptint('Hello World!')

语法规则：

undefined

其中，各参数意义如下：

  • langugae：语言名称，引导渲染引擎正确解析并高亮显示关键字
  • title：代码块标题，将会显示在左上角
  • url：链接地址，如果没有指定 link text 则会在右上角显示 link
  • link text：链接名称，指定 url 后有效，将会显示在右上角

url 必须为有效链接地址才会以链接的形式显示在右上角，否则将作为标题显示在左上角。以 url 为分界，左侧除了第一个单词会被解析为 language，其他所有单词都会被解析为 title，而右侧的所有单词都会被解析为 link text。

如果不想填写 title，可以在 language 和 url 之间添加至少三个空格。

代码块支持多种语言高亮预设，详细的语言列表可查看 Ivan.nginx | Hexo 代码块中的颜色方案。

可以在站点配置文件中设置 highlight.auto_detect: true 来开启自动语言检测高亮。

改动示例
1
2
3
4
5
6
 highlight:
   enable: true
   line_number: false
-  auto_detect: false
+  auto_detect: true
   tab_replace:

如果设置语言为 diff，可以在代码前添加 + 和 - 来使用如上所示的高亮增删行提示效果，在展示代码改动痕迹时比较实用。

更多代码块高亮的个性化设置请参见 猪猪侠 | Hexo 下的语法高亮拓展修改。

给代码块添加复制功能请参见 猪猪侠 | Hexo 下的HEXO优化之（二）。

加入图片

添加本地图片

1
2
![](Mario.png "Mario 文章资源")
![](/images/Mario.png "站点资源")


使用markdown语言添加

1
![熊猫-测试](https://pic.52112.com/180205/18020526/a9yPQozt0g.jpg "panda")

熊猫-测试

使用img标签直接添加，调整图片大小

1
2
3
<div>
<img src='https://pic.52112.com/180205/18020526/a9yPQozt0g.jpg' width="50%" alt="熊猫"title="Panda"/>
</div>
熊猫

外加div标签，调整图片位置

1
2
3
<div align=center>
    <img src='https://pic.52112.com/180205/18020526/a9yPQozt0g.jpg' width="50%" alt="熊猫"title="Panda"/>
</div>
熊猫

使用center标签调整图片和frame标签位置

1
2
3
<center>
    <img src='https://pic.52112.com/180205/18020526/a9yPQozt0g.jpg' width="50%" alt="熊猫"title="Panda"/>
</center>
熊猫

使用a标签，给图片添加超链接

1
2
3
4
5
<div align=center>
    <a href="https://senhai.wang">
    <img src='https://pic.52112.com/180205/18020526/a9yPQozt0g.jpg' width="50%" alt="熊猫"title="Panda" />
    </a>
</div>

添加表格

使用markdown添加表格

这种方法的缺点是没法合并单元格，但是在文件中看起来很直观。

1
2
3
4
|ID|name|age|
|-|-|-|
|1|wsh|18|
|2|hmy|16|
ID name age
1 wsh 18
2 hmy 16

使用html标签加入表格

这个真的看着令人头疼，但是我发现一个超好用的开源工具介绍给大家。
表格生成器 v1.2
可以在线编辑并且直接输出代码，效果如下：

测试1 测试2
图片测试 熊猫
合并单元格测试
这个就空着吧

添加列表

1
2
3
4
5
6
7
8
9
10
11
12
1. 第一项
    - 第一个元素
        > 此处为引用示例
        > 可以添加引文
        >> 并且可以添加
        >> 多级引文
    - 第二个元素
2. 第二项
    1. 第一个子列表
        - 第一个元素
        - 第二个元素
    2. 第二个子列表
  1. 第一项
    • 第一个元素

      此处为引用示例
      可以添加引文

      并且可以添加
      多级引文

    • 第二个元素
  2. 第二项
    1. 第一个子列表
      • 第一个元素
      • 第二个元素
    2. 第二个子列表

添加pyechart图表

使用添加嵌入html页面的方法添加

添加视频

可以正常使用，并且拥有控件

1
2
3
<video src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls="controls">
your browser does not support the video tag
</video>

添加音乐

因为自动播放的音乐太吵了所以请看另一篇文章吧
如何在Hexo中插入多媒体文件

嵌入另一个html页面

这个就厉害了

1
2
3
<iframe name="music" src="https://senhai.wang/pyechart_list/1_earth_moive.html" width=100% height=500
     scrolling="no">
</iframe>

注意！https页面的加载过程可能会拒绝http来源的资源，导致加载失败
例如：我会在下面重新加载一个http协议下的frame标签。
如果你访问的是我的http协议网址，就可以看到这个图表
如果你访问的是https网址，就看不到如下图表

其他

可定制化标志



1
https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg

--------------------- ----------------------