Fluid 主题美化汇总

最后更新时间:2022-09-28



Tag 组件

Fluid 内置了许多 Tag 组件,包含便签、行内标签、勾选框、按钮和组图等,我们可以使用这些组件来丰富自己的文章内容。

便签

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

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

或者使用 HTML 形式:

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

可选便签:

primary

secondary

success

danger

warning

info

light

行内标签

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

1
{% label primary @text %}

或者使用 HTML 形式:

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

可选 Label:

primary default info success warning danger

按钮

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

1
{% btn url, text, title %}

或者使用 HTML 形式:

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

折叠

details标签用于展示代码较多需要折叠或折叠相关内容,以下为演示。summary填写显示名称。

1
2
3
4
5
6
7
8
9
10
<details>
<summary>显示内容</summary>
这里可以写文字 或者 Markdown
```html
<details>
<summary>并且</summary>
还支持嵌入代码
</details>
```
</details>
显示内容这里可以写文字 或者 Markdown
1
2
3
4
<details>
<summary>并且</summary>
还支持嵌入代码
</details>

更多配置请参考:[1] Hexo Fluid 用户手册

歪瓜标签

这里主要移植了两个我喜欢的 Volantis 标签,并在主题样式上做了些许优化。

注释

使用

1
{% nota 把鼠标移动到我上面试试,可以看到注解内容出现在顶栏 %}

展示

把鼠标移动到我上面试试

折叠框

使用

点击查看
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
{% folding red::查看图片测试 %}

![](https://blog.xukaiyyds.cn/img/favicon.png)

{% endfolding %}

{% folding cyan open::查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding yellow::查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding green::查看嵌套测试 %}

{% folding blue::查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://blog.xukaiyyds.cn/img/favicon.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

展示

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

时间线

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 大标题 %}

{% timenode 时间节点(小标题) %}

正文内容

{% endtimenode %}

{% timenode 时间节点(小标题) %}

正文内容

{% endtimenode %}

{% endtimeline %}

展示

大标题

时间节点(小标题)

正文内容

时间节点(小标题)

正文内容

时间节点(小标题)

正文内容

更多标签请查看:[2] Volantis 标签插件

手机禁止缩放

如果想在手机端预览时无法缩放,可以在 处进行修改~/themes/fluid/layout/_partial/head.ejs

删除或注释此段代码

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">

替换为以下代码即可

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

更改全局字体

这里我以思源宋体为例,只需在主题配置文件中引入相关字体库即可~/themes/fluid/_config.yml

1
2
3
4
5
6
7
# 主题字体配置
font:
font_size: 17px
font-family: Noto Serif SC
custom_css: https://fonts.proxy.ustclug.org/css2?family=Noto+Serif+SC&display=swap
letter_spacing: 0.03em
code_font_size: 85%

保险起见我在 中也添加了 Noto Serif SC 字体~/themes/fluid/source/css/variables/base.styl

1
2
3
4
5
// Font
$font-size = theme-config("font.font_size", "17px")
$letter-spacing = theme-config("font.letter_spacing", "0.03em")
$font-family = theme-config("font.font_family", '"Noto Serif SC",var(--font-family-sans-serif)')
$code-font-size = theme-config("font.code_font_size", "85%")

目前发现该字体在没有转义的情况下英文""会被自动渲染成中文“”,介意的话还请谨慎使用。

简繁字体切换

不少网站为了更好地照顾不同用户使用简体 / 繁体的阅读习惯,会提供简体繁体两种版本字体切换,提高用户体验。具体效果请点击上方按钮查看

基本原理:首先建立一个简体字与繁体字相对应的映射表,然后遍历整个界面,把相应的简体字或者是繁体字映射为对应的字体。

下载 js 文件

点击 这里 右键另存下载或者拷贝里面的 tw_cn.js 文件,上传或新建到 文件夹中~/source/js/

修改模板

我们可以在想要显示简繁转换按钮的任何地方添加以下代码。例如,在 fluid 主题的布局文件 里添加如下代码~/themes/fluid/layout/_partials/footer.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="translate-style">
繁/简:<a id="translateLink" href="javascript:translatePage();">繁体
</a>
</div>
<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体,1-繁体,2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://blog.xukaiyyds.cn/"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁体"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上,但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

设置完成后读者就可以在博客底部点击简体 / 繁体来随意的切换字体了。

Mac 样式代码框

首先创建一个 css 文件,然后粘贴下面的代码。~/source/css/extension.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
figure.highlight {
background: #21252b;
border-radius: 5px;
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, .4);
padding-top: 30px
}

figure.highlight::before {
background: #fc625d;
border-radius: 50%;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
content: ' ';
height: 12px;
left: 12px;
margin-top: -20px;
position: absolute;
width: 12px;
}

添加文章统计图表

详情请查看我的 统计页面,主要用到的是 hexo-charts 插件

安装

1
npm install hexo-charts -S

使用

注意!下面的标签可以放到post和不含typepagemd文件中,含有typepage请自行修改相应的模板文件。

文章发布统计图

1
<div id="posts-chart"></div>

文章标签统计图

1
2
<!-- "data-length"为显示标签个数(从多到少),默认为10 -->
<div id="tags-chart" data-length="10"></div>

文章分类统计图

1
<div id="categories-chart"></div>

锦上添花的小插件

点击撒花

1
<script src="https://fastly.jsdelivr.net/gh/kaibazhidao66/cdn/click.js"></script>

樱花飘落

1
<script src="https://fastly.jsdelivr.net/gh/kaibazhidao66/cdn/cherry.js"></script>

动态彩带

1
<script src="https://fastly.jsdelivr.net/gh/kaibazhidao66/cdn/streamer.js"></script>

静态彩带

1
<script src="https://fastly.jsdelivr.net/gh/kaibazhidao66/cdn/streamers.js"></script>

旋转小人

1
2
3
4
5
6
7
8
9
<!-- 动画效果请在本站的文章底部查看,就是有两个小人在那转圈圈的内个 -->
<div class="twopeople">
<div class="container" style="height:150px;">
<canvas class="illo" width="800" height="800" style="max-width: 150px; max-height: 150px; touch-action: none; width: 650px; height: 650px;"></canvas>
</div>
<script src="https://s-bj-3444-blog.oss.dogecdn.com/cdn/twopeople/one.js"></script>
<script src="https://s-bj-3444-blog.oss.dogecdn.com/cdn/twopeople/two.js"></script>
<script src="https://s-bj-3444-blog.oss.dogecdn.com/cdn/twopeople/three.js" id="rendered-js"></script>
</div>

参考资料



---------- 本文结束 感谢阅读 ----------

版权声明

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


Fluid 主题美化汇总
https://blog.xukaiyyds.cn/posts/430a879f/
作者
xukai
发布于
2022年4月20日
更新于
2022年9月28日
许可协议