如何自定义侧边栏

详见

在hexo博客目录中的/source/_data创建一个名为widget.yml的文件，如果没有_data文件夹，自己创建一个。widget.yml文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
top: #创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)
  - class_name: #所创建的 widget 父类 class 名 （可选）
    id_name: #所创建的 widget 父类 id 名（可选）
    name: #所创建的 widget 标题
    icon: #所创建的 widget 图标
    html: #所创建的 widget 相关代码

bottom: #创建的 widget 会出现在 sticky 区域（除了文章页都会显示)
  - class_name:
    id_name:
    name:
    icon:
    order: #所创建的 widget 排序 （可选），如果不配置，则默认为 0。数字越小，排序越靠前。非自定义侧边栏的排序在主题配置文件（_config.butterfly.yml）sort_order处设置
    html:

hexo会根据widget.yml内容自动生成代码。

1
2
3
4
5
6
7
8
9
10
<div class="card-widget 所写的 class_name" id="所写的 id_name" style="order: 所写的 order">
    <div class="item-headline">
        <i class="所写的 icon"></i>
        <span>所写的 name</span>
    </div>
    <div class="item-content">
        所写的 html
    </div>
</div>

如何添加自定义css、js、img文件

在本地博客根目录的source文件夹里创建css``js``img文件夹（/source/css /source/js /source/img），里面即可存放.css .js img文件。

随后，在主题配置文件_config.butterfly.yml里面的inject处引入刚才编写的css js文件。

至于img文件，直接就在需要插入图片的地方引入/img/***.png即可，但一般建议使用图床。

一般而言，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>