对于一个博客来说，先不考虑文章写的水平如何，我们首先考虑的应该是网站的性能，其次才是其样式，主题，特效，在保证优秀的性能的前提下，才可以适当添加一些样式来增添网站的美观度。
我们知道对于同一个网站，移动端的加载速度总是稍慢于pc端，而网站的压力越大 ，移动端落后的就越明显，这是由于浏览器的性能和设备的性能导致的。
都以为现在手机性能都很强大了，但是当我拿起我的那台火龙888，我才发现，打开一个小小的博客网站都能让我的破手机变烫，而且还时不时进不去，这让我很烦，所以我决定进而优化我的博客。
除了性能问题，我还想说手机上的特效大多数是不必要的，因为在6寸多的小屏幕上加载点击特效，背景特效这些显得很臃肿，反而显得不好看，博客在移动端的主题还是要以简约为主。
我决定关闭一些不必要的特效在手机上，但是我又想让这些特效在电脑上正常加载。
实现这些其实有很多方法，不同的主题也有不同的方案，但是有一个通用的方案，就是识别设备的宽度，如果宽度大于某个值，就视为pc，低于这个值就视为手机，然后加载对应的资源。
1. 下面是一个EJS模板：
找到你的
layout.ejs文件，你可以在<head></head>标签内添加下面代码，当然你需要自己定制它的功能。
<script>
// 在浏览器端执行的 JavaScript 代码
document.addEventListener('DOMContentLoaded', function () {
// 获取设备宽度
var deviceWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// 根据设备宽度判断加载资源
if (deviceWidth >= 768) {
// 在电脑端加载特效
var scriptElement = document.createElement('script');
scriptElement.src = '/js/your-file.js';
document.head.appendChild(scriptElement);
var linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = '/css/your-file.css';
document.head.appendChild(linkElement);
// 其他资源和特效
}
});
</script>
在这个模板中：
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener: 注册一个事件监听器，用于在文档加载完成后执行指定的函数。'DOMContentLoaded': 事件类型，表示文档的 DOM 内容已经加载完成，不包括样式表、图像等外部资源。function () { ... }: 事件发生时要执行的回调函数。
var deviceWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
window.innerWidth: 获取浏览器窗口的内部宽度。document.documentElement.clientWidth: 获取文档元素（通常是<html>元素）的客户端宽度。document.body.clientWidth: 获取<body>元素的客户端宽度。这一行代码将设备的宽度赋值给变量
deviceWidth。
if (deviceWidth >= 768) {
条件判断：如果设备宽度大于等于 768 像素，执行后面的代码块。
var scriptElement = document.createElement('script');
scriptElement.src = '/js/your-file.js';
document.head.appendChild(scriptElement);
document.createElement('script'): 创建一个<script>元素。scriptElement.src = '/js/your-file.js': 设置该<script>元素的src属性为指定的 JavaScript 文件路径。document.head.appendChild(scriptElement): 将该<script>元素添加到文档头部 (<head>)，从而加载并执行指定的 JavaScript 文件。
var linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = '/css/your-file.css';
document.head.appendChild(linkElement);
document.createElement('link'): 创建一个<link>元素。linkElement.rel = 'stylesheet': 设置该<link>元素的rel属性为 ‘stylesheet’，表示这是一个样式表链接。linkElement.href = '/css/your-file.css': 设置该<link>元素的href属性为指定的 CSS 文件路径。document.head.appendChild(linkElement): 将该<link>元素添加到文档头部 (<head>)，从而加载并应用指定的 CSS 文件。
// 其他资源和特效
- 在这个部分，你可以根据需要添加其他的资源加载和特效代码，例如创建其他元素、添加样式或执行其他 JavaScript 操作。
2. 举例：动态加载一个鼠标点击烟花特效。
下面这段代码本来是要填入layout.ejs中的
<canvas
id="fireworks"
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767"
></canvas>
<script src="https://cdn.staticfile.org/animejs/3.2.1/anime.min.js"></script>
<script src="/js/fireworks.min.js"></script>
那么我们就可以这样套用这个模板：
<script>
// 在浏览器端执行的 JavaScript 代码
document.addEventListener('DOMContentLoaded', function () {
// 获取设备宽度
var deviceWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// 根据设备宽度判断加载资源
if (deviceWidth >= 768) {
// 在电脑端加载特效
var scriptElement1 = document.createElement('script');
scriptElement1.src = "https://cdn.staticfile.org/animejs/3.2.1/anime.min.js";
document.head.appendChild(scriptElement1);
var scriptElement2 = document.createElement('script');
scriptElement2.src = '/js/fireworks.min.js';
document.head.appendChild(scriptElement2);
var fireworksCanvas = document.createElement('canvas');
fireworksCanvas.id = 'fireworks';
fireworksCanvas.style.cssText = 'position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767';
document.body.appendChild(fireworksCanvas);
}
});
</script>
像其他的js，css资源都可以套用上面的模板。