Hexo从零开始配置-魔改篇

为什么会分三篇来写呢【还不是为了大家看着方便嘛】其实我也是在水文章，这一下子多出两篇不是显得多不是

Heo版加载页面

此部分参考安知鱼 - 生活明朗 万物可爱 (anzhiy.cn)的相关文章，暂时保证hexo4.4.x版本正常，新版本4.5.x暂时未解决相关问题

替换样式

将themes/butterfly/source/css/_layout/loading.styl替换为以下代码，其中颜色代码注意换成自己的

if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: white;
    z-index: 1001;
    opacity: 1;
    transition: .3s;
  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;
  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

替换pug结构

替换themes/butterfly/layout/includes/loading/loading.pug, 其中图片注意换成自己的.

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    div.loading-img
    .loading-image-dot

添加自定义CSS

.loading-img {
  background: url(https://blog.gmcj0816.top/img/SeriousWission_TouXiangPic.jpg) no-repeat center center;
  background-size: cover;
}

主页双文章页面

此部分参考冰老师文章

命令行npm安装插件

npm i hexo-butterfly-article-double-row --save

编辑配置文件

在网站配置文件_config.yml新增以下项

butterfly_article_double_row:
  enable: true

添加自定义css文件

#pagination {
  width: 100%;
  margin: auto;
}

---

因为太忙，待续吧，很多坑都没填完呢