总体效果

框架的选择（butterfly）

前面我们搭建的博客，可以看见非常的单调，那如果我们想要让他变得漂亮，自然我们是不会自己去写代码的，我们通过网上比较成熟的框架，通过修改配置文件便可以得到漂亮的视觉效果。自然我这里选择的是butterfly框架

butterfly

主题的下载

我们进入到上一篇文章所在的文件夹根目录下，进入cmd命令

输入两个命令

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

npm install hexo-renderer-pug hexo-renderer-stylus --save

然后找到文件夹下的_config.yml,找到theme，将其修改为butterfly

根据自己需要修改theme下面的butterfly的_config.yml

这里我给出我自己配置的文件

# Main menu navigation (導航目錄)
# --------------------------------------# format: name: link || icon
# sub-menu
# name || icon:
#   name || link || iconmenu:首页: / || fas fa-home时间轴: /archives/ || fas fa-archive标签: /tags/ || fas fa-tags技术分类||fa fa-heartbeat:- Android || /music/ || fas fa-music- Vue || /Gallery/ || fas fa-images- 经历分享 || /movies/ || fas fa-video友鏈: /link/ || fas fa-link关于: /about/ || fas fa-heart# Hide the child menu items in mobile sidebar
hide_sidebar_menu_child: false# Code Blocks (代碼相關)
# --------------------------------------highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / 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: truecopyright:enable: falselimit_count: 50# social settings (社交圖標設置)#formal:
#   icon: link || the description
social:fab fa-github: https://gitee.com/mengtaoya || 码云fas fa-envelope: 2640622467@qq.com || QQ# search (搜索)
# --------------------------------------# Algolia search
algolia_search:enable: falsehits:per_page: 6# Local search
local_search:enable: false# 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
mathjax:enable: falseper_page: false# KaTeX
katex:enable: falseper_page: falsehide_scrollbar: true# Image (圖片設置)
# --------------------------------------# Favicon（網站圖標）
favicon: /img/favicon.png# Avatar (頭像)
avatar:img:effect: false# Disable all banner image
disable_top_img: 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:# The banner image of archive page
archive_img:# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:cover:# display the cover or not (是否顯示文章封面)index_enable: trueaside_enable: truearchives_enable: true# the position of cover in home page (封面顯示的位置)# left/right/bothposition: 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.gifpost_page: /img/404.jpg# A simple 404 page
error_404:enable: falsesubtitle: 'Page Not Found'background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.pngpost_meta:page: # Home Pagedate_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 顯示描述性文字# wordcount (字數統計)
wordcount:enable: falsepost_wordcount: truemin2read: truetotal_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)
# false: do not show the article introduction
index_post_content:method: 3length: 500 # if you set method to 2 or 3, the length need to config# Post
# --------------------------------------# toc (目錄)
toc:enable: truenumber: truestyle_simple: falsepost_copyright:enable: truedecode: falselicense: CC BY-NC-SA 4.0license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/# Sponsor/reward
reward:enable: falseQR_code:- img: /img/wechat.pnglink:text: wechat- img: /img/alipay.pnglink:text: alipay# Post edit
# Easily browse and edit blog source code online.
post_edit:enable: false# url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/# For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/url:# Related Articles
related_post:enable: truelimit: 6 # Number of posts displayeddate_type: created # or created or updated 文章日期顯示創建日或者更新日# figcaption (圖片描述文字)
photofigcaption: false# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1# anchor
# when you scroll in post, the URL will update according to header id.
anchor: false# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:enable: falsestyle: flat # style: simple/flatlimit_day: 500 # When will it be shownposition: top # position: top/bottommessage_prev: It has beenmessage_next: days since the last update, the content of the article may be outdated.# Share System (分享功能)
# --------------------------------------# AddThis
# https://www.addthis.com/
addThis:enable: falsepubid:# Share.js
# https://github.com/overtrue/share.js
sharejs:enable: truesites: facebook,twitter,wechat,weibo,qq# AddToAny
# https://www.addtoany.com/
addtoany:enable: falseitem: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link# Comments System
# --------------------------------------comments:# Up to two comments system, the first will be shown as default# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoouse:# - Valine# - Disqustext: true # Display the comment name next to the button# lazyload: The comment system will be load when comment element enters the browser's viewport.# If you set it to true, the comment count will be invalidlazyload: falsecount: false # Display comment count in post's top_imgcard_post_count: false # Display comment count in Home Page# disqus
# https://disqus.com/
disqus:shortname:# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:shortname:siteName:apikey:api:nocomment: # display when a blog post or an article has no comment attachedadmin:adminLabel:# livere (來必力)
# https://www.livere.com/
livere:uid:# gitalk
# https://github.com/gitalk/gitalk
gitalk:client_id:client_secret:repo:owner:admin:language: en # en, zh-CN, zh-TW, es-ES, fr, ruperPage: 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# valine
# https://valine.js.org
valine:appId: # leancloud application app idappKey: # leancloud application app keypageSize: 10 # comment list page sizeavatar: monsterid # gravatar style https://valine.js.org/#/avatarlang: en # i18n: zh-CN/zh-TW/en/japlaceholder: 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 IPserverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)bg: # valine backgroundemojiCDN: # emoji CDNenableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ AvatarrequiredFields: nick,mail # required fields (nick/mail)option:# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:serverURL: # Waline server address urlavatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-imageemojiCDN: # emoji CDNbg: # waline backgroundoption:# utterances
# https://utteranc.es/
utterances:repo:# Issue Mapping: pathname/url/title/og:titleissue_term: pathname# Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-darklight_theme: github-lightdark_theme: photon-dark# Facebook Comments Plugin
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:app_id:user_id: # optionalpageSize: 10 # The number of comments to showorder_by: social # social/time/reverse_timelang: en_US # Language en_US/zh_CN/zh_TW and so on# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:envId:region:option:# Chat Services
# --------------------------------------# 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: falseid:# tidio
# https://www.tidio.com/
tidio:enable: falsepublic_key:# daovoice
# http://daovoice.io/
daovoice:enable: falseapp_id:# gitter
# https://gitter.im/
gitter:enable: falseroom:# crisp
# https://crisp.chat/en/
crisp:enable: falsewebsite_id:# Footer Settings
# --------------------------------------
footer:owner:enable: truesince: 2020custom_text:copyright: true # Copyright of theme and framework# Analysis
# --------------------------------------# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics:# Google Analytics
# https://analytics.google.com/analytics/web/
google_analytics:# Tencent Analytics ID
# https://mta.qq.com
tencent_analytics:# CNZZ Analytics
# https://www.umeng.com/
cnzz_analytics:# Cloudflare Analytics
# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:# Microsoft Clarity
# https://clarity.microsoft.com/
microsoft_clarity:# Advertisement
# --------------------------------------# Google Adsense (谷歌廣告)
google_adsense:enable: falseauto_ads: truejs: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.jsclient: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:# Yandex Webmaster tools verification setting
# see https://webmaster.yandex.com/
yandex_site_verification:# Beautify/Effect (美化/效果)
# --------------------------------------# 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 position 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 image: url(http://xxxxxx.com/xxx.jpg)
background:# Footer Background
footer_bg: false# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
rightside-bottom:# Enter transitions (開啓網頁進入效果)
enter_transitions: true# Background effects (背景特效)
# --------------------------------------# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:enable: falsesize: 150alpha: 0.6zIndex: -1click_to_change: falsemobile: false# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:enable: falsemobile: false# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:enable: falsecolor: '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: truecolorful: true # open particle animation (冒光特效)shake: true #  open shake (抖動特效)mobile: false# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:enable: falsezIndex: 9999 # -1 or 9999mobile: false# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:enable: truemobile: true# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:enable: truetext:- 至尊- 小- 涛fontSize: 15pxrandom: falsemobile: false# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: light# Beautify (美化頁面顯示)
beautify:enable: falsefield: post # site/posttitle-prefix-icon: '\f0c1'title-prefix-icon-color: '#F47466'# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:global-font-size:code-font-size:font-family:code-font-family:# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:font_link:font-family:# The setting of divider icon (水平分隔線圖標設置)
hr_icon:enable: trueicon: # the unicode value of Font Awesome icon, such as '\3423'icon-top:# the subtitle on homepage (主頁subtitle)
subtitle:enable: false# Typewriter Effect (打字效果)effect: true# loop (循環打字)loop: true# source調用第三方服務# source: false 關閉調用# source: 1  調用搏天api的隨機語錄（簡體）# source: 2  調用一言網的一句話（簡體）# source: 3  調用一句網（簡體）# source: 4  調用今日詩詞（簡體）# subtitle 會先顯示 source , 再顯示 sub 的內容source: false# 如果有英文逗號' , ',請使用轉義字元 &#44;# 如果有英文雙引號' " ',請使用轉義字元 &quot;# 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住# 如果關閉打字效果，subtitle只會顯示sub的第一行文字sub:# Loading Animation (加載動畫)
preloader: false# aside (側邊欄)
# --------------------------------------aside:enable: truehide: falsebutton: truemobile: true # display on mobileposition: right # left or rightcard_author:enable: truedescription:button:enable: trueicon: fab fa-githubtext: Follow Melink: https://github.com/xxxxxxcard_announcement:enable: truecontent: This is my Blogcard_recent_post:enable: truelimit: 5 # if set 0 will show allsort: date # date or updatedsort_order: # Don't modify the setting unless you know how it workscard_categories:enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/falsesort_order: # Don't modify the setting unless you know how it workscard_tags:enable: truelimit: 40 # if set 0 will show allcolor: falsesort_order: # Don't modify the setting unless you know how it workscard_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allsort_order: # Don't modify the setting unless you know how it workscard_webinfo:enable: truepost_count: truelast_push_date: truesort_order: # Don't modify the setting unless you know how it works# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:site_uv: truesite_pv: truepage_pv: true# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:enable: falsepublish_date:# Aside widget - Newest Comments
newest_comments:enable: falsesort_order: # Don't modify the setting unless you know how it workslimit: 6storage: 10 # unit: mins, save data to localStorageavatar: true# You can only choose one, or neithervaline: falsegithub_issues:enable: falserepo:disqus:enable: falseforum:api_key:twikoo: falsewaline: false# Bottom right button (右下角按鈕)
# --------------------------------------# Change font size
change_font_size: false# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:enable: false# The text of a buttondefault: 繁# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）defaultEncoding: 2# Time delaytranslateDelay: 0# The text of the button when the language is Simplified ChinesemsgToTraditionalChinese: '繁'# The text of the button when the language is Traditional ChinesemsgToSimplifiedChinese: '簡'# Read Mode (閲讀模式)
readmode: true# dark mode
darkmode:enable: true# Toggle Button to switch dark/light modebutton: 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: falseautoChangeMode: 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/neutraltheme: 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: flaticons: trueborder_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
# --------------------------------------# Artitalk
# see https://artitalk.js.org/
artitalk:appId:appKey:option:# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:enable: falseexclude:# - xxxx# - xxxx# Inject the css and script (aplayer/meting)
aplayerInject:enable: falseper_page: true# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:enable: falseposition: bottom-leftbg_light: '#49b1f5' # The background color of Toast Notification in light modebg_dark: '#121212' # The background color of Toast Notification in dark mode# https://instant.page/
# prefetch (預加載)
instantpage: false# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:enable: falsefield: site # site/post# Lazyload (圖片懶加載)
# https://github.com/verlok/lazyload
lazyload:enable: falsepost: /img/loading.gif# PWA
# See https://github.com/JLHwung/hexo-offline
# ---------------
# pwa:
#   enable: false
#   manifest: /pwa/manifest.json
#   apple_touch_icon: /pwa/apple-touch-icon.png
#   favicon_32_32: /pwa/32.png
#   favicon_16_16: /pwa/16.png
#   mask_icon: /pwa/safari-pinned-tab.svg# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta: true# Add the vendor prefixes to ensure compatibility
css_prefix: true# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:head:# - <link rel="stylesheet" href="/xxx.css">bottom:# - <script src="xxxx"></script># CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:# mainmain_css: /css/index.cssjquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.jsmain: /js/main.jsutils: /js/utils.js# pjaxpjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js# commentsgitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.jsgitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.cssvaline: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.jsdisqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.jsdisqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.cssutterances: https://utteranc.es/client.jstwikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.jswaline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js# shareaddtoany: https://static.addtoany.com/menu/page.jssharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.jssharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css# searchlocal_search: /js/search/local-search.jsalgolia_js: /js/search/algolia.jsalgolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.jsalgolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css# mathmathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.jskatex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.csskatex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.jskatex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.cssmermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js# countbusuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js# background effectcanvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.jscanvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.jscanvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.jslazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.jsinstantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.jstyped: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.jspangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js# photofancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.cssfancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.jsmedium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js# snackbarsnackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.csssnackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js# effectactivate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.jsfireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.jsclick_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.jsClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js# fontawesomefontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css# Conversion between Traditional and Simplified Chinesetranslate: /js/tw_cn.js# justifiedGalleryjustifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.jsjustifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css# aplayeraplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.cssaplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.jsmeting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js# Prism.jsprismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.jsprismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.jsprismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.jsartitalk: https://cdn.jsdelivr.net/npm/artitalk

