📋 JavaScript 模块详解(enhance.js)

核心初始化模块

模块 功能 修改建议 增强思路
00 Welcome Splash 欢迎屏幕/加载动画 调整动画时长、背景颜色、文字内容 添加加载进度百分比显示
01 localStorage Init 本地存储初始化 配置存储键名、默认值 添加存储版本控制、过期时间
02 Progress Bar 页面滚动进度条 调整颜色、高度、位置 支持多段进度显示
03 Dynamic Title 动态页面标题 修改标题切换文案 添加表情符号动画

视觉交互模块

模块 功能 修改建议 增强思路
04 Uptime Counter 运行时间计数器 改起始日期、格式 添加服务器宕机检测、历史记录
05 Dark-mode Ripple 黑暗模式切换水波纹 调整波纹颜色、扩散速度 支持系统偏好自动切换
06 Static Background 静态背景(已移除粒子) 更换背景图片URL 添加时间段不同背景
07 Web Audio SFX 音效系统 替换音频文件、调整音量 添加音效开关、音量控制
08 Click Sparks 点击火花特效 调整粒子数量、颜色、速度 支持自定义形状、轨迹

页面结构模块

模块 功能 修改建议 增强思路
09 Hero Cluster 头部集群(头像+名字+时钟) 修改头像、名字、时钟格式 添加社交媒体链接、动态问候
10 Hero Banner 主视觉横幅 更换背景、调整高度 支持滑动切换多个横幅
11 Tag Search Toolbar 标签页搜索栏 修改搜索框样式、占位符 添加搜索建议、热门标签显示
12 Image Lightbox 图片灯箱 调整动画、背景透明度 支持缩略图导航、图片预加载

交互工具模块

模块 功能 修改建议 增强思路
13 Floating Toolbar 浮动工具栏 + 统一沉底菜单(4主题) 修改按钮数量、主题配色 添加工具栏自定义排序、主题预览
14 Home Card Rebuild 首页卡片重构 调整卡片大小、间距、阴影 支持卡片拖拽排序、多列布局
15 macOS Code Block macOS风格代码块 修改代码块颜色、字体 添加代码行号、复制按钮、语法高亮

动画特效模块

模块 功能 修改建议 增强思路
16 Sakura Petals 樱花飘落特效 调整花瓣数量、下落速度、季节 支持其他季节花朵、风力系统
17 ArticleTOC 文章目录+滚动监听 + 返顶按钮 修改TOC位置、返顶按钮样式 添加目录展开/折叠、平滑滚动

导航交互模块

模块 功能 修改建议 增强思路
18 Mobile Nav 手机导航 +汉堡菜单 + 下拉菜单 调整菜单项、动画时长 支持子菜单、手势导航
19 Search Overlay 搜索浮窗 修改搜索框样式、搜索范围 添加搜索历史、智能建议

页面初始化模块

模块 功能 修改建议 增强思路
20 Gallery Banner 首页底部画廊横幅 更换图片、调整排列 支持图片懒加载、缩放预览
21 Post Page Init 文章页面初始化 配置文章样式 添加阅读时间估算、分享功能
22 Index Page Init 索引页面初始化 配置列表样式 添加分页、排序筛选
23 Main Entry 主入口 管理模块加载顺序 添加模块延迟加载、条件加载

🎨 CSS 模块详解(enhance.css)

基础样式

部分 功能 修改建议 增强思路
00 Font Imports 字体导入 替换字体家族、添加本地字体 支持动态字体加载、字体预热
01 CSS Variables + Reset CSS变量 + 重置 修改主色调、间距单位 添加更多主题变量、响应式变量
02 Welcome Splash 欢迎屏样式 调整背景、文字颜色、覆盖层 支持动画序列、渐变背景
03 Background Image 背景图像 更换背景URL、调整位置 支持多层背景、视差效果

排版与主题

部分 功能 修改建议 增强思路
04 Typography 字体 / 日间=黑 / 夜间=白 调整字体大小、行高、颜色对比 添加高对比度模式、字体缩放
15 Article Theme 4种主题的CSS变量 修改主题配色方案 添加新主题、主题过渡动画

导航与布局

