hexo个⼈博客搭建（⼆）butterfly主题配置
Butterfly主题安装⽂档(⼆)之主题配置
⼀、回顾安utterfly主题
1、在hexo项⽬根⽬录下执⾏操作clone主题
git clone -b master github/jerryc127/hexo-theme-butterfly.git themes/butterfly
2、如果沒有 pug 以及 stylus 的渲染器，还需要下载，否则在项⽬运⾏时会报错：
npm install hexo-renderer-pug hexo-renderer-stylus --save
3、修改项⽬根⽬录下的_l⽂件（称为站点配置⽂件），开启主题
# Extensions
## Plugins: hexo.io/plugins/
## Themes: hexo.io/themes/
#theme: landscape
theme: butterfly
4、升级建议
为了減少升级主题带来的不便，我们还需要做以下操作：
把主题⽂件夹中的 _l 复制到 Hexo 根⽬录下，同重命名为 _l
Hexo会⾃动合并主题中的_l和 _l⾥的配置，如果存在同名配置，会使⽤_l的配置，其优先度较⾼。
⼆、设置⽹站个⼈资料
修改根⽬录下的站点配置⽂件_l
修改⽹站各种资料，例如标题、副标题和邮箱等个⼈资料
# Hexo Configuration
## Docs: hexo.io/docs/configuration.html
## Source: github/hexojs/hexo/
# Site
title：荒岛#标题
subtitle:''#副标题
description：归途也还可爱#个性签名
keywords:
author：寻#作者
language: zh-CN #语⾔
timezone: Asia/Shanghai    #中国的时区
主题⽀持三种语⾔：
1. default(en)
2. zh-CN (简体中⽂)
3. zh-TW (繁体中⽂)
三、导航菜单
修改主题配置⽂件 _l
menu:
主页: / || fas fa-home
博⽂ || fa fa-graduation-cap:
分类: /categories/ || fa fa-archive
标签: /tags/ || fa fa-tags
归档: /archives/ || fa fa-folder-open
⽣活 || fas fa-list:
分享: /shuoshuo/ || fa fa-comments-o
相册: /photos/ || fa fa-camera-retro
⾳乐: /music/ || fa fa-music
影视: /movies/ || fas fa-video
友链: /links/ || fa fa-link
留⾔板: /comment/ || fa fa-paper-plane
#留⾔板: /messageboard/ || fa fa-paper-plane
关于笔者: /about/ || fas fa-heart
效果图
四、代码块显⽰设置
1、highlight_copy
开启代码复制功能, 修改主题配置⽂件_l：
highlight_copy:true
2、highlight_shrink
true 全部代码框不展开，需点击 > 打开
false 代码狂展开，有 > 点击按钮
none 不显⽰ > 按钮
修改主题配置⽂件_l：
highlight_shrink:false#代码框展开
3、code_word_wrap
在默认情况下，hexo-highlight 在编译的时候不会实现代码⾃动换⾏。如果你不希望在代码块的区域⾥有横向滚动条的话，可以_l开启代码换⾏：
code_word_wrap:true
4、我的_l：
# 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: 打开⽂章默认折叠代码块内容 / false: 打开⽂章默认展开代码块内容
highlight_height_limit:false# unit: px
code_word_wrap:true#是否关闭滚动条
站点配置⽂件_l：将line_number的值改为false
highlight:
enable:true
line_number:false
auto_detect:false
tab_replace:''
5、效果图：
五、本地搜索功能
1、安装插件
npm install hexo-generator-search --save
2、主题配置⽂件 _l：
# Local search
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显⽰3、效果图
六、创建⽂件夹
1、分类
hexo new page categories
会出现source/categories/index.md⽂件
2、标签
命令⾏输⼊：
hexo new page tags
会出现source/tags/index.md⽂件：
…以此类推创建⾃⼰要的⼦页⾯
七、修改副标题
1、修改主题配置⽂件_l:
# the subtitle on homepage (主⾴subtitle)
subtitle:
enable:true
网站底部代码js特效# Typewriter Effect (开启打字效果)
effect:true
# loop (循環打字)
loop:true
# source調⽤第三⽅服務
# source: false 關閉調⽤
# source: 1  調⽤搏天api的隨機語錄（簡體）
# source: 2  調⽤⼀⾔網的⼀句話（簡體）
# source: 3  調⽤⼀句網（簡體）
# source: 4  調⽤今⽇詩詞（簡體）
# subtitle 會先顯⽰ source , 再顯⽰ sub 的內容
source:false
# 如果有英⽂逗号' , '，请使⽤转义字元 ,
# 如果有英⽂双引号' " '，请使⽤转义字元 "
# 开头不允許转义字元，如需要，请把整個句⼦⽤双引号包住
# 如果关闭打字效果，subtitle只会现⽰sub的第⼀⾏⽂字
sub:
-你在抱怨什么呢
-为明天到来的事，说⼈⽣像是没有意义
-没有选择会是唯⼀的路
-这不是你⾃⼰的问题，⼈终归要好好去⽣活
2、副标题字体⼤⼩颜⾊
在\themes\butterfly\source\css_layout中的head.styl:
#site-subtitle
color: var(--white)  //此处修改为⽩⾊
font-size: 1.05em    // 字体⼤⼩
+minWidth768()
font-size: 1.40em  // 字体⼤⼩
效果图：sub句⼦轮流出现
⼋、图⽚设置
图⽚可以⽤云图⽚链接或者放在本地⽂件夹位置：/themes/butterfly/source/img 1、⽹站图标
# Favicon（⽹站图标）
favicon: /img/favicon.png
2、头像
avatar:
img: /img/avatar.jpg #图⽚路径
effect:false#头像会⼀直转圈
3、主页封⾯图⽚
# The banner image of home page
index_img: /img/background.jpg
4、⽂章详情页的顶部图⽚
当没有在front-matter设置top_img和cover的情况下会显⽰该图
修改主题配置⽂件_l：
# If the banner of page not setting, it will show the top_img
default_top_img: /img/default_top_img.jpg #我设置的本地图⽚
5、归档页顶部图⽚
#归档⼦标签页图⽚
# The banner image of archive page
archive_img: /img/archive.jpg
6、tag页顶部图
#tag页（标签页）
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (⼦標籤⾴⾯的 top_img)
tag_img: /img/tag_img.jpg
7、category页顶部图
#category页
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (⼦分類⾴⾯的 top_img)
category_img: /img/category_img.jpg
8、⽂章封⾯
每篇⽂章都可以设置⼀张封⾯，可以为每篇⽂章设置默认封⾯
也可以修改每个md⽂件的front-matter的cover属性，会覆盖上⾯的默认封⾯。修改主题配置⽂件_l：
cover:
index_enable:true#  是否展⽰⽂章封⾯
aside_enable:true
archives_enable:true
position: both # 封⾯展⽰的位置 left/right/both
# 当没有设置cover时，默认展⽰的⽂章封⾯
default_cover:
# 当配置多张图⽚时，会随机选择⼀张作为 cover. 此时写法为
-https:
-http:
-http:
-http:
-http:
-http:
9、错误页⾯
配置了该属性后会替换⽆法展⽰的图⽚
# Replace Broken Images (替換無法顯⽰的圖⽚)
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
效果图
九、图⽚懒加载
1.新增hexo-lazyload-image模块
npm install hexo-lazyload-image --save
2.在主⽬录配置⽂件_l增加配置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。