到此我们的主题已经切换成功了！你学废了嘛！

注意

注意：如果你在gitee上没有成功出现，就记得在gitee网站上进行更新（不知道的话，看系列文中的第一篇）

如果你想要在gitee网站上能够也更新成功，进的使用cmd命令在根目录下输入 hexo d命令，上传代码到码云

交流群

如果有任何搭建问题，欢迎大家来询问

十分钟教你搭建一个漂亮的博客（二--主题的修改）相关推荐

30分钟利用Typecho搭建一个自己的博客网站
简介 Typecho 是国内开发者开发的一款开源免费的动态博客程序,可以运行在基于 PHP 环境的各种平台上.但是却没有详细的安装文档.很是蛋疼. 下面是我的安装步骤. 首先得有一个服务器和域名. 然 ...
手把手教你搭建自己的个人博客（图文教程）
「建立自己的狗窝」上篇文章刚写了一篇平时写博客的重要性,下面我回复说:[过两天我在发一篇如何建立自己的个人博客教程,有兴趣的点赞吧]得到了不少赞,看了还是很多小盆友想建立一个属于自己的博客网站 ...
怎么搭建一个自己的博客？
怎么搭建一个自己的博客? 总共几个步骤买一个服务器买一个域名服务器环境配置域名跟服务IP连接然后就可以直接访问了 1.买服务器 VPS 虚拟专用服务器,就是利用虚拟化技术(如KVM.Xen. ...
10分钟搭建一个免费个人博客网站
一个程序员怎么能不拥有自己的博客,本文让10分钟快速搭建部署好自己的博客准备工作有Gitee账号有安装git 会 markdown 编写文档 Node.js 版本 >= 8.6 博客采用V ...
(超详细）15分钟利用coding搭建你的hexo博客网站
一.前期准备工作 1.安装Git 点击下载点击之后即可下载,可能速度会有些慢. 所有的工具我都会打包好放到下方 2.安装Node.js 点击下载安装好在桌面右键git bash here 输入np ...
Github Page+Hexo搭建炫酷个人博客（主题优化基础篇）
上一篇已经把博客搭建好了,这一篇来进行博客的主题优化讲解. 文章目录配置博客信息安装主题配置主题 Scheme 设置菜单设置侧栏设置头像(旋转效果) 设置RSS 新建页面设置代码高亮主题 ...
所见即搜，3分钟教你搭建一个服装搜索系统！
摘要:用MindSpore+Jina,基于Fashion-MNIST Dataset搭建的服装搜索系统. 引言各位算法萌新们,是不是经常训练了模型却不知道如何部署和应用?或者只会调参但不会前端后端所 ...
10分钟教你搭建一个可公网访问的私人网盘，和付费网盘彻底say goodbye~
今天偶然间看一个私人网盘的搭建,给大家一起分享一下.我这边是在windows环境下运行的. 检查配置首先我们需要检查一下配置,需要本地安装有JDK,没有的话自行下载安装.如下所示则表示已经安装. 运 ...
十分钟教你打造一个微信语音点歌系统
最近在做一个微信项目,接触到了微信公众平台.通过公众平台可以很方便的搭建一个功能完善的移动应用.昨天发现:开发者可使用手机号来申请接口测试帐号,体验高级接口. 这篇文章的应用将使用到高级接口中的语音识 ...

十分钟教你搭建一个漂亮的博客（二--主题的修改）

总体效果

框架的选择（butterfly）

主题的下载

根据自己需要修改theme下面的butterfly的_config.yml

注意

交流群

十分钟教你搭建一个漂亮的博客（二--主题的修改）相关推荐

最新文章

热门文章