Fluid 主题美化汇总

最后更新时间:2022-06-13



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 标签,并在主题样式上做了些许优化。

折叠框(folding)

使用

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

![](https://fastly.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

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

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

{% endfolding %}

{% folding green::查看代码测试 %}

{% endfolding %}

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

- haha
- hehe

{% endfolding %}

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

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

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

hahaha <span><img src='https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

展示

查看图片测试

查看默认打开的折叠框

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

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

hahaha

时间线(timeline)

使用

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

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

正文内容

{% endtimenode %}

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

正文内容

{% endtimenode %}

{% endtimeline %}

展示

大标题

时间节点(小标题)

正文内容

时间节点(小标题)

正文内容

时间节点(小标题)

正文内容

更多标签请查看: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>

标签页添加标签云

详情请查看我的 标签页面,主要用到的是 hexo-tag-cloud 插件

安装

  • 进入到 hexo 的根目录,然后在 中添加依赖:package.json"hexo-tag-cloud": "2.1.*"
  • 然后执行 命令npm install hexo-tag-cloud --save

修改

需要找到 这个文件然后再添加如下代码:~/themes/fluid/layout/tags.ejs

查看代码
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
<%
page.layout = "tags"
page.title = theme.tag.title || __('tag.title')
page.subtitle = theme.tag.subtitle || __('tag.subtitle')
page.banner_img = theme.tag.banner_img
page.banner_img_height = theme.tag.banner_img_height
page.banner_mask_alpha = theme.tag.banner_mask_alpha

var min_font = theme.tag.tagcloud.min_font || 15
var max_font = theme.tag.tagcloud.max_font || 30
var unit = theme.tag.tagcloud.unit || 'px'
var start_color = theme.tag.tagcloud.start_color || '#BBBBEE'
var end_color = theme.tag.tagcloud.end_color || '#337ab7'
%>


<div class="text-center tagcloud">

+ <% if (site.tags.length) { %>
+ <script type="text/javascript" charset="utf-8" src="<%- url_for('/js/tagcloud.js') %>"></script>
+ <script type="text/javascript" charset="utf-8" src="<%- url_for('/js/tagcanvas.js') %>"></script>
+ <div class="widget-wrap">
+ <h3 class="widget-title">
+ <%= __('tagcloud') %>
+ </h3>
+ <div id="myCanvasContainer" class="widget tagcloud">
+ <canvas width="700" height="700" id="resCanvas" style="width:100%">
+ <%- tagcloud() %>
+ </canvas>
+ </div>
+ </div>
+ <% } %>

<%- tagcloud({
min_font: min_font,
max_font: max_font,
amount: 999,
unit: unit,
color: true,
start_color,
end_color
}) %>
</div>

最后一步

  • 完成安装和显示,可以通过 来进行本地预览,hexo clean 为必选项。hexo clean && hexo g && hexo s
  • PS:不要使用hexo g -d或者hexo d -g这类组合命令。详情见: 第七期

自定义

在你的博客根目录,找到 _config.yml 文件然后添加如下的配置项:

1
2
3
4
5
6
7
8
# hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica
textColor: '#000'
textHeight: 20
outlineColor: '#fff'
maxSpeed: 0.1
pauseOnSelected: true # true 意味着当选中对应 tag 时,停止转动

关于页添加提交日历

详情请查看我的 关于页面,主要用到的是 [2] hexo-githubcalendar 插件

安装

1
2
3
npm i hexo-githubcalendar --save
# 或者
cnpm i hexo-githubcalendar --save

配置项 (不是主题的):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete乐特
githubcalendar:
enable: true # true/false,是否开启插件
enable_page: /blog/about/ # 路由地址,如我的 /blog/是代表网站的root主页。/blog/about/代表的是关于页等等
user: helloworld # github 或者 gitee 用户名
layout:
type: id
name: recent-posts
index: 0
githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
pc_minheight: 280px
mobile_minheight: 0px
color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
api: https://python-github-calendar-api.vercel.app/api
# api: https://python-gitee-calendar-api.vercel.app/api
calendar_js: https://fastly.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
plus_style: ""

最后执行hexo clean && hexo g && hexo s,就可以看到效果了。

锦上添花的小插件

点击撒花

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

静态彩带

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

动态彩带

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

樱花飘落

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

其它飘落

1
2
<!-- 可以自定义任何你想飘落的图片,只需更换下方js文件中的 img.src = "https://fastly.jsdelivr.net/gh/kaibazhidao66/tcb/blog/cdn/js/sakura-drops/01.png"; 的图片链接,也可以使用我推荐的五张图片:01.png、02.png、03.png、04.png、05.png -->
<script src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2ee6e51e-66e0-4a10-b6de-d41baad105a3/3e39293a-415c-41d6-a959-2efe2f1835e1.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://fastly.jsdelivr.net/gh/kaibazhidao66/tcb/cdn/js/twopeople/twopeople.js"></script>
<script src="https://fastly.jsdelivr.net/gh/kaibazhidao66/tcb/cdn/js/twopeople/twopeople1.js"></script>
<script src="https://fastly.jsdelivr.net/gh/kaibazhidao66/tcb/cdn/js/twopeople/twopeople2.js" id="rendered-js"></script>
</div>

参考资料



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

版权声明

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


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