Hexo + Fluid 美化
Hexo + Fluid 美化
本博客的主题已由 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 直接安装，进入博客目录执行命令：
npm install --save hexo-theme-fluid提示：如果 npm 速度慢或者安装失败，可以通过淘宝镜像安装，即使用如下命令
cnpm install --save hexo-theme-fluid然后在博客目录下创建 _config.fluid.yml，将主题的 config.yml 内容复制进去。
方式二
下载 最新 release 版本 解压到 Hexo 博客目录中的 themes 目录，并将解压出的文件夹重命名为 fluid。
指定 Fluid 主题
如下修改 Hexo 博客目录中的 _config.yml：
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 添加：
footer:
content: '
<div>
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script src="/js/duration.js"></script>
</div>
'之后在主题目录下创建 source/js/duration.js，内容如下：
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 ，修改如下：
custom_head: '
<!-- 一言 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
'修改完成之后，在任意地方添加如下代码即可获取一言
<p id="hitokoto">:D 获取中...</p>添加 GitHub 日历热力图
这里提供一个简单的 API Github Chart API
直接在需要的位置添加如下 HTML 语句即可，注意将 GitHub 用户名修改为你自己的。
<img src="https://ghchart.rshah.org/emoryhuang" alt="emoryhuang's Github chart" />效果如下所示：
也可以改变颜色，只需要修改为 hex 颜色代码即可
<img src="https://ghchart.rshah.org/409ba5/emoryhuang" alt="emoryhuang's Github chart" />
添加看板娘
向你的 Hexo 里放上一只二次元看板娘，项目地址
演示：https://l2dwidget.js.org/dev.html
模型预览：https://huaji8.top/post/live2d-plugin-2.0/
安装
在 Git Bash 中安装模块：
npm install --save hexo-helper-live2dor
yarn add hexo-helper-live2d配置
向 Hexo 的 _config.yml 文件添加配置，例子如下
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 中安装喜欢的模型
npm install 模型的包名将包名输入位于 _config.yml 的 model.use 中。
hexo clean
hexo d -g添加背景黑色线条
背景黑色线条js代码
!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，修改如下：
custom_js:
- /js/DynamicLine.js如果不想这么麻烦或者不需要自行修改的话，可以使用我的提供的 CDN
在主题配置 _config.yml 中找到 custom_js 或者 custom_css，修改如下：
（效果添加或去除注释 # 即可使用）
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 这是经过压缩之后的
后面类似的效果本文就不再放源码了，按上面的方法搜一下就好
添加动态彩带
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带添加静态彩带
//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.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 # 鼠标点击出爱心滚动条颜色
//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/shubiao.css #鼠标指针