更新日志
2025-07-01：增强网站设置功能与KV数据库集成
功能更新
网站前台动态配置：
- 将网站前台页面中的硬编码设置替换为从KV数据库动态读取
- 通过管理后台更新的设置会立即反映在前台页面
- 支持实时更新网站名称、SEO信息和页面元数据
网站设置数据结构：
- 集中管理基本设置：网站名称、域名、描述信息
- SEO设置：添加关键词和元描述标签
- 搜索引擎优化：支持自定义robots.txt内容
容错机制：
- 添加默认设置作为回退方案，确保即使KV读取失败也能正常显示页面
- 优化错误处理流程，增加日志记录，便于故障排查
- 实现设置缓存机制，提高页面加载性能
技术实现
模板系统改进：
// 默认的网站设置，如果从KV中读取失败则使用这些值 const DEFAULT_SITE_SETTINGS = { siteName: 'CloudDocs', siteDomain: 'docs.example.com', siteDescription: '基于 Cloudflare Workers 的在线文档系统，提供快速、可靠的文档托管服务。', seoKeywords: '文档, API, Markdown, 云端, Cloudflare', metaDescription: 'CloudDocs是一个基于Cloudflare Workers的文档系统，提供高性能、易用的文档托管服务，支持Markdown格式和自动索引。', robotsTxt: 'User-agent: *\nAllow: /\nSitemap: https://docs.example.com/sitemap.xml' }; // 生成HTML页面的模板函数，新增设置参数 export function getPageTemplate(title, content, currentPath = '', activeGroup = '', siteSettings = null) { // 使用传入的网站设置或默认设置 const settings = siteSettings || currentSiteSettings || DEFAULT_SITE_SETTINGS; // 使用设置中的siteName作为标题前缀 const pageTitle = title.includes(settings.siteName) ? title : `${title} - ${settings.siteName}`; // ...页面HTML生成 }KV存储读取：
// 从KV存储获取网站设置 async function getSiteSettings(c) { try { // 从KV存储获取设置 const settingsJson = await c.env.DOCS.get('_site_settings'); // 如果设置存在，解析并返回 if (settingsJson) { return JSON.parse(settingsJson); } // 如果设置不存在，返回null (模板函数会使用默认值) return null; } catch (error) { console.error('获取网站设置失败:', error); return null; } }设置数据全局管理：
// 当前页面使用的站点设置 let currentSiteSettings = null; // 设置当前网站设置 export function setSiteSettings(settings) { currentSiteSettings = settings; }
新增和修改文件
src/worker/docs/template.js：增加网站设置参数和默认值，优化模板生成函数src/worker/docs/routes.js：添加从KV获取设置的功能，并将设置传递给模板public/js/theme.js：优化主题切换脚本，确保与动态设置兼容
使用体验改进
- 管理员可通过后台界面一键更新网站信息，无需修改代码
- 网站标题、描述、关键词等元素统一管理，确保一致性
- 新增的robots.txt支持改进了网站的SEO优化能力
- 访问者获得个性化的网站体验，反映站点的实际配置
2025-04-03：添加后台管理功能与优化代码结构
功能更新
添加管理后台：
- 新增管理控制台页面，包含统计数据和运营信息
- 实现站点设置页面，用于更新网站基本信息
- 添加文档管理功能，支持查看和管理所有文档
代码架构优化：
- 重构项目结构，采用更模块化的组织方式
- 将前台和后台模板分离，提高代码可维护性
- 路由处理逻辑模块化，按功能划分为独立文件
技术改进：
- 优化路由注册机制，提高代码复用性
- 统一应用初始化流程，简化入口文件
- 改进静态资源服务，支持后台管理界面资源
技术实现
管理页面模板：
// 生成管理页面HTML模板 export function getAdminTemplate(title, content, currentPath = '') { return `<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>${title} - 管理控制台</title> <link href="/css/styles.css" rel="stylesheet"> <!-- 其他资源引用 --> </head> <body> <!-- 管理后台界面结构 --> </body> </html>`; }模块化路由处理：
// 注册管理页面路由 export function registerAdminRoutes(app) { // 管理控制台首页 app.get('/admin', async (c) => { // 控制台逻辑实现 }); // 站点设置页面 app.get('/admin/site-settings', async (c) => { // 站点设置逻辑实现 }); // 文档管理页面 app.get('/admin/docs', async (c) => { // 文档管理逻辑实现 }); }
新增和修改文件
src/worker/admin/template.js：新增管理页面HTML模板生成src/worker/admin/routes.js：新增管理路由处理逻辑src/worker/docs/template.js：从原template.js移动的前台文档模板src/worker/docs/routes.js：文档相关路由处理src/worker/index.js：统一的应用初始化模块src/index.js：简化的应用入口文件
使用体验改进
- 管理后台提供直观的数据统计和文档管理界面
- 站点设置功能使网站信息更新更加便捷
- 模块化的代码结构便于未来功能扩展和维护
- 统一的页面风格和交互体验，确保一致性
2025-06-01：优化首页导航体验
功能更新
首页导航自动折叠：
- 修改首页打开时的导航行为，默认折叠所有一级导航组
- 改进导航组激活状态的显示逻辑，保持界面整洁
- 统一了所有页面的导航交互体验
导航组交互优化：
- 完善学习资料组的展开与激活逻辑，修复显示问题
- 确保点击导航组链接后，相应的导航组保持展开状态
- 优化导航组间的切换效果，避免同时展开多个导航组
技术实现
在
src/index.js中：// 首页路由不激活任何导航组，保持所有导航折叠 return new Response(getPageTemplate('在线文档', html, '', ''), { headers });在
src/template.js中：// 处理没有活动组的情况（如首页） if (activeGroup) { // 代码处理有活动组的情况，展开当前活动组 } else { // 如果没有活动组（比如在首页），折叠所有导航组 document.querySelectorAll('.nav-group-header').forEach(header => { header.classList.remove('expanded'); header.querySelector('svg').style.transform = 'rotate(-90deg)'; const group = header.getAttribute('data-group'); const content = document.getElementById(group + 'Content'); if (content) { content.classList.remove('expanded'); } }); }
新增和修改文件
src/index.js：修改首页路由处理，将activeGroup参数设为空字符串src/template.js：增加处理没有活动导航组情况的逻辑
使用体验改进
- 首次访问网站时导航保持折叠状态，界面更加整洁
- 在文档页面间导航时，相关导航组会智能展开和折叠
- 改善了学习资料组的交互体验，修复了展开和高亮问题
- 整体导航交互更加一致，提升用户体验
2025-05-20：添加代码块复制功能
功能更新
代码块复制功能：
- 在每个代码块右上角添加复制按钮
- 鼠标悬停在代码块上时显示复制按钮
- 点击按钮复制代码内容到剪贴板
- 提供视觉反馈指示复制成功或失败
用户体验改进：
- 设计简洁的复制按钮样式，适配亮色和暗色模式
- 添加按钮悬停效果和提示文本
- 适配各种屏幕尺寸
- 实现无障碍支持，包括适当的ARIA标签
技术实现
JavaScript复制功能：
// 复制代码到剪贴板 navigator.clipboard.writeText(code) .then(() => { // 复制成功，显示反馈 copyButton.classList.add('success'); tooltip.textContent = '已复制!'; }) .catch((err) => { // 复制失败，显示错误 copyButton.classList.add('error'); tooltip.textContent = '复制失败'; });兼容性处理：
// 对于不支持Clipboard API的浏览器提供回退方法 function fallbackCopyTextToClipboard(text) { const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); }
新增和修改文件
public/js/code-copy.js：新增复制代码功能的JavaScript实现src/css/input.css：添加复制按钮的样式和交互状态src/template.js：在HTML模板中引入复制代码脚本
使用体验改进
- 用户可以通过简单点击快速复制代码，提高效率
- 直观的视觉反馈指示操作结果
- 优雅的动画和过渡效果增强用户体验
- 适配移动端和桌面端的不同交互需求
2025-05-15：增加暗黑模式支持
功能更新
暗黑模式支持：
- 新增网站暗黑模式切换功能，提升用户阅读体验
- 自动检测系统偏好设置，支持手动切换
- 增加主题切换按钮，方便用户随时切换
- 所有元素适配暗黑模式，提供良好的视觉体验
暗黑模式界面优化：
- 精心设计的暗色配色方案，减少用眼疲劳
- 优化代码块、表格、图片等元素在暗黑模式下的显示效果
- 特别优化了阅读核心内容的对比度和可读性
- 保持品牌色调的一致性和辨识度
技术升级：
- 更新Tailwind CSS配置，启用"class"模式的暗黑模式策略
- 为所有UI组件添加暗黑模式样式变体
- 优化CSS构建流程，减小最终样式文件体积
- 添加主题持久化存储，记住用户的主题偏好
技术实现
在
tailwind.config.js中：module.exports = { darkMode: 'class', // 其他配置 theme: { extend: { // 暗黑模式排版配置 typography: { dark: { css: { color: '#e5e7eb', 'h1, h2, h3, h4': { color: '#f3f4f6', }, // 其他暗黑模式文本样式 }, }, }, }, }, }主题切换JavaScript：
// 检查当前主题，如果是暗黑模式则添加dark类 if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } // 主题切换事件监听 themeToggle.addEventListener('click', () => { const isDark = document.documentElement.classList.toggle('dark'); localStorage.theme = isDark ? 'dark' : 'light'; });
新增和修改文件
tailwind.config.js：更新暗黑模式配置public/js/theme.js：新增主题切换逻辑src/css/input.css：为所有组件添加暗黑模式样式src/template.js：更新HTML模板，添加暗黑模式切换按钮src/index.js：添加JS静态文件服务配置
使用体验改进
- 用户可以通过顶部菜单中的主题切换按钮切换亮/暗模式
- 网站会记住用户的主题偏好，下次访问时自动应用
- 首次访问时会根据用户的系统设置自动应用相应主题
- 所有内容在暗黑模式下更易于阅读，减少视觉疲劳
2025-05-01：CloudDocs v2.0 正式发布
我们很高兴地宣布 CloudDocs v2.0 正式发布！这是一次重大更新，带来了全面的用户体验优化和功能增强。详细发布说明请查看v2.0版本说明。
主要更新亮点
- 导航系统重构：多级导航支持、智能折叠、动态高亮
- 性能优化：页面加载速度提升、懒加载支持、缓存策略优化
- 文档功能增强：搜索功能增强、学习资料分区、版本控制
- 界面设计升级：视觉风格优化、响应式布局完善、无障碍设计
安装与升级
从 v1.x 升级到 v2.0 的步骤：
# 拉取最新代码
git pull origin v2.0
# 安装新依赖
npm install
# 部署更新
wrangler deploy
2025-04-15：优化导航系统和用户界面
功能更新
导航菜单交互优化：
- 修改了左侧导航菜单的展开/折叠逻辑，提供更平滑的用户体验
- 添加了视觉指示器（箭头动画），明确显示导航状态
- 优化了移动端和桌面端的导航行为
导航结构优化：
- 新增"学习资料"一级导航分类
- 包含教程指南、示例代码和最佳实践等子项
- 保持与文档导航一致的视觉风格
二级导航样式升级：
- 为活动状态的导航项添加背景色和文本颜色变化
- 改进悬停效果，提供更好的视觉反馈
- 确保当前页面导航项突出显示，便于用户定位
文档编码优化：
- 修复了文件的中文字符编码问题
- 确保所有中文显示正常，避免乱码
技术实现
在
src/template.js中：// 添加导航组折叠/展开功能 document.querySelectorAll('.nav-group-header').forEach(header => { // 根据当前路径初始化展开状态 if (currentPath.startsWith('/' + group + '/')) { header.classList.add('expanded'); content.classList.add('expanded'); header.querySelector('svg').style.transform = 'rotate(0deg)'; } // 点击标题切换展开状态 header.addEventListener('click', (e) => { // ...展开/折叠逻辑 }); });新增二级导航激活样式：
/* 激活状态样式 */ .nav-group-item.active { background-color: rgba(14, 165, 233, 0.1); color: #0EA5E9; font-weight: 500; } .nav-group-item.active:hover { background-color: rgba(14, 165, 233, 0.15); }
新增和修改文件
upload-single-doc.js：修复了编码问题，确保中文正常显示src/template.js：更新了导航菜单的HTML结构、CSS样式和JavaScript交互逻辑
使用体验改进
- 访问特定文档页面时，对应的导航分类会自动展开
- 当前页面的导航项会高亮显示
- 可通过点击一级分类标题展开/折叠子项
- 导航逻辑更加智能，能够根据当前页面路径自动适应
2025-04-01：修复KV文档上传BUG
问题描述
在使用Wrangler上传文档到Cloudflare KV存储时，发现使用--binding=DOCS参数的方法只能更新本地KV存储，而无法将文档实际上传到Cloudflare的远程KV存储。
原因分析
- Wrangler命令行工具在使用
--binding参数时，默认只操作本地KV存储，除非特别指定--remote标志。 - 使用
--namespace-id参数可以直接操作远程KV存储，更加可靠。
解决方案
- 修改上传脚本，替换
--binding=DOCS为--namespace-id=<ID>参数 - 添加
--remote标志确保操作的是远程KV存储 - 在文件验证过程中也使用相同的参数设置
- 创建单文件上传工具以简化特定文档的更新流程
具体修改
在
upload-docs.js中：// 旧代码 const uploadCommand = `wrangler kv key put --binding=DOCS "${fileName}" --path="${filePath}"`; // 新代码 const namespaceId = 'bafaf13435d348f59e9aa2b8917ac339'; const uploadCommand = `wrangler kv key put --namespace-id ${namespaceId} "${fileName}" --path="${filePath}" --remote`;在
list-docs.js中：// 旧代码 const command = `wrangler kv key list --binding=DOCS`; // 新代码 const namespaceId = 'bafaf13435d348f59e9aa2b8917ac339'; const command = `wrangler kv key list --namespace-id=${namespaceId} --remote`;创建了新的
upload-single-doc.js工具，提供交互式界面选择和上传单个文档。
上传流程
- 使用修改后的脚本上传文档到KV存储
- 运行
wrangler deploy命令部署Worker应用 - 验证文档是否已更新
注意事项
- 使用
--namespace-id参数时不需要指定环境(--env) - 上传后需要重新部署Worker才能让更改生效
- 命名空间ID可在
wrangler.toml配置文件中找到