Butterfly自用手册

浅浅记录一下主题的美化内容💀

内容涉及到自定义css文件，这里记录一下，在主题根目录\themes\butterfly\source\css目录下新建自定义css文件，我这里是self.css
之后在主题配置文件开启它：
在_config.butterfly.yml里搜索inject
添加：
1
- <link rel="stylesheet" href="/css/self.css">

背景透明\渐变

背景透明

效果预览：

在self.css文件中写入：

1
2
3

#footer {
  background: transparent !important;
}

背景渐变

效果预览：

在新建的css文件中写入一下内容：

#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}

#web_bg {
    background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))
}

页脚透明渐变

如果选择背景透明渐变，页脚的内容因为是白色容易跟背景混在一起导致看不太清楚

一样在刚刚的self.css文件里写入一下内容：

  #footer {
    background: rgba(255,255,255,.15); 
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
    background: rgba(255,255,255,.15)
}

#footer #footer-wrap {
    color: var(--font-color)
}

#footer #footer-wrap a {
    color: var(--font-color)
}

社交图标

推荐使用阿里巴巴矢量图标库,在搜索框输入想要的图标名称即可，选好后加入购物车，添加到项目中，没有项目的话新建一个就行。
在我的项目里选择Font class,点击查看在线链接并在浏览器中打开，然后另存到本地，可以放到主题文件夹里面的source\css文件夹里，命名为icon.css方便调用。
在_config.butterfly.yml里搜索inject，引入刚刚的图标文件
还是在主题配置文件里，找到social社交图标配置图标
格式为：iconfont class 名: 链接 || 名称
iconfont是固定的格式，class名可以在刚刚保存的icon.css文件中找到
~~我自己试了没成功，不太懂这方面的东西，但是我看好多博主都是这样弄得，他们的图标都是彩色的，头大~~

持续更新。。。

文章主要参考小嘉的部落格

网站图标

在_config.butterfly.yml中搜索：favicon，将其修改为自己图库的网站图标，或者是本地文件路径。
顺路，记录一下在找图标过程中发现的很使用的免费图标库：Iconfinder

天气小组件

写在开头

逛CSDN看到一篇关于博客添加天气小组件的文章，蛮有意思，便动手试了试。
文章参考：小孙同学

显示效果

具体教程

申请API，创建小组件
采用和风天气提供的PAI，首先进去和风天气并注册一个账户。

进入和风天气开发平台，选择插件，然后选择一个自己喜欢的样式，创建。

插件名称随意发挥，建议选取固定位置。

设置完成后，复制上面的生成代码。

WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "4A86E8",
    "tmpSize": "16",
    "cityColor": "FF9900",
    "citySize": "16",
    "aqiColor": "4A86E8",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "0px 0px 0px 0px",
    "shadow": "0",
    "language": "auto",
    "fixed": "true",
    "vertical": "center",
    "horizontal": "center",
    "left": "165",
    "top": "20",
    "key": "4b8d61c416ac4c31a05a60e31d6e58b3"//这里换成你自己的key
  }
}

在blog\themes\butterfly\layout\includes\headers目录下的nav.pug文件中添加以下内容:
1
<div id="he-plugin-simple"></div>

在blog\themes\butterfly\source\js目录下添加weather.js文件，并填入之前生成的插件信息内容。

 WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "4A86E8",
    "tmpSize": "16",
    "cityColor": "FF9900",
    "citySize": "16",
    "aqiColor": "4A86E8",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "0px 0px 0px 0px",
    "shadow": "0",
    "language": "auto",
    "fixed": "true",
    "vertical": "center",
    "horizontal": "center",
    "left": "165",
    "top": "20",
    "key": "4b8d61c416ac4c31a05a60e31d6e58b3"//这里换成你自己的key
  }
}

在配置文件_config.butterfly的inject属性中引入以下代码。

1 2	- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script> - <script async src="/js/weather.js"></script>

之后就本地预览，调整位置，网页的东西我不太清楚，也找不到部件的源码在网页的哪里，位置调账全靠感觉😅

关于置顶文章的调整

写在开头

最近提交文章发现，设置了置顶的文章并没有真正意义上置顶，但是文章标签上会显示有置顶提示，也仅仅是显示置顶标签而已。

参考

本节内容参考Akilarの糖果屋作者大大的文章，整个轮播显示。
效果：

具体步骤

在博客根目录运行Git Bush,:

1	npm install hexo-butterfly-swiper --save

添加配置信息：在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加:

# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

建议放在butterfly的配置文件里面，因为我一开始放在了hexo的配置文件里，只在主页显示轮播图，但是点击之后无法跳转，不知道是什么原因，换到主题配置里面，就可以正常跳转了。

具体参数配置请阅读原文章第三节。

使用过程中，在文章的front_matter中添加swiper_index配置项即可。

---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

文章加密

可以通过一个小插件实现，在GitBush中执行以下命令：

1	npm install hexo-blog-encrypt --save

同时在文章头部加入以下字符：

1 2	password: test message: 测试加密，这里的密码是：test