Hexo部落格美化之蝴蝶(butterfly)主題魔改
阿新 • • 發佈：2020-07-29
Hexo是輕量級的極客部落格，因為它簡便，輕巧，擴充套件性強，搭建部署方便深受廣大人們的喜愛。各種琳琅滿路的Hexo主題也是被各種大佬開發出來，十分欽佩，向大佬仰望，大聲稱讚：流批！！！
我在翻看各種主題後，便選擇了蝴蝶這個主題，蝴蝶主題是由大佬[Jerry](https://demo.jerryc.me/)製作的，其簡潔，具有現代風格，擴充套件強，配置簡單明瞭將我所吸引。
效果圖：
> [蝴蝶主題github](https://github.com/jerryc127/hexo-theme-butterfly/)
於是我按照主題的文件完成主題配置，參照其他butterfly使用者，又添加了一點魔改。為了方便大家，減少配置上花的時間，我就把腳手架程式碼放到gitee上，歡迎大家下載。
> [傳送門](https://gitee.com/glassyskyforgame/hexo-buffifly-theme)
> [魔改主題效果](http://glassyskyforgame.gitee.io/buffifly/)
下面說一下我的配置步驟
## 首先下載主題
```
在你的部落格路徑開啟終端，用git下載，如果下載太慢，可以在com後面追加.cnpm.org,這個是淘寶映象源
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
//這個是stylus，主題的依賴，必須安裝
npm install hexo-renderer-pug hexo-renderer-stylus
```
然後在hexo的_config.yaml(記住是你部落格的配置檔案，不是剛下載的主題配置檔案)更改theme：butterfly，儲存，重啟***hexo server***，就可以看到效果。
## 配置部落格主題_config.yaml
### 配置前須知
> tip: yaml配置時一定要注意空格，和縮排，否則會有語法錯誤
> [Valine官網](https://valine.js.org/)
> [蝴蝶主題官方文件](https://github.com/jerryc127/hexo-theme-butterfly)
Valine需要獲取APP ID 和 APP Key
請先登入或註冊 [LeanCloud](https://leancloud.cn/dashboard/login.html#/signin), 進入控制檯後點擊左下角建立應用：
應用建立好以後，進入剛剛建立的應用，選擇左下角的設定>應用Key，然後就能看到你的APP ID和APP Key了：
### _config.yaml配置簡單介紹
```
# Main menu navigation (導航目錄)
# --------------------------------------
# format: name: link || icon
# sub-menu
# name || icon:
# name || link || icon
menu: //按照上面給的格式配置你想設計的導航欄內容
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
- Music || /music/ || fas fa-music
- Movie || /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart
# Code Blocks (程式碼相關)
# -------------------------------------- //程式碼高亮配置 我喜歡mac light樣式，可以自行選擇
highlight_theme: light # default / darker / pale night / light / ocean / mac / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
code_word_wrap: false
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權資訊)
copy:
enable: true
copyright: false //這裡改成true就可以看到你的版權協議
# social settings (社交圖示設定) //此主題圖示引用的是fontsomev5，,不過你也可以引入阿里圖示，沒有css經驗就不要貿然嘗試了，容易翻車，最好備份一下
# formal:
# icon: link || the description
social:
fab fa-github: https://github.com/xxxxx || Github
fas fa-envelope: mailto:[email protected] || Email
# search (搜尋)
# -------------------------------------- //主題內建的搜尋功能有algolia外部搜尋和local search本地搜尋，我是打開了，這個配置需要下載依賴，具體檢視
//官方文件
# Algolia search
algolia_search:
enable: false
hits:
per_page: 6
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
hits_stats: '${hits} results found in ${time} ms'
# Local search
local_search:
enable: false
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
# Math (數學)
# --------------------------------------
# About the per_page
# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都載入js)
# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
# (false 需要時載入，須在使用的 Markdown Front-matter 加上 mathjax: true)
# MathJax //數學公式，我用的是katex
mathjax:
enable: false
per_page: false
# KaTeX
katex:
enable: false
per_page: false
hide_scrollbar: true
# Image (圖片設定)
# --------------------------------------
# Favicon（網站圖示）
favicon: /img/favicon.png
# Avatar (頭像)
avatar:
img: /img/avatar.png
effect: false
# the banner image of home page
index_img:
# if the banner of page not setting,it will show the top_img
default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg
# the banner image of archive page
archive_img:
# the banner image of tag page
# tag page, look like https://xxxxxxxxx.com/tags/butterfly
tag_img:
# the banner image of category page
# category page, look like https://xxxxxxxxx.com/categories/butterfly
category_img:
# If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
# douban:
# meta: false
# movies_img:
# books_img:
# games_img:
cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# 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
# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
# A simple 404 page
error_404:
enable: false
subtitle: 'Page Not Found'
background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
post_meta:
page: # Home Page
date_type: created # created or updated or both 主頁文章日期是建立日或者更新日或都顯示
categories: true # true or false 主頁是否顯示分類
tags: false # true or false 主頁是否顯示標籤
post:
date_type: both # created or updated or both 文章頁日期是建立日或者更新日或都顯示
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
# wordcount (字數統計) //字數統計，開啟前需要下載依賴，檢視官方文件
wordcount:
enable: false
post_wordcount: true
min2read: true
total_wordcount: true
# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description. or show the auto_excerpt)
# 3: auto_excerpt (default)
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config
# Post
# --------------------------------------
# toc (目錄)
toc:
enable: true
number: true
auto_open: true # auto open the sidebar
post_copyright:
enable: true
decode: false
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
# Sponsor/reward //打賞功能， 圖片自行設計
reward:
enable: false
QR_code:
- img: /img/wechat.jpg
link:
text: wechat
- img: /img/alipay.jpg
link:
text: alipay
# Related Articles
related_post:
enable: true
limit: 6 # Number of posts displayed
date_type: created # or created or updated 文章日期顯示建立日或者更新日
# figcaption (圖片描述文字)
photofigcaption: false
# anchor
# when you scroll in post, the URL will update according to header id.
anchor: false
# Share System (分享功能) //推薦valine，需要配置appid和appkey才能使用
# --------------------------------------
# AddThis
# https://www.addthis.com/
addThis:
enable: false
pubid:
# Share.js
# https://github.com/overtrue/share.js
sharejs:
enable: true
sites: facebook,twitter,wechat,weibo,qq
# AddToAny
# https://www.addtoany.com/
addtoany:
enable: false
item:
- facebook
- twitter
- wechat
- sina_weibo
- facebook_messenger
- email
- copy_link
# Comments System
# --------------------------------------
# disqus
# https://disqus.com/
disqus:
enable: false
shortname:
count: false # dispaly comment count in top_img
# Alternative Disqus - Render comments with Disqus API
# DisqusJS評論系統，可以實現在網路審查地區載入 Disqus 評論列表，相容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
enable: false
shortname:
siteName:
apikey:
api:
nocomment: # display when a blog post or an article has no comment attached
admin:
adminLabel:
count: false # dispaly comment count in top_img
# livere(來必力)
# https://www.livere.com/
livere:
enable: false
uid:
# gitalk
# https://github.com/gitalk/gitalk
gitalk:
enable: false
client_id:
client_secret:
repo:
owner:
admin:
language: en # en, zh-CN, zh-TW, es-ES, fr, ru
perPage: 10 # Pagination size, with maximum 100.
distractionFreeMode: false # Facebook-like distraction free mode.
pagerDirection: last # Comment sorting direction, available values are last and first.
createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
count: false # dispaly comment count in top_img
# valine
# https://valine.js.org
valine:
enable: false # if you want use valine,please set this value is true
appId: # leancloud application app id
appKey: # leancloud application app key
pageSize: 10 # comment list page size
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
lang: en # i18n: zh-CN/zh-TW/en/ja
placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
guest_info: nick,mail,link #valine comment header info (nick/mail/link)
recordIP: false # Record reviewer IP
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background //現版本已經把背景改成透明瞭，想要背景可自行更改，或者參考我的腳手架
emojiCDN: # emoji CDN //表情自定義，可檢視主題官方文件配置
enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
requiredFields: nick,mail # required fields (nick/mail)
count: false # dispaly comment count in top_img
# utterances
# https://utteranc.es/
utterances:
enable: false
repo:
# Issue Mapping: pathname/url/title/og:title
issue_term: pathname
# Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
light_theme: github-light
dark_theme: photon-dark
# Facebook Comments Plugin
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
enable: false
app_id:
user_id: # optional
pageSize: 10 # The number of comments to show
order_by: social # social/time/reverse_time
lang: en_US # Language en_US/zh_CN/zh_TW and so on
count: false
# Chat Services //即時聊天服務，需要註冊，再開啟chat_btn和你選擇的某一款聊天服務，我選擇的是daovoice
# --------------------------------------
# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: false
# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: false
# chatra
# https://chatra.io/
chatra:
enable: false
id:
# tidio
# https://www.tidio.com/
tidio:
enable: false
public_key:
# daovoice
# http://daovoice.io/
daovoice:
enable: false
app_id:
# gitter
# https://gitter.im/
gitter:
enable: false
room:
# Footer Settings
# -------------------------------------- //頁尾配置
since: 2020
footer_custom_text:
footer_copyright: true
ICP:
enable: false
url:
text:
icon: /img/icp.png
# Analysis
# -------------------------------------- //網站分析模組，我沒有配置，這個檢視主題文件吧
# Baidu Analytics
baidu_analytics:
# Google Analytics
google_analytics:
# Tencent Analytics ID
tencent_analytics:
# Advertisement
# --------------------------------------
# Google Adsense (谷歌廣告)
google_adsense:
enable: false
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client:
enable_page_level_ads: true
# Insert ads manually (手動插入廣告)
# ad:
# index:
# aside:
# post:
# Verification (站長驗證)
# --------------------------------------
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:
# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:
# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:
# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:
# Beautify/Effect (美化/效果) //自定義美化效果，沒有css經驗請繞行
# --------------------------------------
# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!
# 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"
# The top_img settings of home page
# default: top img - full screen, site info - middle (預設top_img全屏，site_info在中間)
# The positon of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
index_top_img_height:
# The user interface setting of category and tag page (category和tag頁的UI設定)
# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
# default - same as archives UI 預設跟archives頁面UI一樣
category_ui: # 留空或 index
tag_ui: # 留空或 index
# Website Background (設定網站背景)
# can set it to color or image (可設定圖片 或者 顔色)
# The formal of color: '#49B202'
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
# White color will be shown as default
background: //網站背景，因為魔改將banner設為透明，如果不新增背景就會一片白，背景格式： url（網路路徑或者本地相對路徑）
# Show the footer background image (same as top_img)
footer_bg: false
# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/預設單位為px)
rightside-bottom:
# Background effects (背景特效) //處於對效能考慮，最好不要都開啟，背景，滑鼠效果各選一個
# --------------------------------------
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false
mobile: false
# Dynamic ribbon (動態彩帶)
canvas_ribbon_piao:
enable: false
mobile: false
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: false
color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: 0.7 # the opacity of line (0~1), default: 0.5.
zIndex: -1 # z-index property of the background, default: -1.
count: 99 # the number of lines, default: 99.
mobile: false
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: false
colorful: true # open particle animation (冒光特效)
shake: true # open shake (抖動特效)
# Mouse click effects: fireworks (滑鼠點選效果: 煙火特效)
fireworks:
enable: false
zIndex: 9999 # -1 or 9999
# Mouse click effects: Heart symbol (滑鼠點選效果: 愛心)
click_heart: false
# Mouse click effects: words (滑鼠點選效果: 文字)
ClickShowText:
enable: false
text:
- I
- LOVE
- YOU
fontSize: 15px
# Default display mode (網站預設的顯示模式)
# light (default) / dark
display_mode: light
# Beautify (美化頁面顯示)
beautify:
enable: false
field: post # site/post
title-prefix-icon: '\f0c1'
title-prefix-icon-color: '#F47466'
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
font-family:
code-font:
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', Microsoft YaHei', sans-serif
# The setting of divider icon (水平分隔線圖示設定)
hr_icon:
enable: true
icon: # the unicode value of Font Awesome icon
icon-top:
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (迴圈打字)
loop: true
# source呼叫第三方服務
# source: false 關閉呼叫
# source: 1 呼叫搏天api的隨機語錄（簡體） https://api.btstu.cn/
# source: 2 呼叫一言網的一句話（簡體） https://hitokoto.cn/
# source: 3 呼叫一句網（簡體） http://yijuzhan.com/
# source: 4 呼叫今日詩詞（簡體） https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果有英文逗號' , ',請使用轉義字元 ,
# 如果有英文雙引號' " ',請使用轉義字元 "
# 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
# 如果關閉打字效果，subtitle只會顯示sub的第一行文字
sub:
- 今日事,今日畢
- Never put off till tomorrow what you can do today
# Loading Animation (載入動畫)
preloader: false
# aside (側邊欄)
# --------------------------------------
aside:
enable: true
mobile: true # display on mobile
position: right # left or right
card_author:
enable: true
description:
card_announcement:
enable: true
content: This is my Blog
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
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
card_webinfo: true
# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
site_uv: true
site_pv: true
page_pv: true
# Time difference between publish date and now (網頁執行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
enable: false
publish_date:
# Bottom right button (右下角按鈕)
# --------------------------------------
# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
enable: true
# The text of a button
default: 繁
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
defaultEncoding: 2
# Time delay
translateDelay: 0
# The text of the button when the language is Simplified Chinese
msgToTraditionalChinese: '繁'
# The text of the button when the language is Traditional Chinese
msgToSimplifiedChinese: '簡'
# Read Mode (閲讀模式)
readmode: true
# dark mode
darkmode:
enable: true
# Toggle Button to switch dark/light mode
button: true
# Switch dark/light mode automatically (自動切換 dark mode和 light mode)
# autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
# autoChangeMode: 2 Switch dark mode between 6 pm to 6 am
# autoChangeMode: false
autoChangeMode: false
# Lightbox (圖片大圖檢視模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)
# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false
# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true
# Tag Plugins settings (標籤外掛)
# --------------------------------------
# mermaid
# see https://github.com/knsv/mermaid
mermaid:
enable: false
# built-in themes: default/forest/dark/neutral
theme: default
# Note (Bootstrap Callout)
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat
icons: true
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0
# other
# --------------------------------------
# Snackbar (Toast Notification 彈窗) //操作提示彈窗
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
enable: false
position: bottom-left
bg_light: '#49b1f5' # The background color of Toast Notification in light mode
bg_dark: '#121212' # The background color of Toast Notification in dark mode
# Baidu Push (百度推送)
baidu_push: false
# https://instant.page/
# prefetch (預載入)
instantpage: true
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間新增空格)
pangu:
enable: false
field: site # site/post
# Lazyload (圖片懶載入)
# https://github.com/verlok/lazyload
lazyload:
enable: true
post: /img/loading.gif
# PWA
# See https://github.com/JLHwung/hexo-offline
# ---------------
# pwa:
# enable: false
# manifest: /image/pwa/manifest.json
# theme_color: "#fff"
# apple_touch_icon: /image/pwa/apple-touch-icon.png
# favicon_32_32: /image/pwa/32.png
# favicon_16_16: /image/pwa/16.png
# mask_icon: /image/pwa/safari-pinned-tab.svg
# Disable Baidu transformation on mobile devices (禁止百度轉碼)
disable_baidu_transformation: true
# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta: true
# Caches the contents in a fragment, speed up the generation (開啟hexo自帶的快取,加快生成速度)
fragment_cache: true
# Inject
# Insert the code to head (before '