51工具盒子前言 {#前言}
butterfly是基于melody主题的基础上开发的主题，UI界面非常好，本博客就采用butterfly主题。
安装主题 {#安装主题}
将 butterfly/_config.yml 文件复制，重命名为 _config.butterfly.yml 放在hexo根目录下，在这个文件里做修改。
配置主题 {#配置主题}
设置导航栏 {#设置导航栏}
|---------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | menu: 主页: / || fas fa-home 归档: /archives/ || fas fa-archive 标签: /tags/ || fas fa-tags 分类: /categories/ || fas fa-folder-open 友链: /link/ || fas fa-link 关于: /about/ || fas fa-heart 清单||fas fa-list: - 音乐 || /music/ || fas fa-music - 电影 || /movies/ || fas fa-video - 照片 || /Gallery/ || fas fa-images |
可以在不需要的项目前加 # 来注释代码，使其不出现在导航栏中。
配置网站图标和头像 {#配置网站图标和头像}
|---------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | # Image (圖片設置) # -------------------------------------- # Favicon（網站圖標） favicon: /img/favicon.png # Avatar (頭像) avatar: img: /img/avatar.png effect: false # The banner image of home page index_img: /img/img.jpg |
图片最好不要太大，不然可能导致加载太慢。
配置副标题 {#配置副标题}
|---------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | subtitle: enable: true # Typewriter Effect (打字效果) effect: true # Effect Speed Options (打字效果速度參數) startDelay: 300 # time before typing starts in milliseconds typeSpeed: 150 # type speed in milliseconds backSpeed: 50 # backspacing speed in milliseconds # loop (循環打字) loop: true # source 調用第三方服務 # source: false 關閉調用 # source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/ # source: 2 調用一句網（簡體） http://yijuzhan.com/ # source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/ # subtitle 會先顯示 source , 再顯示 sub 的內容 source: false # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 sub: - 风来疏竹，风过而竹不留声；雁度寒潭，雁去而潭不留影。故君子事来而心始现，事去而心随空。 - 有志者事竟成，破釜沉舟，百二秦关终属楚；苦心人天不负，卧薪尝胆，三千越甲可吞吴。 - 欢迎您来到竹山一叶的小家(❁'◡'❁) - 希望您有快乐的一天，也欢迎常来竹山一叶的小家串串门(●'◡'●) |
也可以考虑开启和调用第三方的服务。
侧边栏 {#侧边栏}
|------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | aside: enable: true hide: false button: true mobile: true # display on mobile position: left # left or right display: archive: true tag: true category: true card_author: enable: true description: button: enable: true icon: fab fa-github text: Follow Me link: https://github.com/xxxxxx card_announcement: enable: true content: 欢迎光临小站，这里是我日常收集和整理的总结，希望能对你有所帮助：）<br/><br/>本站的内容经过个人加工总结而来，也参考了网友们分享的资料，如有侵权，请第一时间联系我，我将及时进行修改和删除😊 card_recent_post: enable: true limit: 5 # if set 0 will show all sort: date # date or updated sort_order: # Don't modify the setting unless you know how it works card_categories: enable: true limit: 8 # if set 0 will show all expand: none # none/true/false sort_order: # Don't modify the setting unless you know how it works card_tags: enable: true limit: 40 # if set 0 will show all color: true sort_order: # Don't modify the setting unless you know how it works card_archives: enable: true type: monthly # yearly or monthly format: MMMM YYYY # eg: YYYY年MM月 order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending limit: 8 # if set 0 will show all sort_order: # Don't modify the setting unless you know how it works card_webinfo: enable: true post_count: true last_push_date: true sort_order: # Don't modify the setting unless you know how it works |
不需要的按钮可以用 false 关闭
配置友链 {#配置友链}
新建source/_data/link.yml文件，添加如下内容
|---------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | - class_name: 友情链接 class_desc: 那些人，那些事 link_list: - name: JerryC link: https://jerryc.me/ avatar: https://jerryc.me/image/avatar.png descr: 今日事,今日毕 - name: Hexo link: https://hexo.io/zh-tw/ avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 快速、简单且强大的网誌框架 - name: 大宇 link: https://confucianmen.gitee.io/blog/ avatar: https://s1.ax1x.com/2020/08/11/aX3EsP.gif descr: 热爱分享 热爱学习 |
配置社交图标 {#配置社交图标}
|---------------|---------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | social: fab fa-github: https://github.com/xxxxx || Github fas fa-envelope: mailto:xxxxxx@gmail.com || Email |
统计分析 {#统计分析}
我这里用百度统计
|-------------------|----------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | # Analysis # -------------------------------------- # Baidu Analytics baidu_analytics: {百度统计的号码} |
纯色背景 {#纯色背景}
在 _config.butterfly.yml 下找到 theme_color ：
|---------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | theme_color: enable: true main: "#49B1F5" paginator: "#00c4b6" button_hover: "#FF7242" text_selection: "#00c4b6" link_color: "#99a9bf" meta_color: "#858585" hr_color: "#A4D8FA" code_foreground: "#F47466" code_background: "rgba(27, 31, 35, .05)" toc_color: "#00c4b6" blockquote_padding_color: "#49b1f5" blockquote_background_color: "#49b1f5" scrollbar_color: "#49b1f5" |
可自行更换主题中上述元素的颜色。
彩带背景 {#彩带背景}
在 _config.butterfly.yml 下找到 canvas_ribbon ：
|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | # canvas_ribbon (静止彩带背景) # See: https://github.com/hustcc/ribbon.js canvas_ribbon: enable: false size: 150 alpha: 0.6 zIndex: -1 click_to_change: true #点击鼠标更换彩带 mobile: false |
图片背景 {#图片背景}
将自己喜欢的图片放入 theme/butterfly/source/img 中
在 _config.butterfly.yml 下找到 background ：
|-----------|-------------------------------------------|
| 1 | background: url(/blog/img/bg.jpg) |
自定义渐变背景 {#自定义渐变背景}
需要在 theme/butterfly/source/css 中新建一个 css 文件，文件名自取
之后在 _config.butterfly.yml 下找到 inject ：
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 | # Inject # 插入代码到头部 </head> 之前 和 底部 </body> 之前 inject: head: - <link rel="stylesheet" href="/css/mycss.css"> # - <link rel="stylesheet" href="/xxx.css"> bottom: # - <script src="xxxx"></script> |
在 head 中插入 - <link rel="stylesheet" href="/css/mycss.css">
页脚 {#页脚}
默认页脚为主题色。可在 _config.butterfly.yml 下找到 footer ，
其中包含页脚设置：
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 | # Footer Settings # -------------------------------------- footer: owner: enable: true since: 2022 custom_text: copyright: true # Copyright of theme and framework |
可以配置页脚显示的内容
还有页脚背景：
|-------------|----------------------------------------------|
| 1 2 | # Footer Background footer_bg: false |
打开后页脚图片将与主页图片（index_img）底部一致；
也可进行自定义渐变页脚：
在原本配置渐变背景的 css 文件下复制代码：
|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | /* 页脚footer */ #footer { /* 与背景渐变效果一致*/ background-image: linear-gradient(-225deg, #d6badf 0%, #B8DCFF 28%, #58abf3 100%); } #footer:before { background-color: rgba(0, 0, 0, 0); } |
渐变效果可以自己配置。
文章的封面 {#文章的封面}
每篇文章都可以设置自己的封面，或者统一使用一个封面，这些都可以在 _config.butterfly.yml 下找到；
|---------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | cover: # display the cover or not (是否显示文章封面) index_enable: false aside_enable: false archives_enable: false # the position of cover in home page (封面显示的位置) # left/right/both position: both # When cover is not set, the default cover is displayed (当没有设置cover时，默认的封面显示) default_cover: # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg |
建议没有文章封面时，将上述几个开关可以考虑关闭掉。
文章基本设置 {#文章基本设置}
在 _config.butterfly.yml 下找到 post_meta :
|---------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | post_meta: page: # Home Page date_type: created # created or updated or both 主页文章日期是创建日或者更新日或都显示 date_format: date # date/relative 显示日期还是相对日期 categories: true # true or false 主页是否显示分类 tags: false # true or false 主页是否显示标签 label: true # true or false 显示描述性文字 post: date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示 date_format: date # date/relative 显示日期还是相对日期 categories: true # true or false 文章页是否显示分类 tags: true # true or false 文章页是否显示标签 label: true # true or false 显示描述性文字 |
主页文章显示高度，显示篇数：
|---------------|------------------------------------------------------------------------------------------------------------|
| 1 2 3 | index_post_content: method: 3 length: 500 # if you set method to 2 or 3, the length need to config |
字数统计 {#字数统计}
|---------------------|--------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | # wordcount (字数统计) wordcount: enable: true post_wordcount: true min2read: true total_wordcount: true |
