页脚Github徽标（店长）

下载插件

安装插件,在博客根目录[BlogRoot]下打开终端，运行以下指令：

1
npm install hexo-butterfly-footer-beautify --save

修改配置文件

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加（这是我的配置）

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
44
45
46
47
48
# footer_beautify  
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)  
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)  
footer_beautify:  
  enable:  
    timer: true # 计时器开关  
    bdage: true # 徽标开关  
  priority: 5 #过滤器优先权  
  enable_page: all # 应用页面  
  exclude: #屏蔽页面  
    # - /posts/  
    # - /about/  
  layout: # 挂载容器类型  
    type: id  
    name: footer-wrap  
    index: 0  
  # 计时器部分配置项（看你喜欢哪个，最好下载下来放到自己的项目中不然会增加我网站的负载）  
  # 这是我的    
  # runtime_js: https://www.fomal.cc/static/js/runtime.js  
  # runtime_css: https://www.fomal.cc/static/css/runtime.min.css   
  # 这是店长的   
  runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js  
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css  
  # 徽标部分配置项  
  swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数  
  bdageitem:  
    - link: https://hexo.io/ #徽标指向网站链接  
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API  
      message: 博客框架为Hexo_v6.2.0 #徽标提示语  
    - link: https://butterfly.js.org/  
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender  
      message: 主题版本Butterfly_v4.3.1  
    - link: https://vercel.com/  
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel  
      message: 本站采用多线部署，主线路托管于Vercel  
    - link: https://dashboard.4everland.org/  
    # https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS  
      shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS  
      message: 本站采用多线部署，备用线路托管于4EVERLAND  
    - link: https://github.com/  
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub  
      message: 本站项目由Github托管  
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/  
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris  
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可  
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css  
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js  
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

自定义徽标网站：自定义徽标

参数解释

参数 备选值/类型 释义
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable.timer true/false 【必选】计时器控制开关
enable.bdage true/false 【必选】徽标控制开关
enable_page path 【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填all，默认为all
exclude path 【可选】填写想要屏蔽的页面，可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type id/class 【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name text 【必选】挂载容器名称
layout.index 0和正整数 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
runtime_js url 【必选】页脚计时器脚本，可以下载上文填写示例的链接，参照注释和教程：Native JS Timer自行修改。
runtime_css url 【可选】自定义样式，预留开发者接口，可自行下载。
swiperpara number 【可选】若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题
bdageitem.link url 【可选】页脚徽标指向的网站链接
bdageitem.shields url 【必选】页脚徽标对应的API，API具体写法示例参照教程Add Github Badge
bdageitem.message text 【可选】页脚徽标悬停时显示的信息
swiper_css url 【可选】swiper的依赖
swiper_js url 【可选】swiper的依赖
swiperbdage_init_js url 【可选】swiper初始化方法

其他问题

如果不喜欢原来显示版权信息的页脚样式，可以把页脚的配置取消

_config.butterfly.yml 的 footer下面的 copyright 是否显示版权信息 这一项改为false

1
2
3
4
5
6
7
8
9
10
11
12
#页脚的相关信息
# --------------------------------------
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true #是否显示版权信息
    since: 2024 #站点创建时间
  custom_text: aaaaaaa #自定义的文本内容到页脚
  # Copyright of theme and framework
  copyright: fasle #是否显示版权信息
  theme: true #是否显示主题信息

计时器

注意上面配置文件中的runtime_js ，这里可以使用自己的自定义 js 文件。

在项目根目录下的source文件夹中新建一个js文件夹（这个文件夹用于存放自定义的 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
/*
页脚计时器js
*/
var now=new Date;
function createtime(){now.setTime(now.getTime()+1e3);
    var e=new Date("12/24/2024 00:00:00"),
    t=Math.trunc(234e8+(now-e)/1e3*17),
    a=(t/1496e5).toFixed(6),
    o=new Date("12/24/2024 00:00:00"),
    n=(now-o)/1e3/60/60/24,
    r=Math.floor(n),
    i=(now-o)/1e3/60/60-24*r,
    s=Math.floor(i);
    1==String(s).length&&(s="0"+s);
    var d=(now-o)/1e3/60-1440*r-60*s,
    l=Math.floor(d);1==String(l).length&&(l="0"+l);
    var g=(now-o)/1e3-86400*r-3600*s-60*l,
    b=Math.round(g);
    1==String(b).length&&(b="0"+b);
    let c="";
    c=s<18&&s>=9?
    `
    <div style="font-size:13px;font-weight:bold">
    本站居然运行了 ${r} 天 ${s} 小时 ${l} 分 ${b} 秒
    <i id="heartbeat" class='fas fa-heartbeat'></i> <br>
     </div>
     `:
     `
     <div style="font-size:13px;font-weight:bold">本站居然运行了 ${r} 天 ${s} 小时 ${l} 分 ${b} 秒
      <i id="heartbeat" class='fas fa-heartbeat'></i> <br>
     </div>
     `,
    document.getElementById("workboard")&&(document.getElementById("workboard").innerHTML=c)}setInterval((()=>{createtime()}),1e3);

然后修改配置文件中的runtime_js路径为/js/runtime.js 即可。