网站架构规则 v2.3

网站构架、部署和布局规则文档

文档版本：v2.3
创建时间：2026-04-17 10:49
更新内容：新增分类聚合首页展示规则、自动更新机制
创建人：王子
审核人：陛下

📁 一、网站构架

1.1 文件结构

/var/www/hugo.princewill.cn/
├── index.html                    # 网站首页（分类聚合版）
├── css/                          # 样式文件
│   ├── style.css                 # 主样式文件
│   ├── layout.css                # 布局样式文件
│   ├── optimized_stats.css       # 访问统计样式
│   ├── simple_stats.css          # 简化统计样式
│   ├── force_fix_right_sidebar.css # 右侧栏修复样式
│   └── enhanced_right_sidebar.css # 增强右侧栏样式
├── images/                       # 图片资源
│   ├── website_logo_new.jpg      # 网站LOGO
│   └── novels/                   # 小说配图目录
│       ├── ta-butudu-du-prologue-featured.jpg
│       └── ta-butudu-du-chapter1-featured.webp
├── posts/                        # 文章目录（6篇文章）
│   ├── ta-butudu-du-prologue/    # 楔子文章
│   ├── ta-butudu-du-volume1-chapter1/  # 第一章文章
│   ├── 他不毒铊毒-第一卷-第二章-签约/  # 第二章文章
│   ├── 他不毒铊毒-第一卷-第三章-苏珊/  # 第三章文章
│   ├── first-article-xunxin-wendao/    # 寻心问道文章
│   └── ai-illustrations-for-ta-butudu-du-part1/ # 拾光留心文章
├── categories/                   # 分类页面（4个分类）
│   ├── 尘世清文/                 # 原创小说与文学创作（4篇）
│   ├── 拾光留心/                 # 生活照片与AI配图（1篇）
│   ├── 寻心问道/                 # 心灵探索与人生哲思（1篇）
│   └── 光影风华/                 # 音乐视频与影音作品（0篇）
├── scripts/                      # 自动更新脚本
│   ├── simple_update.sh          # 更新检查脚本
│   ├── extract_excerpts.py       # 内容提取脚本（待完善）
│   └── HOMEPAGE_UPDATE_GUIDE.md  # 更新指南
├── rules/                        # 规则文档
│   ├── website_architecture_rules_v2.3.md  # 当前版本
│   └── website_architecture_rules.md       # 历史版本
├── logs/                         # 日志文件
│   └── homepage_updates.log      # 首页更新日志
├── data/                         # 数据文件
│   └── homepage_data.json        # 首页数据缓存
├── tags/                         # 标签页面
├── pages/                        # 静态页面
│   ├── contact/                  # 联系我们
│   └── privacy/                  # 隐私政策
└── archives/                     # 归档页面

1.2 技术栈

  • 前端：HTML5 + CSS3 + 轻量JavaScript
  • 服务器：Nginx 1.24.0 (Ubuntu)
  • 域名：hugo.princewill.cn / 211.159.153.46
  • SSL：HTTPS自动重定向（Let’s Encrypt证书）
  • 编码：UTF-8，中文简体
  • 响应式：支持桌面、平板、手机端

1.3 核心组件

  1. 网站头部 (site-header)

    • LOGO区域（链接到首页）
    • 网站标题和描述
    • 联系方式和隐私政策链接

  2. 三栏布局 (main-container)

    • 左侧栏：网站版块导航
    • 中间栏：分类聚合内容
    • 右侧栏：搜索、最新更新、访问统计

  3. 分类聚合首页 (categories-container)

    • 分类网格布局（2列桌面，1列移动）
    • 分类卡片设计（阴影、圆角、悬停效果）
    • 内容折叠/展开功能

  4. 网站页脚 (site-footer)

    • 关于本站介绍
    • 快速链接
    • 联系与支持
    • 版权信息

🎨 二、设计规范

2.1 色彩方案

  • 主色调：#212529（深灰）
  • 强调色：#0d6efd（蓝色）
  • 背景色：#ffffff（白色）
  • 辅助色：#6c757d（中灰）、#adb5bd（浅灰）
  • 成功色：#198754（绿色）
  • 警告色：#ffc107（黄色）

2.2 字体规范

  • 中文字体：系统默认（苹方、微软雅黑、思源黑体）
  • 英文字体：系统默认（SF Pro, Segoe UI, Roboto）
  • 字号层级：
    • 页面标题：2.5rem (40px)
    • 分类标题：1.5rem (24px)
    • 文章标题：1.2rem (19.2px)
    • 正文内容：1rem (16px)
    • 辅助信息：0.9rem (14.4px)
    • 小字说明：0.85rem (13.6px)

2.3 间距系统

  • 大间距：40px（区块之间）
  • 中间距：24px（卡片之间）
  • 小间距：12px（元素之间）
  • 微间距：8px（内部元素）

2.4 响应式断点

  • 桌面端：≥1200px（大屏幕）
  • 平板端：768px-1199px（中等屏幕）
  • 手机端：≤767px（小屏幕）
  • 超小屏：≤480px（手机横屏）

