hexo fluid写文章

本文最后更新于 2025年7月18日 晚上

hexo fluid写文章常用的功能

为了防止我忘记如何使用hexo fluid写文章，这里记录一下。

新建文章

在hexo根目录下打开命令行（右键打开“Open Git bash here”也行），输入命令：

1
hexo new "文章标题"

编辑文章

使用VScode打开刚才新建的文章的markdown文件，开始编辑内容

摘要

fluid主题默认开启了自动摘要（截取文章前几段），当然也可以在文章头部添加标签来手动指定摘要的位置（优先级：手动摘要>自动摘要）。

1
2
3
4
5
6
---
title: 标题
excerpt: 这是摘要
---
这也是摘要
<!-- more -->

图片

注意：图片路径如果使用相对路径，需要在hexo配置中打开相对路径开关（post_asset_folder设置为true）。

在hexo fluid主题中插入图片，可以使用相对路径、绝对路径、网络路径等方式，插入图片的语法如下：

1
![](/图片路径)

代码块

在hexo fluid主题中可以使用三个反引号``````将代码包裹起来，并指定代码类型。

1
```这里指定代码类型为markdown

标题

在md文件中输入“#”号，即可创建标题，标题的层级由“#”号决定，一共六级标题。

在“#”后面要隔有空格

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

链接

在md文件中插入链接，语法如下：

1
[链接文字](链接地址)

效果如下：
本篇文章的连接

特殊标签

在hexo fluid中，可以添加一些特殊标签提醒读者

  • tip（小贴士）：用于提示小技巧，通常以灰色背景显示。
  • info（信息提示）：用于一般信息提示，通常以蓝色背景显示。
  • success（成功提示）：用于成功信息，通常以绿色背景显示。
  • warning（警告提示）：用于警告信息，通常以橙色背景显示。
  • danger（危险提示）：用于危险信息，通常以红色背景显示。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {% note tip %}
    这里是小贴士
    {% endnote %}

    {% note info %}
    这里是提示信息
    {% endnote %}

    {% note success %}
    这是成功提示
    {% endnote%}

    {% note warning %}
    这里是警告信息
    {% endnote %}

    {% note danger %}
    这里是危险信息
    {% endnote %}
    效果如下：

    这里是小贴士

    这里是提示信息

    这是成功信息

    这里是警告信息

    这是危险信息

文字突出

斜体

使用两个个“*”包裹住需要斜体的文字

1
*斜体文字*

效果如下：斜体文字

粗体

将文字用四个“*”包裹，设置粗体，以便突出重点

1
这是一个**重点**

效果如下：这是重点

粗体加斜体

如果你想要粗体和斜体同时突出文字，可以使用三个“*”包裹

1
这是一个***重点***

效果如下：这是一个重点

表格

一般用来列举数据

1
2
3
4
|毛衣|大衣|
|----|----|
|一般不抗风|一般抗风|
|价格较为便宜|价格稍贵|

效果如下：

毛衣 大衣
一般不抗风 一般抗风
价格较为便宜 价格稍贵

对齐

表格一般有向左对齐、中间对齐、向右对齐，使用英文冒号决定“:”

1
2
3
|左对齐|中间对齐|右对齐|
|:---|:--:|---:|
|左对齐(凑数文字)|中间对齐|右对齐(凑数文字)|

效果如下：

左对齐 中间对齐 右对齐
凑数文字凑数文字 凑数文字凑数文字 凑数文字凑数文字
凑数文字 凑数文字 凑数文字

插入图表（ECharts）

ECharts内容配置项均见Echarts官网入门手册或后期文章，这里不再赘述。

图表是数据可视化的一种很好的方式，ECharts就是不错的开源图表库。
插入图表方式有三种方法：

使用插件

在hexo根目录下打开命令行（右键打开“Open Git bash here”也行），输入命令：

1
npm install hexo-tag-echarts-new

安装好后，在文章中插入图表代码：

1
2
3
{% echarts [width] [height] [echarts_version] %}
// ECharts 配置项
{% endecharts %}
  • echarts 是标签名，不需要更改。
  • width 和 height 分别表示图表容器的宽度和高度，如 100%、400 等。
  • echarts_version 是可选参数，指定 ECharts 的版本号，如 5.6.0。
  • 在标签之间的部分是 ECharts 的配置项，用于定义图表的类型、数据等。

使用外部CDN

在文章中导入图表js文件（一般只需要写一次导入代码）：

1
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>

然后插入一段定义图表的HTML和js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<div id="myChart" style="width: 100%; height: 400px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    myChart.setOption(option);
</script>

效果如下：

推荐一些比较稳定的EChartsCDN

国内 CDN：

使用本地文件

下载的js文件建议放在主题的source目录下的js文件夹中，清除本地缓存后重新生成文件还在public目录下，也便于后期管理。

将ECharts的js文件下载到本地，在文章中引用（一般也只需要写一次导入代码）：

1
<script src="/js/你下载的Echarts文件名.js"></script>

然后插入一段定义图表的HTML和js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="myChart" style="width: 100%; height: 400px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    myChart.setOption(option);
</script>

效果如下：

完成文章

完成文章后，输入命令清除上次生成的缓存：

1
hexo clean

然后输入命令生成静态文件：

1
hexo g

做完上面的你还可以看看是否满意，输入命令启动本地服务器：

1
hexo s

打开浏览器输入：

1
http://localhost:4000/

即可看到刚才写的文章，如果觉得没问题，就可以上传文章了。

上传文章

  • 首先确保你已经安装了GitHub Desktop。
  • 打开后登录GitHub账号，新建一个仓库，并将仓库克隆到本地。
  • 选择你刚刚克隆的仓库，将生成好的静态文件（public文件夹全部内容）放到已经你克隆好仓库的文件夹下。
  • 输入标题和描述推送更改到远程仓库。
  • 等待GitHub Desktop推送完成。
开发 > hexo
#教程 #hexo
hexo fluid写文章
https://zhxcodes.pages.dev/2025/04/19/hexo-fluid写文章/
作者
本意
发布于
2025年4月19日
更新于
2025年7月18日
许可协议