博客美化篇（一）：简单JS与CSS引入

Hexo引入自定义HTML，JS，CSS

使用Injector注入器（推荐）

在博客根目录scripts文件夹下创建任意名称的js文件：

1
2
3

hexo.extend.injector.register('body_end', 
`<script src="/js/custom.js"></script>`, 
'default');

参数说明：

body_end：注入位置（可替换为head_end等）
``：注入内容
default：作用范围（全局）

官方Injector文档参考

使用css/js引入的方法

在/source/assets/js/文件夹下新建js文件，写入相应代码内容。配置好代码文件后打开主题配置文件_config.yml找到”custom_js”和”custom_css”下面进行引入。

custom_js:
  - /assets/js/custom.js
  - https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #引入外部js
custom_css:
  - /assets/css/custom.css

常用特效资源

JS特效

建议添加defer属性，defer可以实现延迟执行脚本，下载则不会被阻塞。可防止阻塞HTM 的DOM构建

<script defer src="app.js"></script>

樱花特效：https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@3.0/index/web.js
鼠标移动小星星特效：https://static.kevinchu.top/blog/assets/js/stars.js
礼花打字特效：https://static.kevinchu.top/blog/assets/js/typing-effect.js
小雪花飘落效果：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js
鼠标点击出字（defer）：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js
鼠标点击爱心（defer）：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js

鼠标点击特效（烟花特效）：纯Javascript实现鼠标点击特效（烟花特效）_js鼠标点击效果-CSDN博客

浏览器标题恶搞

var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/favicon.png");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/img/favicon.png");
        document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

CSS渲染

鼠标：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css
滚动条颜色：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css
头部打字机颜色效果渐变：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css
	// 增加下面的css,针对文章标题
	#subtitle {
     	background-size: auto !important;
	}

标题颜色,首行缩进,代码框表格框折叠:

hexo博客fluid主题美化 - Gilgamesh’s Blog (gilgamesh-lzq.github.io)

设置表格最大高度

/* 代码和表格设置最大高度，高度或宽度超出都不会显示在页面中，可以通过滚动条查看 */
figure table {
    padding: 0;
    word-break: initial;
    overflow-x: auto;
    max-height: 30em;
    overflow-y: auto !important;
}

黑暗模式作用域（适配黑暗模式）:

/* 黑暗模式作用域 */
[data-user-color-scheme='dark'] body{
    background-image: none;
}
[data-user-color-scheme='dark'] #board{
    background-image: none;
}

自定义博客字体

Web字体在线生成：Online @font-face generator — Transfonter

CSS免费在线字体格式转换器 CSS @font-face 生成器_font-face生成器-CSDN博客

两个实现了自定义字体的博客：

Hexo Fluid主题添加自定义字体 - Largesse’s blog

Hexo’s Fluid 主题私人定制（持续更新） - Eren の宇宙船 (erenship.com)

压缩静态资源

博客中有大量 HTML、CSS、JS 文件，这些文件为了阅读方便会加入许多回车和空行，但在页面解析时其实会浪费部分时间，此外如果有许多插图，也会拖慢网页加载，并占据 GitHub 仓库的存储空间。

目前有关插件有 gulp、hexo-neat、hexo-all-minifier。推荐采用集成度比较高的 hexo-all-minifier 来实现，由于在安装依赖包过程报错，本站最终采用了 hexo-neat。

1 2	`$ npm install hexo-all-minifier --save # 出现 npm ERR! code ELIFECYCLE 错误 $ npm install hexo-neat --save # 换成这个后成功安装`

在配置文件 _config.yml 中增加如下内容：

# hexo-neat
## Docs: https://github.com/rozbo/hexo-neat
neat_enable: true
# 压缩 html
neat_html:
  enable: true
  exclude:
# 压缩 css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩 js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'