🏠 三、首页展示规则（v2.3新增）

3.1 分类聚合设计原则

核心目标：清晰展示网站内容结构，提供直观的分类导航

展示要求：

  1. 简洁展示：每个板块只显示最新文章名称+1分钟阅读精华+版块文章列表
  2. 避免冗长：不展示文章全部内容，保持中间栏美观
  3. 内容复用：直接使用文章页面现有的1分钟阅读版本，不重新创作
  4. 自动更新：建立新文章发布的自动更新机制

3.2 分类区块结构

每个分类区块必须包含以下元素：

分类卡片 (category-card)
├── 卡片头部 (card-header)
│   ├── 分类标题 (category-title) + 图标
│   ├── 文章数量 (article-count)
│   └── 查看全部链接 (view-all)
├── 最新文章区域 (latest-article)
│   ├── 文章标题 (article-title) + 链接
│   ├── 文章元数据 (article-meta)
│   │   ├── 发布时间 (time)
│   │   └── 1分钟阅读标签 (reading-badge)
│   └── 1分钟阅读精华 (article-excerpt.existing)
│       └── 复用现有内容，可折叠
└── 文章列表区域 (article-list.compact)
    ├── 列表标题 (list-title)
    └── 文章列表 (ul > li)
        ├── 文章标题链接
        └── 发布日期 (date)

3.3 分类内容规范

3.3.1 尘世清文分类

  • 图标：📚
  • 描述：原创小说与文学创作
  • 展示要求：
    • 显示最新4篇文章
    • 1分钟阅读内容复用分类页面现有的4维度格式
    • 文章列表按时间倒序排列
    • 长内容默认折叠，提供展开功能

3.3.2 拾光留心分类

  • 图标：📸
  • 描述：生活照片与AI配图
  • 展示要求：
    • 显示最新1篇文章
    • 1分钟阅读内容复用分类页面现有内容
    • 文章列表简洁显示

3.3.3 寻心问道分类

  • 图标：💭
  • 描述：心灵探索与人生哲思
  • 展示要求：
    • 显示最新1篇文章
    • 1分钟阅读内容复用首页现有内容
    • 文章列表简洁显示

3.3.4 光影风华分类

  • 图标：🎵
  • 描述：音乐视频与影音作品
  • 展示要求：
    • 空分类状态设计
    • 显示创作引导和期待提示
    • 无文章列表

3.4 1分钟阅读内容规范

来源优先级：

  1. 对应分类页面中的最新文章1分钟阅读内容
  2. 文章页面中的1分钟阅读内容
  3. 首页时间线中的1分钟阅读内容

处理原则：

  1. 完全复用：不修改任何文字，保持原汁原味
  2. 格式保持：保留原有段落结构和强调标记
  3. 长度控制：长内容使用CSS折叠功能
  4. 更新同步：确保与原文内容完全一致

3.5 响应式设计要求

桌面端（≥768px）：

  • 2列网格布局
  • 分类卡片等高设计
  • 完整显示分类信息

移动端（≤767px）：

  • 1列垂直排列
  • 适当缩小内边距
  • 优化触摸操作体验

超小屏（≤480px）：

  • 简化卡片头部布局
  • 调整字体大小
  • 确保可读性

🔄 四、自动更新机制（v2.3新增）

4.1 更新检测规则

检测频率：

  • 定时检查：每天凌晨3点自动运行
  • 手动触发：文章发布后立即触发
  • 实时监控：文件系统变化监控（可选）

检测内容：

  1. 新文章发布（posts目录下的.md或.html文件）
  2. 分类页面更新（categories目录下的index.html）
  3. 1分钟阅读内容变更

4.2 更新执行流程

更新检测 → 内容提取 → 数据更新 → 首页渲染 → 验证测试

具体步骤：

  1. 检测阶段：检查posts和categories目录的文件变更时间
  2. 提取阶段：从分类页面提取最新文章的1分钟阅读内容
  3. 更新阶段：更新首页数据文件（homepage_data.json）
  4. 渲染阶段：根据数据文件更新首页HTML（手动或自动）
  5. 验证阶段：检查所有链接和功能是否正常

4.3 脚本工具规范

更新检查脚本 (simple_update.sh)：

  • 检测文件系统变更
  • 记录更新日志
  • 提供更新提醒

内容提取脚本 (extract_excerpts.py)：

  • 从分类页面提取1分钟阅读内容
  • 获取文章列表信息
  • 生成结构化数据

更新指南文档 (HOMEPAGE_UPDATE_GUIDE.md)：

  • 提供完整的手动更新流程
  • 包含验证步骤
  • 记录更新历史

4.4 日志记录规范

日志文件：/var/www/hugo.princewill.cn/logs/homepage_updates.log

记录内容：

  • 检测时间
  • 发现的新内容数量
  • 更新执行状态
  • 错误信息（如果有）
  • 手动更新记录

日志格式：

