我的 Fluid 主题折腾记录

请注意时效性！文章创建于：2022-09-13

本篇是关于该 Hexo 主题，即 Fluid 主题的魔改和折腾教程，其范围不限。

打字机

从一言获取句子

可以在Fluid的config里面找到设置slogan，代码如下

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
slogan:
    enable: true

    # 为空则按 hexo config.subtitle 显示
    # If empty, text based on `subtitle` in hexo config
    text: ""

    # 通过 API 接口作为首页副标题的内容，必须返回的是 JSON 格式，如果请求失败则按 text 字段显示，该功能必须先开启 typing 打字机功能
    # Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
    api:
      enable: true

      # 请求地址
      # Request url
      url: ""

      # 请求方法
      # Request method
      # Available: GET | POST | PUT
      method: "GET"

      # 请求头
      # Request headers
      headers: {}

      # 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
      # The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
      keys: []

这时候在url添加一段网址：https://v1.hitokoto.cn/?c=c&c=d&c=i (可以去一言首页更改相关请求设置)，

在keys中添加：”hitokoto”

如下

1
2
3
url: "https://v1.hitokoto.cn/?c=c&c=d&c=i"

keys: ["hitokoto"]

就可以打出不一样文本了。

彩色打字机

我在网上翻的时候找到了魔改打字机的CSS，

然后打字机个人喜欢彩色的而非单一颜色的，所以可以在 thmes/fluid/source/css 中添加一个CSS文件，名字随便取。

内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#subtitle {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#subtitle:before {
    background-color: rgba(0, 0, 0, 0);
}

最后效果如下图

页脚

为了以后方便更新主题，这里使用 Fluid Injector 注入到页脚，主题更新可以直接解压到themes文件夹，页脚不受影响，哪怕错误，也可以立刻删除，主题也不会受到影响

在博客根目录下创建一个scripts文件夹，然后在里面创建footer.js文件，里面写上

1
2
3
4
hexo.extend.filter.register('theme_inject', function(injects) {
    injects.footer.file('default', 'js/_partials/footer.ejs');
  }
);

将/themes/fluid/layout/_partials/footer.ejs文件复制，来到博客根目录，在/source创建内/source/_inject/layout/_partials/文件夹，然后把把复制的文件粘贴进去。

并在里面新建一个footer文件夹。

存活时间

效果如图

存活时间的JS可以在网上找到，不过都没有注释，我看不懂，我自己写了一个，如下

将以下代码复制，来到/source/js，在里边新建一个runtime.js文件夹，复制进去。

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
var StartTime = new Date('2022/6/5 00:00:00'); // 获取开始时间

function runtime() {
    window.setTimeout("runtime()", 1000);
    var NowTime = new Date(); // 获取现在的时间

    Time = (NowTime.getTime() - StartTime.getTime()) / 1000; // 计算已存活时间(s)

    MaximumUnit = 365 * 24 * 60 * 60; // 最大单位

    Year = Time / MaximumUnit;
    YearINT = Math.floor(Year);

    Month = (Year - YearINT) * 12;
    MonthINT = Math.floor(Month);

    Day = (Month - MonthINT) * (365/12); //平均天数，防止出现过大的偏差
    DayINT = Math.floor(Day);

    Hour = (Day - DayINT) * 24;
    HourINT = Math.floor(Hour);

    Minute = (Hour - HourINT) * 60;
    MinuteINT = Math.floor(Minute);

    Second = Math.floor((Minute - MinuteINT) * 60);


    runtime_span.innerHTML = "本站勉强运行了" + YearINT + "年 " + MonthINT + "月 " + DayINT + "天 " + HourINT + "时 " + MinuteINT + "分 " + Second + "秒";
    // 将数据替换到Span上
};
setInterval("runtime()", 1000); // 重复运行，时刻更新数据
runtime();

