hexo-Butterfly-全局设置(安装、标题、菜单、图标、顶部、页脚、侧边栏、图片设置)

博客站：梧桐的学习日记

工具站：你的美好等我去发现

欢迎访问我的网站与公众号！点击与扫码即可进入，谢谢关注！

Butterfly是hexo的一个主题，具体效果可以参考我的博客

Butterfly安装

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git

Butterfly主题应用

hexo根目录下_config.yml设置theme: Butterfly

全局设置（标题）

网站资料、语言_config.yml：

title、subject等
配置 default(en) zh-CN (简体中文) zh-TW (繁体中文)
在 hexo 的根目錄創建一個文件 _config.butterfly.yml，並把主題目錄的_config.yml內容複製到_config.butterfly.yml去。( 注意: 複製的是主題的 _config.yml ，而不是 hexo 的 _config.yml)

菜单_config.butterfly.yml：

菜单名： 路径 || 图标 || hide
子菜单： 路径 || 图标
默认子目录是展开的，如果你想要隐藏，在子目录里添加 hide

Categories: /categories/ || fas fa-folder-open
List||fas fa-list || hide:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video

导航栏

nav:
  logo: #image
  display_title: true
  fixed: false # fixed navigation bar

logo 网站的 logo，支持图片，直接填入图片链接
display_title 是否显示网站标题，填写 true 或者 false
fixed 是否固定状态栏，填写 true 或者 false

图标设置 直达->

fontawesome

要使用iconfont图标的地方： iconfont wy-setting

inject:
  head:
    # <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2542806_ht4yfylg00s.css">
  bottom:
    # - <script src="xxxx"></script>

字数统计 npm install hexo-wordcount 修改：wordcount

顶部图

disable_top_img: true 禁止顶部图
index_img 主页的 top_img
default_top_img 默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面 的 默认 top_img
tag_per_img tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img category 子页面 的 默认 top_img
category_per_img category 子页面的 top_img，可配置每个 category 的 top_img

页脚，用于备案等：footer

since是一个来展示你站点起始时间的选项
custom_text:页脚自定义文本的选项,支持 HTML

custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号：xxxxxx</span></a>
# footer是否显示图片背景(与top_img一致) 
# 留空/false 显示默认的顔色
# img链接 图片的链接，显示所配置的图片
# 顔色(HEX值 - #0000FF RGB值 - rgb(0,0,255) 顔色单词 - orange 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)）
# true 显示跟 top_img 一样
footer_bg: true

侧边栏

作者卡片

card_author

公告卡片

card_announcement:

访问人数 busuanzi (UV 和 PV)

网页已运行时间 runtimeshow

自定义侧边栏 ->直达

背景、特效

1. 背景

   # 图片格式 url(http://xxxxxx.com/xxx.jpg) 本地：url(/blog/img/xx.png)
   # 颜色（HEX值/RGB值/顔色单词/渐变色) background:'#49B202'
   # 留空 不显示背景
   background: url(/blog/img/xx.png)

2. 彩带 ->直达
   canvas_ribbon
3. 鼠标->直达
   fireworks 烟花 click_heart:爱心 ClickShowText: 文字
4. 打字效果 activate_power_mode
5. 页面加载动画 preloader

文章图片 封面 cover

cover 
  # 是否显示文章封面 文章图片
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover: