本博客的主题已由 Fluid 改为 Butterfly, 部分功能可能失效，请注意！

Hexo + Fluid 美化

Fluid 简介

Fluid 是基于 Hexo 的一款 Material Design 风格的主题，由 Fluid-dev 负责开发与维护。

主题 GitHub: https://github.com/fluid-dev/hexo-theme-fluid

预览网站：

Fluid 主题安装

方式一

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

提示：如果 npm 速度慢或者安装失败，可以通过淘宝镜像安装，即使用如下命令

1
cnpm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 config.yml 内容复制进去。

方式二

下载 最新 release 版本 解压到 Hexo 博客目录中的 themes 目录，并将解压出的文件夹重命名为 fluid。

指定 Fluid 主题

如下修改 Hexo 博客目录中的 _config.yml：

1
2
theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

Fluid 美化

基础配置修改

对于 Fluid 主题的基础配置修改，在 官方配置指南 以及 theme/fluid/_config.yml 或者 _config.fluid.yml 中有详细的提示说明，这里不再赘述。

注意

本文中的 " 博客配置 " 指的 Hexo 博客目录下的 _config.yml，" 主题配置 " 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ，注意区分

添加网站运行时间

页脚添加网站运行时间，只需要在主题配置中的 footer: content 添加：

1
2
3
4
5
6
7
8
footer:
  content: '
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>
  '

之后在主题目录下创建 source/js/duration.js，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var now = new Date();
function createtime() {
    var grt= new Date("03/03/2021 12: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 = "本站已安全运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);

将建站时间修改为你自己的建站时间，即可在页脚加入网站运行时间。

添加一言

在主题配置 _config.yml 中找到 custom_head ，修改如下：

1
2
3
4
custom_head: '
    <!-- 一言 -->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
    '

修改完成之后，在任意地方添加如下代码即可获取一言

1
<p id="hitokoto">:D 获取中...</p>

添加 GitHub 日历热力图

这里提供一个简单的 API Github Chart API

直接在需要的位置添加如下 HTML 语句即可，注意将 GitHub 用户名修改为你自己的。

1
<img src="https://ghchart.rshah.org/emoryhuang" alt="emoryhuang's Github chart" />

效果如下所示：

emoryhuang's Github chart

也可以改变颜色，只需要修改为 hex 颜色代码即可

1
<img src="https://ghchart.rshah.org/409ba5/emoryhuang" alt="emoryhuang's Github chart" />
emoryhuang's Github chart

添加看板娘

向你的 Hexo 里放上一只二次元看板娘，项目地址

演示：https://l2dwidget.js.org/dev.html

模型预览：https://huaji8.top/post/live2d-plugin-2.0/

安装

在 Git Bash 中安装模块：

1
npm install --save hexo-helper-live2d

or

1
yarn add hexo-helper-live2d

配置

向 Hexo 的 _config.yml 文件添加配置，例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko  ## 更换为你的模型
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

点这里 可以查看现有的模型

在 Git Bash 中安装喜欢的模型

1
npm install 模型的包名

将包名输入位于 _config.yml 的 model.use 中。

1
2
hexo clean
hexo d -g

添加背景黑色线条

背景黑色线条js代码 
1
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

将上面的代码复制，并在此目录下 themes/fluid/source/js/DynamicLine.js 创建文件，将代码全部粘贴进去。

然后在主题配置 _config.yml 中找到 custom_js 或者 custom_css，修改如下：

1
2
custom_js:
  - /js/DynamicLine.js

如果不想这么麻烦或者不需要自行修改的话，可以使用我的提供的 CDN

在主题配置 _config.yml 中找到 custom_js 或者 custom_css，修改如下：

（效果添加或去除注释 # 即可使用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
custom_js:
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/runtime.min.js # 运行时间
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js # 静态彩带
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js # 动态黑色线条
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js # 小雪花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js #樱花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js # 鼠标点击出字
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js #鼠标点击出爱心

custom_css:
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css # 滚动条颜色
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css # 头部打字机颜色效果渐变

获取源码：

将 //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.js 输入地址框即可

注意去除 .min 这是经过压缩之后的

后面类似的效果本文就不再放源码了，按上面的方法搜一下就好

添加动态彩带

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带

添加静态彩带

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js # 静态彩带

添加小雪花飘落效果

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js # 小雪花飘落

添加樱花飘落效果

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js #樱花飘落

鼠标跟随小星星

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星

鼠标点击出字

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js # 鼠标点击出字

鼠标点击出爱心

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js # 鼠标点击出爱心

滚动条颜色

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css # 滚动条颜色

头部打字机颜色效果渐变

1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css # 头部打字机颜色效果渐变

更换鼠标指针样式






1
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针

参考

相关内容