📚 文档目录

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引入，不然无法生效。

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栏