博客搭建过程

基本配置

此博客采用 hexo + butterfly 搭建

butterfly版本是4.3.1

安装环境

安装nodejs: nodejs安装和环境配置-Windows七维大脑的博客-CSDN博客_nodejs安装及环境配置win7
安装git: Windows系统Git安装教程（详解Git安装过程） - 学为所用 - 博客园 (cnblogs.com)
配置SSH key
安装hexo
本地访问博客
上传到github

如果有问题，参考Hexo+github搭建个人博客 | 武师叔 (wushishu.xyz)

安装主题并配置

安装butterfly并配置参考官方文档 Butterfly - A Simple and Card UI Design theme for Hexo

在 blog 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml

即blog/themes/butterfly/_config.yml，内容复制到 _config.butterfly.yml 去

配置在 _config.butterfly.yml修改即可

魔改部分

参考hexo-butterfly魔改记录大全 | Black Flies (yyyzyyyz.cn)

我只用了其中的部分

blog/source目录下创建css文件夹，创建custom.css文件

实现H1~H6标题前带一个小图标

Butterfly 在 H1~H6 样式上使用了 Search v5 Icons | Font Awesome 上的图标，引用的是 Unicode 形式。可自行查找合适的。

beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: '#F47466'

给 H1~H6 标题前，不同大小的图标设置不同颜色

在blog/source/css/custom.css写入

/*文章页 H1~H6 样式修改*/
#content-inner.layout h1::before {
    color: #ef50a8 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #fb7061 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

实现整个头图背景页脚一图流

在blog/source/css/custom.css写入

/* 页脚透明 */
#footer{
  background: transparent!important;
}
/* 头图透明 */
#page-header{
  background: transparent!important;
}
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 
#page-header.post-bg:before {
  background-color: transparent!important;
}*/
/* bf更新到4.0.1之后，使用这个*/
#page-header:not(.not-top-img):before {
    background-color: transparent!important;
}
/*去掉页脚的模糊毛玻璃效果*/
#footer, #footer:before {
    background: transparent!important
}

/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

最后在主题配置中inject引入css文件

inject:
  head:
     - <link rel="stylesheet" href="/css/custom.css">

blog/source下新建js文件夹，新建rdmbkg.js文件

实现随机背景

在blog/source/js/rdmbkg.js写入

var backimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//获取背景图片总数，生成随机数
var bgindex =Math.floor(Math.random() * (backimg.length));
//重设背景图片
document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
//随机banner数组,图片可以换成图床链接，注意最后一条后面不要有逗号
var bannerimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//获取banner图片总数，生成随机数
var bannerindex =Math.ceil(Math.random() * (bannerimg.length-1));
//重设banner图片
document.getElementById("page-header").style.backgroundImage = bannerimg[bannerindex];

主题配置文件中引入js

inject:
  head:
  bottom:
    - <script async data-pjax src="/js/rdmbkg.js"></script>

实现效果

我的博客