修改主题配置前，将主题默认配置复制到博客根目录

主题根目录下执行

1
cp themes/fluid/_config.yml _config.fluid.yml

通过修改_config.fluid.yml主题配置完成对全局配置的覆盖

添加博客运行时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div>
  <span id="timeDate">正在载入天数...</span>
  <span id="times">载入时分秒...</span>
  <script>
  var now = new Date();
  function createtime(){
      var grt= new Date("08/17/2020 00:00:00");
      now.setTime(now.getTime()+250);
      days = (now - grt ) / 1000 / 60 / 60 / 24;
      dnum = Math.floor(days);
      hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
      hnum = Math.floor(hours);
      if(String(hnum).length ==1 ){
          hnum = "0" + hnum;
      }
      minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
      mnum = Math.floor(minutes);
      if(String(mnum).length ==1 ){
                mnum = "0" + mnum;
      }
      seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
      snum = Math.round(seconds);
      if(String(snum).length ==1 ){
                snum = "0" + snum;
      }
      document.getElementById("timeDate").innerHTML = "🚀已持续航行&nbsp"+dnum+"&nbsp天";  
      document.getElementById("times").innerHTML = hnum + "&nbsp时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }
  setInterval("createtime()",250);
  </script>
</div>

添加RSS链接

安装hexo-generator-feed插件
npm install hexo-generator-feed --save

在全局配置文件追加：

1
2
3
4
5
6
7
8
#Extensions
plugins:
    hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20

展示位置随意，比如放在博客底部信息里，在主题配置项footer.content里追加：

1
<a href="https://blog.kevinchu.top/atom.xml" target="_blank" rel="nofollow noopener"><i class="iconfont icon-rss"></i>RSS</a>

替换mac风格代码块

在主题文件themes\fluid\source\css目录下新建样式文件，如macpanel.styl，内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.highlight
   background: #21252b
   border-radius: 5px
   box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
   padding-top: 30px

   &::before
     background: #fc625d
     border-radius: 50%
     box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
     content: ' '
     height: 12px
     left: 12px
     margin-top: -20px
     position: absolute
     width: 12px

修改主题配置文件,找到custom_css配置项，引入刚刚新建的样式文件（此处引入.styl文件无需加后缀）：

1
2
custom_css:
 - /css/macpanel

找到code.highlightjs配置项，将代码高亮风格修改暗色风格（dark系列），如：

1
2
3
4
5
6
highlightjs:
  # 在链接中挑选 style 填入
  # Select a style in the link
  # See: https://highlightjs.org/static/demo/
  style: "github dark dimmed"
  style_dark: "dark"

添加文章划入动画

添加js

主题js目录，新建screollAnimation.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const cards = document.querySelectorAll('.index-card')
if (cards.length) {
  document.querySelector('.row').setAttribute('style', 'overflow: hidden;')
  const coefficient = document.documentElement.clientWidth > 768 ? .5 : .3
  const origin = document.documentElement.clientHeight - cards[0].getBoundingClientRect().height * coefficient

  function throttle(fn, wait) {
    let timer = null;
    return function () {
      const context = this;
      const args = arguments;
      if (!timer) {
        timer = setTimeout(function () {
          fn.apply(context, args);
          timer = null;
        }, wait)
      }
    }
  }

  function handle() {
    cards.forEach(card => {
      card.setAttribute('style', `--state: ${(card.getBoundingClientRect().top - origin) < 0 ? 1 : 0};`)
    })
    console.log(1)
  }


  document.addEventListener("scroll", throttle(handle, 100));
}

添加css

主题css文件夹，新建`scrollAnimation.class

1
2
3
4
5
6
7
8
9
10
.index-card {
  transition: all 0.5s;
  transform: scale(calc(1.5 - 0.5 * var(--state)));
  opacity: var(--state);
  margin-bottom: 2rem;
}

.index-img img {
  margin: 20px 0;
}

修改主题配置文件

1
2
3
4
5
6
7
8
9
# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js: 
  - /js/scrollAnimation.js

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css: 
  - /css/scrollAnimation.css

主题背景固定和毛玻璃底页

背景固定

注入背景容器

主题scripts文件夹,新建injector.js

1
2
3
const { root: siteRoot = "/" } = hexo.config;
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register("body_end",`<script src="${siteRoot}js/backgroundize.js"></script>`);

背景替换

主题source/js目录新建backgroundize.js

1
2
3
4
5
6
7
8
9
10
11
 document
  .querySelector('#web_bg')
  .setAttribute('style', `background-image: ${document.querySelector('.banner').style.background.split(' ')[0]};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);

document
  .querySelector("#banner")
  .setAttribute('style', 'background-image: url()')

document
  .querySelector("#banner .mask")
  .setAttribute('style', 'background-color:rgba(0,0,0,0)')

毛玻璃

透明背景

修改主题配置文件

1
2
3
4
# 主面板背景色
# Color of main board
board_color: "#ffffff80"
board_color_dark: "#00000080"

毛玻璃滤镜

主题css文件夹新建cloudedGlass.css

1
2
3
4
#board {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

修改主题配置文件

1
2
3
4
# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css: 
  - /css/cloudedGlass.css