Hexo美化
本文以 butterfly 主题为例。
是否需要头图
修改主题配置文件：disable_top_img。
- true 就是所有页面都没有头图（全部一图流）。
- false 就是所有页面都有头图，但是可以可以通过设置
index_img单独给首页设置头图透明transparent。
每页单独配置背景
修改 [Blogroot]\themes\butterfly\layout\includes\layout.pug
if theme.background
- #web_bg
+ if page.background
+ #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
+ else
+ #web_bg- 设置首页和文章页同一背景：修改主题配置文件中
background即可，不需要设置文章 md 文件的文章属性Front-matter中background。 - 设置首页和文章页不同背景：单独设置文章 md 文件的文章属性
Front-matter中background配置项单独配置页面背景，可为颜色、可为本地图片、可为网络图片。不写或留空则使用主题配置文件中的默认背景。
设置背景色为浅灰色：
background: "#F6F6F6"背景图片模糊
修改 [Blogroot]\themes\butterfly\source\css\_global\index.styl，在 #web_bg 下加入
webkit-filter: blur(3px);
filter: blur(3px); 或者单独引入 inject，在 css 中写入
/*背景图片模糊，但是有延迟，要等图片加载完*/
#web_bg {
-webkit-filter: blur(3px);
filter: blur(3px);
}去除首页头图居中的网站标题
设置 themes\butterfly\layout\includes\header\index.pug 文件中
header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
!=partial('includes/header/nav', {}, {cache: true})
if top_img !== false
if is_post()
include ./post-info.pug
else if is_home()
#site-info
h1#site-title= site_title
if theme.subtitle.enable
- var loadSubJs = true
#site-subtitle
span#subtitle
if(theme.social)
#site_social_icons
!=partial('includes/header/social', {}, {cache: true})
#scroll-down
else
#page-site-info
h1#site-title=null设置文章标题居中
无头图时
在 themes\butterfly\source\css\_layout\head.styl 文件中 // for not top_img 下的 #post-info 中增加一行 text-align: center
// for not top_img
#post
& > #post-info
margin-top: -20px
margin-bottom: 30px
text-align: center同时，增加 margin-top: -20 px 可让标题靠上一点，减少留白。
有头图时
在 themes\butterfly\source\css\_layout\head.styl 文件中 #page-header 下的 #post-info 中增加一行 `text-align: center
#post-info
position: absolute
bottom: 30px
padding: 0 8%
width: 100%
text-align: center设置文章头图高度
修改 themes\butterfly\source\css\_layout\head.styl 文件中 // post 下的 &.post-bg 的 height
// post
&.post-bg
height: 250px设置文章页脚高度、颜色
修改 themes\butterfly\source\css\_layout\footer.styl 文件中 #footer-wrap 。
#footer-wrap
position: relative
padding: 20px 20px
color: var(--light-grey)
text-align: center删除首页头图位置向下箭头
删除 themes\butterfly\layout\includes\header\index.pug 文件以下代码即可：
#scroll-down
i.fas.fa-angle-down.scroll-down-effects设置页脚背景透明
设置主题配置文件中 footer_bg: transparent 即可。
设置头图、页脚黑色半透遮罩
为防止背景图颜色过谈时，头图文字、页脚文字看不到，建议设置主题配置文件中 mask 均为 true 。
mask:
header: true
footer: true设置图片圆角、边框
打开 themes\butterfly\source\css\_layout ，在 img 下添加如下代码
img
border-radius: 10px;
border: 1px #B3D0CE dashed外挂css、js
在butterfly的独立配置文件_config.butterfly.ym中，找到inject，添加head中添加外挂css路径，bottom中添加外挂js路径
inject:
head:
- <link rel="stylesheet" href="/css/XXX.css">
# 自定义css
# - <link rel="stylesheet" href="/css/style.css?1">
# 静态文件后面加个 ?任意内容 可以在每次更新之后用户自动重新请求.
# 例如添加 ?1 ,在修改此文件后改成 ?2 ,用户访问你的网站时,不会使用本地的缓存,而是请求新的内容。没修改的话就不用动。
bottom:
- <script src="/js/XXX.js"></script>
# 自定义js
# - <script src="/js/script.js?1"></script>
# 引入多个文件就直接往下复制一行改一下文件名即可，如下：
# - <script src="/js/script1.js?1"></script>
# - <script src="/js/script2.js?1"></script>
彩虹加载进度条
引入pace.css
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #e90f92;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #e90f92;
border-left-color: #e90f92;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
/* 在下面修改进度条外观 */
.pace .pace-progress {
background: #1ef4fbec; /*进度条颜色*/
height: 3px;/* 进度条厚度 */
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1ef4fbce, 0 0 5px #1ecffbd0; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1edafbe5; /*上边框颜色*/
border-left-color: #1ef4fbec; /*左边框颜色*/
}
引入pace.min.js，
PACE — Automatic page load progress bars
在线引入
- <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>本地引入
将以上js文件下载到source/js文件夹中，
- <script src="/js/pace.min.js"></script>本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 zhrq95！
相关推荐
2025-09-11
Hexo插件重装
本文讲述如何通过重装Hexo插件的三个主要文件来重置Hexo环境
2025-09-11
Hexo的Markdown渲染器对比
对比Hexo的几种常用markdown渲染器及其特点
2025-09-11
Hexo跳过渲染某些页面
文章介绍了如何在Hexo配置中跳过渲染特定页面的设置方法
2025-09-11
Hexo设置段落缩进2字符
Hexo博客中通过CSS设置段落首字符缩进2个字符
2025-09-11
Hexo安装指南
Hexo安装和配置的详细指南，涵盖了从安装Hexo到主题配置和部署的步骤
2025-09-11
Hexo文章管理（使用Obsidian）
使用Obsidian管理Hexo文章，包括文件结构配置和推荐插件信息
评论