距离上次更新已经过了 956 天，文章所描述的内容可能已经发生变化，请留意。

📚 文档目录

01 - 添加自定义 css 和 js 文件 02-footer 栏 03 - 友链卡片样式 04 - 站点图片批量半自动截图 05 - 分类磁贴插件版 06 - 添加侧边栏电子钟 07 - 侧边栏归档、分类修改 08 - 标签云增加文章数上下标 09 - 顶部加载渐变条 10 - 导航栏魔改 11.1 - 返回顶部按钮显示网页阅读进度 11.2 - 添加白天夜间模式转换动画 11.3 - 增加分享本页 11.4 - 直达底部 12 - 添加 51 统计 13-404 页面展示最近文章 14 - 分类标签归档页增加文章索引 15 - 新标签打开文章 16 - 使用 Algolia 搜索 17 - 文章双栏布局插件 18 - 动态分类标签导航栏 19 - 增加评论热评轮播功能 20 - 链接卡片标签外挂 21 - 新年倒计时卡片 22 - 文章统计图页面 23 - 隐藏部分文章不在首页显示

如果是全站 css/js 的话，可以在主题配置文件里的 inject 下的 head 和 bottom 里引入，如果是某一页的，可以在该页里面直接引入。

在 source 文件夹里面创建 js 和 css 文件夹，如果你有其他需求，也可以在这里创建文件夹，例如存放图片的 img 文件夹，存放字体的 font 文件夹等等。

在主题配置文件_config.butterfly.yml 里面的 inject 引入。

css 文件在 head 引入，js 文件在 bottom 里引入，有的 js 要求在 head 引入，不然无法生效。

yml
1
2
3
4
5
6
7
8
9
10
11
12
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/style.css?v1">
    # 静态文件后面加个  ?任意内容  可以在每次更新之后用户自动重新请求.
    # 例如添加 ?1 ,在修改此文件后改成 ?2 ,用户访问你的网站时,不会使用本地的缓存,而是请求新的内容。没修改的话就不用动。
  bottom:
    # 自定义js
    - <script src="/js/script.js?v1"></script>
    # 引入多个文件就直接往下复制一行改一下文件名即可，如下：
    - <script src="/js/script1.js?v1"></script>
    - <script src="/js/script2.js?v1"></script>

注意：路径写法应为 /xxx，不能写为./xxx。

02-footer 栏