[YYYY-MM-DD HH:MM:SS] 开始首页更新检查
[YYYY-MM-DD HH:MM:SS] 发现N篇新文章，触发更新
[YYYY-MM-DD HH:MM:SS] 内容提取成功
[YYYY-MM-DD HH:MM:SS] 首页更新完成

4.5 备份保护机制

备份策略：

  • 每次手动更新前自动备份首页
  • 备份文件命名：index.html.backup_YYYYMMDD_HHMMSS
  • 保留最近7天的备份文件
  • 重大变更前创建里程碑备份

恢复流程：

  1. 定位需要恢复的备份文件
  2. 复制备份文件覆盖当前首页
  3. 验证恢复后的功能
  4. 记录恢复操作

📝 五、发布规则

5.1 文章发布规则

基本要求：

  1. 分类正确：每篇文章必须属于一个分类
  2. 时间准确：发布时间精确到分钟
  3. 1分钟阅读：每篇文章必须有1分钟阅读精华
  4. 格式规范：符合网站HTML结构要求

发布流程：

  1. 创建文章目录和文件
  2. 编写文章内容和1分钟阅读精华
  3. 设置正确的分类和发布时间
  4. 发布到对应分类页面
  5. 触发首页更新机制

5.2 分类页面规则

文章列表：

  • 按时间倒序排列（最新在最前）
  • 每篇文章显示：标题、发布时间、1分钟阅读标签
  • 包含完整的1分钟阅读精华内容

右侧栏：

  • 最新更新列表（最近5篇）
  • 搜索功能
  • 访问统计（标准化模板）

5.3 全站同步规则

核心原则：网站发布新文章后，必须同步更新所有相关页面

必须更新的页面清单：

  1. 分类聚合首页 (/index.html) - 分类展示更新
  2. 对应分类页面 (/categories/分类/) - 文章列表更新
  3. 所有页面右侧栏 - 最新更新列表更新
  4. 归档页面 (/archives/) - 全站文章列表

更新内容要求：

  1. 最新文章置顶：新发布的文章必须放在列表的第一位
  2. 时间格式：MM-DD（如04-15）
  3. 分类显示：正确显示文章所属分类
  4. 链接正确：确保文章链接可正常访问
  5. 数量限制：通常显示最近3-5篇文章

5.4 质量检查清单

发布前检查：

  • 文章分类正确
  • 1分钟阅读内容完整
  • 发布时间准确
  • 所有链接可访问
  • 图片加载正常

发布后检查：

  • 首页分类展示已更新
  • 分类页面文章列表已更新
  • 右侧栏最新更新已更新
  • 所有链接可正常访问
  • 响应式设计正常

🛠️ 六、维护与优化

6.1 定期维护任务

每日任务：

  • 检查自动更新日志
  • 验证首页链接
  • 监控服务器状态

每周任务：

  • 清理过期备份文件
  • 检查磁盘空间使用
  • 更新访问统计

每月任务：

  • 全面检查网站性能
  • 优化图片和静态资源
  • 更新规则文档

6.2 性能优化指南

前端优化：

  • 压缩CSS和JavaScript
  • 优化图片格式和大小
  • 使用浏览器缓存
  • 减少HTTP请求

服务器优化：

  • 启用Gzip压缩
  • 配置缓存策略
  • 监控资源使用
  • 定期更新软件

6.3 故障处理流程

常见问题：

  1. 首页显示异常：恢复最近备份，检查CSS和HTML
  2. 链接失效：更新链接地址，检查文件路径
  3. 更新失败：检查脚本权限，查看错误日志
  4. 性能下降：优化资源加载，检查服务器配置

处理步骤：

  1. 确认问题现象
  2. 查看相关日志
  3. 定位问题原因
  4. 执行修复操作
  5. 验证修复效果
  6. 记录处理过程

6.4 安全防护措施

基本防护：

  • 保持HTTPS加密
  • 定期更新SSL证书
  • 限制文件上传权限
  • 监控异常访问

备份策略：

  • 每日增量备份
  • 每周全量备份
  • 异地备份（可选）
  • 定期恢复测试

📋 七、版本历史

v2.3 (2026-04-17)

新增内容：

  1. 分类聚合首页展示规则
  2. 自动更新机制规范
  3. 1分钟阅读内容复用规则
  4. 响应式设计详细规范
  5. 更新检测和执行流程

更新内容：

  1. 文件结构调整（新增scripts、logs、data目录）
  2. 设计规范细化（色彩、字体、间距系统）
  3. 发布规则完善（全站同步要求）
  4. 维护指南补充（故障处理流程）

v2.2 (2026-04-08)

主要内容：

  1. 网站构架和文件结构
  2. 设计规范和响应式要求
  3. 文章发布和分类页面规则
  4. 全站最新更新同步规则

v1.0 (2026-04-04)

初始版本：

  1. 基础网站构架
  2. 基本设计规范
  3. 文章发布流程

📞 八、联系与支持

文档维护：

  • 负责人：王子
  • 审核人：陛下