fluid配置

本文最后更新于：6 小时前

全局

字体：

如果想设置单独的页面，可以直接在 markdown 里通过 style 标签实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: example
---

<style>
  /* 设置整个页面的字体 */
  html, body, .markdown-body {
    font-family: KaiTi,"Microsoft YaHei",Georgia, sans, serif;
    font-size: 15px;
  }

  /* 只设置 markdown 字体 */
  .markdown-body {
    font-family: KaiTi,"Microsoft YaHei",Georgia, sans, serif;
    font-size: 15px;
  }
</style>

强制全局 HTTPS

当你的域名升级到 HTTPS 后，可能之前存在部分图片等资源使用的是 HTTP，这时混用出现网页报错，造成图片无法显示。

控制台里也会出现报错：Mixed Content: The page at 'https://xxx' was loaded over HTTPS。

这种情况可以在主题配置中开启此配置：

1
force_https: true

即可将所有请求强制升级为 HTTPS（如是外部资源，需要本身支持 HTTPS）。

首页

文章摘要：

手动指定摘要，使用 <!-- more --> MD文档里划分，如：

1
2
3
正文的一部分作为摘要
<!-- more -->
余下的正文

或者在 Front-matter里设置 excerpt 字段，如：

1
2
3
4
---
title: 文章标题
excerpt: 文章摘要
---

Tip:

优先级: 手动摘要 > 自动摘要 如果关闭自动摘要，并且没有设置手动摘要，摘要区域空白 无论哪种摘要都最多显示 3 行，当屏幕宽度不足时会隐藏部分摘要。

隐藏文章：

1
2
3
4
5
---
title: 文章标题
hide: true
---
以下是文章内容

Tip:

隐藏会使文章在分类和标签类里都不显示 隐藏后依然可以通过文章链接访问

文章排序：

1
2
3
4
5
---
title: 文章标题
sticky: 100
---
以下是文章内容

sticky 数值越大，该文章越靠前，达到类似于置顶的效果，其他未设置的文章依然按默认排序。

当文章设置了 sticky 后，主题会默认在首页文章标题前增加一个图标，来标识这是一个置顶文章

文章页

文章在首页的封面图

对于单篇文章，在文章开头 Front-matter中配置 index_img 属性。

1
2
3
4
5
6
---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
---
以下是文章内容

和 Banner 配置相同，/img/example.jpg 对应的是存放在 /source/img/example.jpg 目录下的图片（目录也可自定义，但必须在 source 目录下）。

也可以使用外链 Url 的绝对路径。

如果想统一给文章设置一个默认图片（文章不设置 index_img 则默认使用这张图片），可在主题配置中设置：

1
2
post:
  default_index_img: /img/example.jpg

当 default_index_img 和 index_img 都为空时，该文章在首页将不显示图片。

文章页顶部大图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 Front-matter中指定 banner_img 属性。

本地图片存放位置同上。

1
2
3
4
5
6
---
title: 文章标题
index_img: /img/example.jpg
banner_img: /img/post_banner.jpg
---
以下是文章内容

文章内容图片

本地图片存放位置同上。

1
2
3
![](/img/example.jpg)

// 本地与上传链接切换`../../themes/fluid/source/img`与`/img`替换

两种链接方式

脚注：

脚注语法如下：

1
2
这是一句话[^1]
[^1]: 这是对应的脚注

更优雅的使用方式，是将脚注写在文末，比如：

1
2
3
4
5
6
7
正文

## 参考

[^1]: 参考资料1
[^2]: 参考资料2

当然你也可以通过修改上方配置项 header 来自动加入节标题，如下所示：

1
2
3
4
post:
  footnote:
    enable: true
    header: '<h2>参考</h2>'  # 等同于手动写 `## 参考`

Tag 插件

便签

在 markdown 中加入如下的代码来使用便签：

1
2
3
{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

或者使用 HTML 形式：

1
<p class="note note-primary">标签</p>

可选便签：

primary——紫 secondary——灰 success——绿 danger——红

warning——黄 info——蓝 light——黑

Tip:

使用时 {% note primary %}` 和 `{% endnote %} 需单独一行，否则会出现问题

行内标签

在 markdown 中加入如下的代码来使用 Label：

1
{% label primary @text %}

或者使用 HTML 形式：

1
<span class="label label-primary">Label</span>

可选 Label：

primary——浅紫 default——浅灰 info——浅蓝 success——浅绿 warning——浅黄 danger——浅红

Tip:

若使用 {% label primary @text %}，text 不能以 @ 开头

勾选框

在 markdown 中加入如下的代码来使用 Checkbox：

1
{% cb text, checked?, incline? %}

text：显示的文字
checked：默认是否已勾选，默认 false
incline: 是否内联（可以理解为后面的文字是否换行），默认 false

示例：

普通示例
默认选中
内联示例 后面文字不换行 也可以只传入一个参数，文字写在后边（这样不支持外联）

按钮

你可以在 markdown 中加入如下的代码来使用 Button：

1
{% btn url, text, title %}

或者使用 HTML 形式：

1
<a class="btn" href="url" title="title">text</a>

url：跳转链接
text：显示的文字
title：鼠标悬停时显示的文字（可选）

text

组图

如果想把多张图片按一定布局组合显示，你可以在 markdown 中按如下格式：

1
2
3
4
5
6
7
{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}

total：图片总数量，对应中间包含的图片 url 数量
n1-n2-…：每行的图片数量，可以省略，默认单行最多 3 张图，求和必须相等于 total，否则按默认样式

如下图为 {% gi 5 3-2 %} 示例，代表共 5 张图，第一行 3 张图，第二行 2 张图。（两张示例图对应本地和网页图片两种格式）

example

example

问题

页内段落跳转失败，只能实现不同文章跳转

分类和标签页

标签是以词云的形式展示，标签的大小和颜色会根据标签下的文章数量变化。

1
2
3
categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

1
2
3
4
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

两个好看的主题：

Ocean

butterfly

参考文档点击底部Hexo或Fluid

备忘录
主题

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！