hexo-butterfly-footer-marcus

给博客添加仿Heo页脚

适用于hexo-theme-butterfly
本地版请见(页脚美化)[https://blog.shineyu.cn/beautify-footer.html]

参考

Heo
Leonus
实际效果

安装

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

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

如果需要随机友联的话,再运行以下指令：

1
npm i yamljs --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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
#hexo-butterfly-footer-marcus
#see https://blog.marcus233.top/p/footer.html
footer_beautify:
  enable: true
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  layout: # 挂载容器类型
      type: id
      name: footer
      index: 1
  footer_icons:
    enable: true
    left:
      - icon: fa-solid fa-compass
        link: https://www.marcus233.top/
        desrc: 个人主页
        class: out
      - icon: fa-brands fa-qq
        link: https://res.abeim.cn/api/qq/?qq=3105950984
        desrc: 联系QQ
        class: out
      - icon: fa-brands fa-weixin
        link: /wechat/
        desrc: 联系微信
        class: in
      - icon: fa-solid fa-envelope
        link: mailto:marcus@marcus233.top
        desrc: 发送邮件
        class: out
    right:
      - icon: fa-brands fa-github
        link: https://github.com/Marcusyyds
        desrc: Github主页
        class: out
      - icon: fa-brands fa-bilibili
        link: https://space.bilibili.com/1024450661
        desrc: 哔哩哔哩主页
        class: out
      - icon: fa-solid fa-star
        link: /stars/
        desrc: 藏宝阁
        class: in
      - icon: fa-solid fa-comment
        link: /message/
        desrc: 留言
        class: in
  footer_logo:
    enable: true
    url: https://img01.anheyu.com/useruploads/8/2022/12/15/639adf5b8806a.png
  footer_group:
    enable: true
    footer_group_link:
      - group_title: 直达
        footer_links: 
          - text: 藏宝阁
            link: /stars/
            class: in
          - text: 优秀句子
            link: /sentence/
            class: in
          - text: 空间说说
            link: /zone/
            class: in
          - text: 友链订阅
            link: /fcircle/
            class: in
          - text: 切换背景
            link: /bg/
            class: in
      - group_title: 关于
        footer_links: 
          - text: 关于我
            link: /about/
            class: in
          - text: RSS订阅
            link: /atom.xml
            class: in
          - text: 站点监控
            link: https://uptime.marcus233.top/
            class: out
          - text: 更新记录
            link: /timeline/
            class: in
          - text: 我的相册
            link: /picture/
            class: in
      - group_title: 分类
        footer_links: 
          - text: 博客相关
            link: /categories/博客相关
            class: in
          - text: 生活点滴
            link: /categories/生活点滴
            class: in 
          - text: 资源分享
            link: /categories/资源分享
            class: in
          - text: 学习笔记
            link: /categories/学习笔记
            class: in 
          - text: 实用教程
            link: /categories/实用教程
            class: in 
          - text: 查看全部
            link: /categories/
            class: in 
  footer_friend_links:
    enable: true
    number: 5
  footer_bottom:
    copyright:
      enable: true
      author: Marcus
      link: https://marcus233.top/
      time: 2022
    left:
      - text: 雨云
        desrc: 本站CDN支持
        link: https://rainyun.com/
      - text: 网盾星球
        desrc: 本站CDN防护主要提供商:网盾星球
        link: https://www.netdun.net/
      - text: 萌ICP备20230221
        desrc: 萌ICP备20230221
        link: https://icp.gov.moe/?keyword=20230221
      - text: 萌ICP备20236688
        desrc: 萌ICP备20236688
        link: https://icp.gov.moe/?keyword=20236688
      - text: 萌ICP备20230002
        desrc: 萌ICP备20230002
        link: https://icp.gov.moe/?keyword=20230002
    right:
      - text: Hexo
        desrc: 框架
        link: https://hexo.io/zh-cn/
      - text: Butterfly
        desrc: 主题
        link: https://butterfly.js.org/
    runtime:
      enable: true
      time: 2022/08/09 00:00:00
  footer_css: https://cdn1.tianli0.top/npm/hexo-butterfly-footer-marcus/lib/footer.min.css
  footer_js: https://cdn1.tianli0.top/npm/hexo-butterfly-footer-marcus/lib/footer.min.js

请自行下载footer_js修改建站日期
如果开启了随机友联,根目录下却没有link.json,请参考(页脚的随机友链)[https://blog.shineyu.cn/footer-random-flink.html]

参数释义

参数 备选值/类型 释义
enable true/false 【必选】控制开关
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable_page path/all 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/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，此项用来确认究竟排在第几个顺位
insertposition text ‘beforebegin’：元素自身的前面。’afterbegin’：插入元素内部的第一个子节点之前。’beforeend’：插入元素内部的最后一个子节点之后。’afterend’：插入元素自身的后面。
footer_icons.enable true/false 【必选】icon控制开关
***.text** text 【必选】显示文字
***.icon** class 【必选】icon(例:fa-solid fa-commet)
***.desrc** text 【必选】a标签内的title选项
***.class** in/out 【必选】站内/外链接(站内:in,站外:out)
***.link** url 【必选】链接
footer_logo.enable true/false 【必选】icon内logo控制开关
footer_group.enable true/false 【必选】group控制开关
footer_friend_links.enable true/false 【必选】随机友联开关
footer_friend_link.number 正整数 【可选】随机友联数量
footer_bottom.copyright.enable true/false 【必选】copyright开关
footer_bottom.runtime.enable true/false 【必选】网站运行时间开关
footer_css url 【必选】css链接
footer_js url 【必选】js链接

使用方法

填写配置项
需改动源码的地方

  1. 在themes\butterfly\layout\includes\layout.pug43行(修改页脚背景色的bug)
    1
    2
    3
    4
    5
    6
    7
    8
    9
            else
              - var footer_bg = ''

    -        footer#footer(style=footer_bg)
    +        footer#footer(style='background: transparent')
              !=partial('includes/footer', {}, {cache: true})

        else
          include ./404.pug
    去掉+号
  2. 在themes\butterfly\source\css\_mode\darkmode.styl43行(修改黑暗模式按钮层级的bug)
    1
    2
    3
    4
    5
    6
    7
    8
        #web_bg:before,
    -    #footer:before,
        #page-header:before
          position: absolute
          width: 100%
          height: 100%
          background-color: alpha($dark-black, .7)
          content: ''

最后

hexo cl&&hexo g&&hexo s
感谢晚安帮助我测试

有bug欢迎反应