阅读了官方文档 和 TRHX‘S BLOG 等文档/文章后，搜集了一部分教程
自定义鼠标指针样式
在 \themes\material-x\source\less\_base.less 文件 body 样式里写入如下代码：
123456body { cursor: url(https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur),auto; background-color: @theme_background; ...... ......}
鼠标指针可以用 Axialis CursorWorkshop 这个软件自己制作，不同主题具体放的文件有所不同，确保在博客主体 body 的 CSS 文件中即可，其中的鼠标指针链接可替换成自己的，首先尝试加载 https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur ，如果该文件不存在或由于其他原因无效，那么 auto 会被使用，也就是自动默认效果，图片格式为.ico、.ani、.cur，建议使用.cur，如果使用.ani或者其他格式无效，原因是浏览器兼容问题，请阅读参考文档或者参考以下兼容表：
浏览器最低版本格式Internet Explorer6.0.cur / .aniFirefox (Gecko), Windows and Linux1.5 (1.8).cur / .png / .gif / .jpgFirefox (Gecko)4.0 (2.0).cur / .png / .gif / .jpg / .svgOpera——Safari (Webkit)3.0 (522-523).cur / .png / .gif / .jpg
拓展阅读：《CSS 鼠标样式 cursor属性》 （By：歪脖先生的博客）
打字特效（蓝色）
123456
效果 👇
没有伞的孩子必须努力奔跑！
|
网站访客地理信息
在.\themes\material-x\layout\layout.ejs中加入以下代码：
12
效果 👇
天气挂件
JS代码，用于将插件插入到网页内
123456789101112131415
插件网页版链接，用于嵌入到iframe或webview中
1
效果：见本博客页面左上角
背景添加动态线条效果
在 .\themes\hexo-theme-spfk\layout\layout.ejs文件中添加如下代码：
1234
其中：
color：表示线条颜色，三个数字分别为(R,G,B)，默认：（0,0,0）opacity：表示线条透明度（0~1），默认：0.5count：表示线条的总数量，默认：150zIndex：表示背景的z-index属性，css属性用于控制所在层的位置，默认：-1
人体时钟
无意中发现了个有趣的人体时钟 HONE HONE CLOCK，作者是个日本人，点击此处访问作者博客，点击此处在作者原博客上查看动态样式，点击此处查看动态大图，如果你的博客上有合适的地方，加上一个人体时钟会很有趣的
实现代码：
12345
背景动态彩带效果
样式一是鼠标点击后彩带自动更换样式，样式二是飘动的彩带：
实现方法：在 \themes\material-x\layout\layout.ejs 文件的body前面添加如下代码：
12
12
樱花特效
canvas樱花飘落动画特效
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
或者
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
其他：
H5樱花掉落背景动画特效 ：https://www.17sucai.com/pins/36303.html
添加背景代码雨特效
新建 DigitalRain.js，写入以下代码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657复制window.onload = function(){ //获取画布对象 var canvas = document.getElementById("canvas"); //获取画布的上下文 var context =canvas.getContext("2d"); var s = window.screen; var W = canvas.width = s.width; var H = canvas.height; //获取浏览器屏幕的宽度和高度 //var W = window.innerWidth; //var H = window.innerHeight; //设置canvas的宽度和高度 canvas.width = W; canvas.height = H; //每个文字的字体大小 var fontSize = 12; //计算列 var colunms = Math.floor(W /fontSize); //记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i
在主题文件的相关css文件中（以 Material X 1.2.1 主题为例，在\themes\material-x-1.2.1\source\less_main.less 文件末尾）添加以下代码：
12345678910复制canvas { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: -1;}
然后在主题的 layout.ejs 文件中引入即可：
123复制
最终效果：
自定义一个不使用主题模板渲染的独立页面
有时候我们需要新建一个独立的页面，这个页面不使用主题的渲染，具有自己独立的样式，可以放一些自己的作品，相册什么的，以下就介绍这种独立页面的实现方法。
方法一：
使用 Hexo 提供的跳过渲染配置，在博客根目录的配置文件 _config.yml 里找到 skip_render 关键字，在后面添加想要跳过渲染的页面，比如我们创建 \source\about\index.html， 配置文件填写：skip_render: about\**，那么就表示 \source\about 里所有的文件将跳过渲染，里面的文件将会被直接复制到 public 文件夹，此时就会得到一个独立的 about 页面；官方文档：https://hexo.io/docs/configuration
方法二：
在文章头部的 Front-matter 里添加配置 layout: false 来跳过渲染配置，比如我们要使 about 页面跳过渲染，创建 \source\about\index.md，将这个页面的相关 HTML 代码写进.md文件并保存，然后在 index.md 的头部写入：
123456789---layout: false---{% raw %}这里是 HTML 代码{% endraw %}
PS：Front-matter 是 .md 文件最上方以 — 分隔的区域，用于指定个别文件的变量，官方文档：https://hexo.io/docs/front-matter
效果可以对比我的博客主页和关于页面
更改本地预览端口号
hexo博客在执行 hexo s 进行本地预览的时候，默认端口号是4000，当该端口号被占用时会报错 Error: listen EADDRINUSE 0.0.0.0:4000 ，此时可以关闭占用该端口的进程，也可以更换端口号，更换端口号可以通过以下两种方法实现：
方法一：在根目录的 _config.yml 配置文件内加上如下代码更改 hexo s 运行时的端口号：
1234server: port: 5000 compress: true header: true
方法二：通过 hexo server -p 5000 命令来指定端口，这种方法只是本次执行有效
其他网页小挂件推荐
http://abowman.com/ 里面有很多有趣的小挂件，可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物，能根据你的鼠标指针位置移动，直接复制代码就可以用http://www.revolvermaps.com/ 它提供网站访客地理信息，可以以2D、3D等形式显示http://www.amazingcounters.com/ 免费网站计数器，有非常多的样式供你选择，可以设置计数器初始数值，可以设置按访问量计数，也可以按独立访问者计数https://www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件，可以为你的网站添加一项简洁美观的天气预报功能，并自动适配PC和手机上的浏览