Hexo-Fluid主题美化

效果预览：https://bynote.cn

我是一个十分纠结的人，以前用的butterfly主题，界面、功能、视觉都非常强悍和强大的主题，使用的人非常多，但是我不喜欢内容页面的宽度，我又不会调，直到又一天我看到了fluid主题，一下子就心动了，马上开始测试，不知道为什么，新建页面的评论无法开启，直接给page上评论代码都不行，在lantyou里开启了评论也不行，只有自带的关于页才又评论，我蒙蔽了，干脆用about页面改其他页面吧！剩下的就是美化了，在不改动源文件的前提下，美化修改，各种文字颜色和链接颜色主题里面自带的可以修改的本文不在提。本文不涉及主题自带颜色修改。

一、使用css/js引入的方法

1.新建css或者js文件

我们以css为例，在themes\fluid\source\css\文件夹下新建一个文本文档，找到一段可用的css美化代码，复制粘贴的新建的文档里面，然后把文档的.txt修改成.css，命好名字。
然后打开主题配置文件/themes/fluid/_config.yml找到“custom_js”和“custom_js”下面进行引入。

2.把新建的css文件引入主题

custom_js:
  - /js/diy/timeDate.js
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #/APlayer#/APlayer依赖
  - //cdn.jsdelivr.net/gh/metowolf/Metingjs@1.2/dist/Meting.min.js  #/APlayer依赖
# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - /css/diy/shubiao.css #鼠标指针
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css   #/APlayer依赖

二、在主题源文件中引入美化特效

例如：
在网站页脚插入运行时间

这大动源文件的方法存在一定风险性，主题升级后还要这样去修改一遍，太繁琐，所以本文使用第一中方法，即使以后升级主题也省事。

三、美化开始

JS类特效

1.头部上升的气泡

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/qipao.js #头部上升气泡

2.动态彩带

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/caidai.js # 动态彩带

3.静态彩带点击改变形状

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/jingtaisidai.js # 静态彩带

4.动态黑色线条

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiantiao.js # 动态黑色线条

5.小雪花飘落

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxuehua.js # 小雪花飘落

6.樱花飘落

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/yinghua.js # 樱花飘落

7.鼠标跟随小星星

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxingxing.js # 鼠标跟随小星星

8.页脚加入运行时间

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/timeDate.js # 运行时间

9.大雪花飘落

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/daxuehua.js # 大雪花飘落

10.鼠标点击出字

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/dianjichuzi.js # 鼠标点击出字

11.鼠标点击出小爱心❤

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/love.js # 鼠标点击出小爱心❤

12.鼠标点击出爆炸效果

//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/boom.js # 鼠标点击爆炸效果
//cdn.bootcss.com/animejs/2.2.0/anime.min.js #依赖

CSS类

1.头部打字机颜色效果渐变

//cdn.jsdelivr.net/gh/bynotes/texiao/source/css/toubudaziji.css # 头部打字机颜色效果渐变

2.头部打字机颜色

//cdn.jsdelivr.net/gh/bynotes/texiao/source/css/daziyanse.css# 头部打字机颜色

3.滚动条颜色

//cdn.jsdelivr.net/gh/bynotes/texiao/source/css/gundongtiao.css# 滚动条颜色

4.鼠标指针

//cdn.jsdelivr.net/gh/bynotes/texiao/source/css/shubiao.css# 鼠标指针

本文会持续更新…