NOISE主页配置文档

Appearance

主题概述 ​

666

首页的核心部分在index.html

其中，已添加了对seo友好的页面描述、关键词及媒体截图部分

对于css及js大部分采用了本地引入的方式

引入图标 ​

官方托管（限制是一个月图标浏览量1万次） ​

可以在官网引入官方的cdn（js）文件后图标代码生效

本地引入js文件：在官网https://fontawesome.com/download 下载并引入你自己的js文件即可，可以单独设置仅自己的域名下图标生效

1726539996829

1722255972032

自托管免费版web包 ​

官方文档教程：https://docs.fontawesome.com/web/setup/host-yourself/webfonts

下载Font Awesome v6 文件放在本地

引入时直接引入all.css，如

 <link rel="stylesheet" href="fontawesome-free-6.7.2/css/all.css">

其它引入请查阅官方文档

注：选择图标时选择免费的不要选择pro的

低端设备兼容 ​

在最近更新中添加了兼容低端无图形加速设备（如linux）的文件（主要移除背景前景的视觉差效果），文件为lowmain.js

已增加自动检测性能及图形加速来自动切换

可在index首页head标签处找到

<!--根据设备性能自动切换main.js-->  
    <script>
        // 检测页面卡顿
        function detectPageLag() {
            return new Promise((resolve) => {
                const frames = [];
                const startTime = performance.now();
                const frame = () => {
                    frames.push(performance.now());
                    if (frames.length === 60) {
                        const endTime = performance.now();
                        const totalDuration = endTime - startTime;
                        const avgFPS = (60 / (totalDuration / 1000));
                        resolve(avgFPS < 20); // 如果平均FPS低于20，则认为卡顿
                    } else {
                        requestAnimationFrame(frame);
                    }
                };
                requestAnimationFrame(frame);
            });
        }

        // 检测图形加速
        function hasWebGL() {
            try {
                const canvas = document.createElement('canvas');
                return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
            } catch (e) {
                return false;
            }
        }

        async function loadScriptBasedOnDetection() {
            const isLagging = await detectPageLag();
            const hasAcceleration = hasWebGL();

            if (isLagging || !hasAcceleration) {
                // 卡顿或无图形加速
                const script = document.createElement('script');
                script.src = 'js/lowmain.js';
                script.async = true; // 确保异步加载
                document.head.appendChild(script);
            } else {
                // 无卡顿且有图形加速
                const script = document.createElement('script');
                script.src = 'js/main.js';
                script.async = true; // 确保异步加载
                document.head.appendChild(script);
            }
        }

        // 立即执行检测
        loadScriptBasedOnDetection();
    </script>

相关 ​

Copyright © 204 NOISE