2025年搭建属于自己的网站HEXO静态页（四）网站页面美化
页面美化及优化配置
配置网站介绍
去D:\it-xusir.github.io目录下修改_config.yml
# Site
title: 徐sir的it小栈
subtitle: '一起来学习'
description: '关注我的blog和我一起学it技术'
keywords: database,oracle,postgresql,mysql,system,linux,virtualization,storage
author: 徐sir
language: zh-CN
timezone: ''
配置 网站图标
去修改配置文件_config.butterfly.yml中内容
favicon: /img/xusir.ico
ico图标可以自己或让AI设计一个，去网站上缩小，然后传到\themes\butterfly\source目录下
在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net
配置top图大小
去修改配置文件_config.butterfly.yml中内容
index_top_img_height: 330px
大小自己看多大合适，我是觉得一打开网站先贴一脸图片很怪异，给改小了
配置头像
自己做个压缩格式的JPG图，然后传到\themes\butterfly\source\img目录下
去修改配置文件_config.butterfly.yml中内容
avatar:img: /img/touxiang.jpgeffect: false
配置背景图
自己做个压缩格式的JPG图，然后传到\themes\butterfly\source\img目录下
去修改配置文件_config.butterfly.yml中内容
background: /img/background.jpg
配置社交图标
去修改配置文件_config.butterfly.yml中内容
social:fab fa-github: https://github.com/it-xusir/ || Github || '#24292e'fas fa-envelope: mailto:huiyangxu@hotmail.com || Email || '#4a7dbe'
配置微信联系我按钮
在头像下配置联系我按钮，点击显示微信二维码
card_author:enable: truedescription:button: enable: enableicon: fab fa-weixintext: 微信联系我link: /img/weixin.jpg
配置页面透明
去修改配置文件_config.butterfly.yml中内容，修改以下几个选项为如下值
index_img: transparent# Add a mask to the header and footer
mask:header: falsefooter: falsefooter_img: transparent
在D:\it-xusir.github.io\themes\butterfly\source\css下新建文件transparent.styl，内容如下
@import 'nib'// 顶部图
#page-header&, &:beforebackground: transparent !important&.post-bg, &.not-home-pageheight: 280px !important#post-infobottom: 40px !important#page-site-infotop: 140px !important@media screen and (max-width: 768px)&.not-home-pageheight: 200px !important#post-infobottom: 10px !important#page-site-infotop: 100px !important.top-imgheight: 250pxmargin: -50px -40px 50pxborder-top-left-radius: inheritborder-top-right-radius: inheritbackground-position: center centerbackground-size: covertransition: all 0.3s@media screen and (max-width: 768px)height: 230pxmargin: -36px -14px 36px[data-theme='dark'] &filter: brightness(0.8)// 页脚
#footer:beforebackground-color: alpha(#FFF, .5)[data-theme='dark'] &background-color: alpha(#000, .5)#footer-wrap, #footer-wrap acolor: #111transition: unset[data-theme='dark'] &color: var(--light-grey)
增加css
inject:head:- <link rel="stylesheet" href="/css/transparent.css">
重启服务查看
配置头像禁止转动
当鼠标移到侧边栏头像上时，头像会播放旋转动效，要想禁用可以找到
themes\butterfly\source\css_layout\aside.styl文件并按照如下将原有 transform: rotate(360deg)改为transform: unset修改即可完成动效屏蔽。
.avatar-imgoverflow: hiddenmargin: 0 autowidth: 110pxheight: 110pxborder-radius: 70pximgwidth: 100%height: 100%transition: filter 375ms ease-in .2s, transform .3sobject-fit: cover&:hovertransform: unset
配置下雪特效
在目录D:\it-xusir.github.io\themes\butterfly\source\js下创建js脚本snowflake.js，内容如下
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {// 移动端不显示
}
else{document.write('<canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none"></canvas>');window && (()=>{let e = {flakeCount: 50,minDist: 150,color: "255, 255, 255",size: 2,speed: .5,opacity: .2,stepsize: .5};const t = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(e) {window.setTimeout(e, 1e3 / 60)};window.requestAnimationFrame = t;const i = document.getElementById("snow"), n = i.getContext("2d"), o = e.flakeCount;let a = -100, d = -100, s = [];i.width = window.innerWidth,i.height = window.innerHeight;const h = ()=>{n.clearRect(0, 0, i.width, i.height);const r = e.minDist;for (let t = 0; t < o; t++) {let o = s[t];const h = a, w = d, m = o.x, c = o.y, p = Math.sqrt((h - m) * (h - m) + (w - c) * (w - c));if (p < r) {const e = (h - m) / p, t = (w - c) / p, i = r / (p * p) / 2;o.velX -= i * e,o.velY -= i * t} elseo.velX *= .98,o.velY < o.speed && o.speed - o.velY > .01 && (o.velY += .01 * (o.speed - o.velY)),o.velX += Math.cos(o.step += .05) * o.stepSize;n.fillStyle = "rgba(" + e.color + ", " + o.opacity + ")",o.y += o.velY,o.x += o.velX,(o.y >= i.height || o.y <= 0) && l(o),(o.x >= i.width || o.x <= 0) && l(o),n.beginPath(),n.arc(o.x, o.y, o.size, 0, 2 * Math.PI),n.fill()}t(h)}, l = e=>{e.x = Math.floor(Math.random() * i.width),e.y = 0,e.size = 3 * Math.random() + 2,e.speed = 1 * Math.random() + .5,e.velY = e.speed,e.velX = 0,e.opacity = .5 * Math.random() + .3};document.addEventListener("mousemove", (e=>{a = e.clientX,d = e.clientY})),window.addEventListener("resize", (()=>{i.width = window.innerWidth,i.height = window.innerHeight})),(()=>{for (let t = 0; t < o; t++) {const t = Math.floor(Math.random() * i.width), n = Math.floor(Math.random() * i.height), o = 3 * Math.random() + e.size, a = 1 * Math.random() + e.speed, d = .5 * Math.random() + e.opacity;s.push({speed: a,velX: 0,velY: a,x: t,y: n,size: o,stepSize: Math.random() / 30 * e.stepsize,step: 0,angle: 180,opacity: d})}h()})()})();
}
配置_config.butterfly.yml文件inject下bottom引入snowflake.js
inject:head:- <link rel="stylesheet" href="/css/middle.css">bottom:- <script src="/js/snowflake.js"></script>
配置导航栏居中放大字体
D:\it-xusir.github.io\themes\butterfly\source\css下新建middle.css文件，内容如下
#nav .menus_items {position: absolute;width: fit-content;left: 50%;transform: translateX(-50%);
}
/*顶栏美化*/
#nav .site-page {font-size: 1.1em; /*字体大小*/letter-spacing: 2px; /*字体间距*/font-weight: 600; /*字体粗细*/
}#nav {height: 100px; /*顶栏高度调整*/
}
#page-header.nav-fixed #nav {top: -70px; /*顶栏调整空缺补齐*/
}
配置_config.butterfly.yml文件inject下head引入middle.css
inject:head:- <link rel="stylesheet" href="/css/transparent.css">- <link rel="stylesheet" href="/css/middle.css">bottom:- <script src="/js/snowflake.js"></script>
侧边公告栏添加图片
修改主题配置_config.butterfly.yml里
这里的img目录对应D:\it-xusir.github.io\themes\butterfly\source\img ，把要加载的图片放到img目录里就行。
card_announcement:enable: truecontent: 欢迎关注我的微信公众号 <img src="/img/wechat.jpg" alt="公告图片描述" style="max-width:100%;height:auto;">
关闭站点统计
我这个放在github上导致加载极慢，搜索功能受到影响，决定去掉。
修改主题配置_config.butterfly.yml里
busuanzi:site_uv: falsesite_pv: falsepage_pv: false
文章顶部添加海浪特效
修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行include ./post-info.pug和第34行else if globalPageType === 'home’之中添加如下内容（代码块第2-10行是添加的内容）
include ./post-info.pugsection.main-hero-waves-area.waves-areasvg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')defspath#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')g.parallaxuse(href='#gentle-wave', x='48', y='0')use(href='#gentle-wave', x='48', y='3')use(href='#gentle-wave', x='48', y='5')use(href='#gentle-wave', x='48', y='7')else if globalPageType === 'home'
然后新建样式D:\it-xusir.github.io\themes\butterfly\source\css\waves.styl，文件内容如下
/* 波浪css */
.main-hero-waves-area {width: 100%;position: absolute;left: 0;bottom: -40px;z-index: 5;}.waves-area .waves-svg {width: 100%;height: 4rem;}/* Animation */.parallax > use {animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;}.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;fill: #f7f9febd;}.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;fill: #f7f9fe82;}.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;fill: #f7f9fe36;}.parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;fill: #f7f9fe;}/* 黑色模式背景 */[data-theme="dark"] .parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;fill: #18171dc8;}[data-theme="dark"] .parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;fill: #18171d80;}[data-theme="dark"] .parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;fill: #18171d3e;}[data-theme="dark"] .parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;fill: #18171d;}@keyframes move-forever {0% {transform: translate3d(-90px, 0, 0);}100% {transform: translate3d(85px, 0, 0);}}/*Shrinking for mobile*/@media (max-width: 768px) {.waves-area .waves-svg {height: 40px;min-height: 40px;}}
修改主题配置_config.butterfly.yml，在inject里引入 waves.css(文件名是styl,引入的时候写css)
- <link rel="stylesheet" href="/css/waves.css">
添加后如下所示
inject:head:- <link rel="stylesheet" href="/css/middle.css">- <link rel="stylesheet" href="/css/transparent.css">- <link rel="stylesheet" href="/css/waves.css">bottom:- <script src="/js/snowflake.js"></script>