部分 功能 修改建议 增强思路
05 Navbar 液态玻璃 + 可折叠导航 调整透明度、高度、动画 支持导航吸顶、背景模糊
06 Hero Cluster 头部集群样式 调整头像大小、间距 支持动画入场、响应式布局
07 Hero Banner 主视觉横幅样式 修改高度、背景、文字位置 支持视差滚动、多层叠加

组件样式

部分 功能 修改建议 增强思路
08 Progress Bar 进度条样式 调整颜色、宽度、位置 支持渐变色、动画效果
09 Cards 首页卡片样式 修改边框、阴影、圆角 支持悬停动画、卡片分组
10 Date Badge 日期徽章样式 调整背景、文字、形状 支持相对时间显示
11 Pinned Section 置顶部分样式 修改置顶标题、背景 支持多级置顶、固定区域

内容展示

部分 功能 修改建议 增强思路
12 Article Reading 文章阅读面板(主题特定) 调整宽度、行高、背景 支持字体大小调节、无衬线切换
13 Code Blocks 代码块(日间+暗夜) 修改语法高亮、字体、边框 支持代码行号、复制提示
14 Tables 表格(日间+暗夜) 调整表格边框、背景、文字 支持表格排序、固定表头

功能性样式

部分 功能 修改建议 增强思路
16 TOC Scroll-spy 目录滚动监听 + 活跃高亮 修改高亮颜色、动画 支持目录折叠、平滑指示
17 Floating Toolbar 浮动工具栏 + 沉底菜单 调整按钮样式、位置、大小 支持工具栏收缩、快捷键
18 Prev/Next 前后导航 修改按钮文案、样式 支持缩略图预览、键盘导航
19 Lightbox 灯箱样式 调整背景、过渡动画 支持图片信息显示、缩放控制
20 Back-to-Top 返顶按钮 修改按钮样式、位置 支持滚动高度阈值、快捷键

特殊效果

部分 功能 修改建议 增强思路
21 Sakura Canvas 樱花画布 / 主题波纹 调整花瓣颜色、密度 支持季节切换、自定义粒子
22 Uptime 正常运行时间样式 修改字体、颜色、格式 支持历史记录展示、图表
23 Timeline/Archive 时间轴/归档 调整时间轴样式、颜色 支持按年/月分组、搜索
24 Gallery Banner 画廊横幅 修改图片排列、间距 支持图片网格、灯箱集成
25 Search Overlay 搜索浮窗 调整搜索框样式、背景 支持结果预览、搜索历史
26 Responsive 响应式(手机) 调整断点、间距、字体 支持平板/大屏优化、触摸优化

📄 JSON 配置文件说明

常见配置文件结构

{
  "site": {
    "title": "Luliy Blog",
    "description": "个人博客",
    "author": "Your Name",
    "url": "https://your-domain.com"
  },
  "theme": {
    "primaryColor": "#6366f1",
    "darkMode": true,
    "themes": ["light", "dark", "sakura", "midnight"]
  },
  "modules": {
    "particles": false,
    "audioSFX": true,
    "sakuraPetals": true,
    "darkModeRipple": true
  },
  "navbar": {
    "sticky": true,
    "glassEffect": true,
    "transparent": false
  },
  "timeline": {
    "enabled": true,
    "groupBy": "year"
  }
}

关键配置项修改指南

配置项 类型 说明 修改例
primaryColor String 主色调 "#ff6b6b"
theme Array 启用主题列表 ["light", "dark"]
audioSFX Boolean 启用音效 false
sakuraPetals Boolean 樱花效果 true
uptimeStart String 正常运行起始日期 "2024-01-01"

💡 功能增强建议

建议新增模块

  1. 24Comment System - 评论系统 / Giscus 集成
  2. 25 Statistics Dashboard - 阅读统计面板
  3. 26 Reading Mode - 专注阅读模式(无干扰)
  4. 27 Export Articles - 导出文章为PDF/Markdown
  5. 28 Dynamic Weather - 显示实时天气
  6. 29 Notification Center - 消息/评论通知

建议新增CSS主题

  1. 高对比度模式(无障碍)
  2. 护眼模式(暖色调)
  3. 自动主题(跟随系统)
  4. 季节主题(春/夏/秋/冬)

需要我详细讲解某个具体模块或帮你修改特定功能吗?

转载请注明出处