然后来到/source/_inject/layout/_partials/footer.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
<div class="footer-inner">
  <% if (theme.footer.content) { %>
    <div class="footer-content">
      <%- theme.footer.content %>
    </div>
  <% } %>

    <!-- UV -->
  <% if (theme.footer.statistics.enable) { %>
    <%- partial('_partials/footer/statistics.ejs') %>
  <% } %>

+   <div class="runtime">
+     <span id="runtime_span">加载中...</span>
+   </div>

    <!-- 备案信息 ICP for China -->
  <% if(theme.footer.beian.enable) { %>
    <%- partial('_partials/footer/beian.ejs') %>
  <% } %>

    <!-- cnzz Analytics Icon -->
  <% if(theme.web_analytics.cnzz) { %>
    <span id="cnzz_stat_icon_<%= theme.web_analytics.cnzz %>" style="display: none"></span>
  <% } %>
</div>

最后在_config.fluid.yml内中的custom_js中添加刚刚写提到的runtime.js

1
2
3
custom_js:
  - /js/runtime.js

Badge(徽章)

效果如下

来到/source/_inject/layout/_partials/footer文件夹，新建badge.ejs

复制粘贴以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="badge">
    <% for(const each of theme.footer.badge) { %>
        <a style="color: #FFF;" href="http://<%= each.url %>" class="github-badge" title="<%= each.title %> ">
            <!-- Lable -->
            <span class="badge-lable badge-subject" style="padding: 4px 4px 4px 6px; background-color: #4D4D4D">
                <%= each.lable %>
            </span>
            <!-- Message -->
            <span class="badge-message badge-subject" style="padding: 4px 4px 4px 6px; background-color: <%= each.color %>;">
                <%= each.message %>
            </span>
        </a>
    <% } %>
</div>

来到/source/_inject/layout/_partials/footer.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
+ <% let dir = process.cwd() %>

<div class="footer-inner">
  <% if (theme.footer.content) { %>
    <div class="footer-content">
      <%- theme.footer.content %>
    </div>
  <% } %>

    <!-- UV -->
  <% if (theme.footer.statistics.enable) { %>
    <%- partial('_partials/footer/statistics.ejs') %>
  <% } %>

   <!-- 运行时间 -->
  <%- partial('_inject/footer/running_time.ejs') %>

    <!-- 备案信息 ICP for China -->
  <% if(theme.footer.beian.enable) { %>
    <%- partial('_partials/footer/beian.ejs') %>
  <% } %>

    <!-- cnzz Analytics Icon -->
  <% if(theme.web_analytics.cnzz) { %>
    <span id="cnzz_stat_icon_<%= theme.web_analytics.cnzz %>" style="display: none"></span>
  <% } %>

+ <!-- 徽章 -->
+ <%- include(dir + '/source/_inject/layout/_partials/footer/badge.ejs') %>
</div>

在/source/css内新建badge.css文件，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#badge{
    text-align: center;
    left: 0%;
    width: 100%;
    height: auto;
    white-space: normal;
    line-height: 10px;
}

.github-badge{
    display: inline-block;
    margin-top: 18px;
    margin-right: 2px;
    font-size: 12px;
}

.badge-subject{
    font-family: Arial, Helvetica, sans-serif;
}

然后需要在fluid的config进行配置，

在配置文件内搜索custom_css，添加如下内容

1
2
custom_css:
  - /css/custom/badge.css # Badge样式

然后再在配置文件内搜索footer，在底下添加如下代码

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
# badge记得缩进一格，然后在footer底下添加就行，不用再写一个footer
footer:
  badge:
  - {
      lable: "LABLE",
      message: "MESSAGE",
      color: "十六进制颜色代码",
      url: "URL",
      title: "TITLE(可选)"
    }
  - {
      lable: "LABLE",
      message: "MESSAGE",
      color: "十六进制颜色代码",
      url: "URL",
      title: "TITLE(可选)"
    }
  - {
      lable: "LABLE",
      message: "MESSAGE",
      color: "十六进制颜色代码",
      url: "URL",
      title: "TITLE(可选)"
    }
    ......

