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填写显示名称。

<details>
<summary>显示内容</summary>
这里可以写文字 或者 Markdown
```html
<details>
<summary>并且</summary>
还支持嵌入代码
</details>
```
</details>

显示内容

这里可以写文字或者 Markdown

<details>
<summary>并且</summary>
还支持嵌入代码
</details>

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

歪瓜标签

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

折叠框（folding）

使用

点击查看

{% 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）

使用

{% 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

# 主题字体配置
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

// 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

<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

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和不含type的page的md文件中，含有type的page请自行修改相应的模板文件。

文章发布统计图

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

查看代码

<%
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 文件然后添加如下的配置项：

# 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

配置项 (不是主题的)：

# 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>

旋转小人

<!-- 动画效果请在本站的文章底部查看，就是有两个小人在那转圈圈的内个 -->
<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>