有关Fluid主题的优化

下面直接进入主题

一、【点击弹出爱心】

1.在hexo\blog\themes\fluid\source\js目录下新建一个js文件为click-love.js
代码如下：

! function (e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function () {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

2.在hexo\blog\themes\fluid\layout_partials\footer.ejs文件中引入刚才创建的js文件
代码如下：

<script type="text/javascript" src="/js/click-love.js"></script>

二、【宠物插件】

1.在命令指令\hexo\blog路径下 ，输入如下指令：

npm install --save hexo-helper-live2d

2.安装好live2d插件后，可以安装合适的宠物了，宠物可以在网上搜寻，下面就随便举例一个宠物的安装,在命令指令下输入如下代码：

npm install live2d-widget-model-chitose

3.下载好后，就可以在路径hexo\blog\下的_config.yml文件里面，在代码的最下面添加如下代码：

live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
#    这是一个挺高帅的小哥
    use: live2d-widget-model-chitose
display:
 position: right
 width: 150
 height: 300
#    水平位置
#    hOffset: 0
#    垂直位置
 vOffset: -100
mobile:
 show: true

最后命令指令执行hexo c && hexo g && hexo s ,进入博客页面后刷新一下页面就可以看到了。

三、【首页文章滑入效果】

1.在hexo\blog\themes\fluid\source\css目录下新建一个css文件为huaru.css,同时也在主题下source\js目录下新建huaru.js文件，文件名可自定义。
huaru.css代码如下：

.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;
}

huaru.js代码如下：

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));
}

2.以上创建的文件就相当于是自定义的css，js文件，而我们的fluid主题是可以配置外部的css，js文件的，找到fluid主题下的_config.yml文件，找到如下区域：

# 指定自定义 .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/diy/timeDate.js

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

3.将刚才创建好的huaru.css和huaru.js在此处引用，如下所示：

# 指定自定义 .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/diy/timeDate.js
  - /js/huaru.js #首页文章滑入效果

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - /css/huaru.css #首页文章滑入效果

4.最后保存，在博客目录终端下运行 hexo c && hexo g && hexo d ,待部署成功后，即可看到首页文章滑入效果。

四、【文章代码引入mac风格】

1.fluid主题的代码块风格简朴，如果想要好看一点的风格，可以试试这个mac风,这个功能引入方式与标题三类似，先在fluid主题source\css文件下新建code_mac.css文件，输入代码如下：

.hljs-comment, .hljs-quote {
  color: #ff6262;
  font-family: auto;
  font-style: normal;
}
figure.highlight {
  background: #838383;
  border-radius: 5px;
  padding-top: 30px;
  box-shadow: 0 5px 10px #a1a1a1;
}
[data-user-color-scheme='dark'] figure.highlight {
  background: #000;
}
/* 该伪元素用于展示代码语言,若不需要可删除 */
figure.highlight::before {
  content: attr(data-type);
  z-index: 999;
  color: #ff8d33;
  display: block;
  width: 100%;
  position: absolute;
  top: 2px;
  text-align: center;
  font-weight: 600;
}
figure.highlight::after {
  background: #fc625d;
  border-radius: 100%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: '';
  height: 12px;
  width: 12px;
  position: absolute;
  top: 9px;
  left: 12px;
}
.hljs {
  background-color: #00000000;
}
/* 代码块颜色 */
figure.highlight tr {
  background-color: #f9fffa;
}
[data-user-color-scheme='dark'] .markdown-body table tr {
  background-color: #25272d;
}
figure.highlight > table {
  border-radius: 0 0 5px 5px;
}
.gutter {
  background-color: #f9fffa;
}
[data-user-color-scheme='dark'] .gutter {
  background-color: #25272d;
}

2.同标题三，在对应位置引入刚才创建的文件即可，如下所示：

# 指定自定义 .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/diy/timeDate.js
  - /js/huaru.js #首页文章滑入效果

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - /css/huaru.css #首页文章滑入效果
  - /css/code_mac.css #代码块样貌mac风

3.最后保存，运行 hexo c && hexo g && hexo d ,待部署成功后，即可看到文章代码mac风格。