我的Fluid主题折腾记录

本文最后更新于：2 个月前

打字机

从一言获取句子

可以在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);
}

最后效果如下图

页脚

为了以后方便更新主题，这里使用 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文件复制，来到博客根目录，创建js文件夹，里面创建_partials文件夹，然后把把复制的文件粘贴进去。

在来到themes/fluid/layout，新建一个_inject文件夹，在里面新建一个footer文件夹。

存活时间

效果如图

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

将以下代码复制，来到_injector/footer，在里边新建一个running-time.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
<div class="running-time">
    <span id="RunTime_span">加载中...</span>
    <script>
        var StartTime = new Date('2022/6/5 00:00:00'); // 此处改为你的建站时间

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

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

            AllSeconds = 365 * 24 * 60 * 60; // 一年全部有多少秒

            Year = Time / AllSeconds; // 已存活时间除以一年的秒数，可以知道活了多少年
            YearINT = Math.floor(Year); // 转为整数

            Month = (Year - YearINT) * 12; // 整数与原来的数字的商乘12就可以知道活了多少月
            MonthINT = Math.floor(Month); // 转为整数

            Day = (Month - MonthINT) * ((7*31+5*30 )/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();
    </script>
</div>

然后来到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
<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>
  <% } %>
</div>

Badge(徽章)

效果如下

来到_inject/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>

来到js/_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
<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>
  <% } %>

+  <!-- 徽章 -->
+ <%- partial('_inject/footer/badge.ejs') %>
</div>

在fluid/themes/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 备案

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

效果如图

来到_inject/footer文件夹，新建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>

来到js/_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
<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') %>
  <% } %>
+ <% if(theme.footer.moe_beian.enable) { %>
+     <!-- 备案信息 ICP for Moe -->
+     <%- partial('_inject/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>
  <% } %>

   <!-- 徽章 -->
  <%- partial('_inject/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主题折腾记录
https://www.htext.top/post/aaca4077.html
作者
Huanlan
发布于
2022年9月13日
许可协议