Fluid主题美化-持续更新

本文最后更新于:2020年11月23日 上午

一款 Material Design 风格的主题 An elegant Material-Design theme for Hexo

  我是一个十分纠结的人,以前用的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# 鼠标指针

本文会持续更新…

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!