Moe 备案

萌国备案，当然不是正经的备案，卖萌用的

效果如图

来到/source/_inject/layout/_partials/文件夹，新建moe_beian.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
<div class="moe_beian">
    <span>
      <a href="https://icp.gov.moe/" target="_blank" rel="nofollow noopener">
        <%- theme.footer.moe_beian.icp_text %>
      </a>
    </span>
    <% if(theme.footer.moe_beian.moe_text) { %>
      <% if(theme.footer.moe_beian.moe_code) { %>
        <span title="233333">
          <a
            href="https://icp.gov.moe/?keyword=<%= theme.footer.moe_beian.moe_code %>"
            rel="nofollow noopener"
            class="beian-moe"
            target="_blank"
          >
            <% if(theme.footer.moe_beian.moe_icon) { %>
              <span style="visibility: hidden; width: 0">|</span>
              <img src="<%= url_for(theme.footer.moe_beian.moe_icon) %>" alt="moe-icon"/>
            <% } %>
            <span><%- theme.footer.moe_beian.moe_text %></span>
          </a>
        </span>
      <% } else { %>
        <span class="beian-moe">
          <% if(theme.footer.moe_beian.moe_icon) { %>
            <span style="visibility: hidden; width: 0">|</span>
            <img src="<%= url_for(theme.footer.moe_beian.moe_icon) %>" alt="moe-icon"/>
          <% } %>
          <span class="beian-moe"><%- theme.footer.moe_beian.moe_text %></span>
        </span>
      <% } %>
    <% } %>
  </div>

来到/source/_inject/layout/_partials/footer.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
<% let dir = process.cwd() %>

<div class="footer-inner">
  <% if (theme.footer.content) { %>
    <div class="footer-content">
      <%- theme.footer.content %>
    </div>
  <% } %>

    <!-- UV -->
  <% if (theme.footer.statistics.enable) { %>
    <%- include(dir + '/source/_inject/layout/_partials/footer/badge.ejs') %>
  <% } %>

   <!-- 运行时间 -->
  <%- include(dir + '/source/_inject/layout/_partials/footer/badge.ejs') %>

    <!-- 备案信息 ICP for China -->
  <% if(theme.footer.beian.enable) { %>
    <%- include(dir + '/source/_inject/layout/_partials/footer/badge.ejs') %>
  <% } %>
+ <% if(theme.footer.moe_beian.enable) { %>
+   <!-- 备案信息 ICP for Moe -->
+   <%- include(dir + '/source/_inject/layout/_partials/footer/moe_beian.ejs') %>
+ <% } %>

    <!-- cnzz Analytics Icon -->
  <% if(theme.web_analytics.cnzz) { %>
    <span id="cnzz_stat_icon_<%= theme.web_analytics.cnzz %>" style="display: none"></span>
  <% } %>

  <!-- 徽章 -->
  <%- include(dir + '/source/_inject/layout/_partials/footer/badge.ejs') %>
</div>

将图标下载过来放在themes/fluid/source/img内，

来到fluid的配置文件，搜索beian，添加如下内容

1
2
3
4
5
6
7
footer:
  moe_beian:
    enable: true
    icp_text: 
    moe_text: 你的备案文字
    moe_code: 你的备案号
    moe_icon: /img/moe_beian.png

Hexo插件

这个插件可以让你的博文地址栏变成一串随机字符，有利于SEO和美观(说到美观，如果地址栏内有中文会变得很丑)

安装

1
npm install hexo-abbrlink

然后在Hexo的config.yml内添加如下代码

1
2
3
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

就可以看到你的文章地址栏变了

注意：文章的浏览量和评论会丢失！

折腾 > 博客
#Fluid #Hexo
我的 Fluid 主题折腾记录
http://htext.top/post/aaca4077.html
作者
Huanlan233
发布于
2022年9月13日
许可协议