本文由 FlintHub 开发文档归档发布。原始文档日期见标题前缀，来源：NOTEWEB复刻计划.md。
NOTEWEB 风格复刻计划
规划日期：2026-07-08
参考来源：NOTEWEB 首页 + 版块列表页 源码
目标：将 SoSite 前台改造为 NOTEWEB 风格的三栏布局
一、总体布局
NOTEWEB 采用 三栏 Bootstrap 网格布局，PC 端三栏，移动端合并为单栏：
┌──────────────────────────────────────────────────────────┐
│ NAVBAR │
├──────────┬───────────────────────────┬───────────────────┤
│ col-2 │ col-7 │ col-3 │
│ 左侧导航 │ 主内容区 │ 右侧栏 │
├──────────┴───────────────────────────┴───────────────────┤
│ FOOTER │
└──────────────────────────────────────────────────────────┘二、页面对应关系
| NOTEWEB 页面 | 对应 SoSite 模板 | 复刻优先级 |
|---|---|---|
| 首页（index） | app/Views/home/index.php | P0 |
| 版块页（forum-1） | app/Views/forum/category.php | P0 |
| 帖子详情页 | app/Views/thread/show.php | P1（等源码） |
| 发帖页 | app/Views/post/create.php | P1（等源码） |
| 个人中心 | app/Views/profile/index.php | P2（等源码） |
三、模块拆解与实施步骤
Step 1：基础架构 — 布局框架
目标：建立三栏 Bootstrap 风格网格，不依赖 Bootstrap JS，仅用 CSS 实现 row / col-* 网格系统。
涉及的 CSS 文件：
| 文件 | 改动 |
|---|---|
assets/css/layout.css | 新增 .row / .col-lg-2 / .col-lg-7 / .col-lg-3 网格系统 |
assets/css/layout.css | 新增 .main 主内容区基础样式 |
assets/css/layout.css | 移动端 .col-* 响应式折叠 |
涉及的模板：
| 文件 | 改动 |
|---|---|
app/Views/layouts/main.php | 整体布局改为三栏结构 |
工作量：小
Step 2：左侧导航（三栏共用）
目标：左侧 2/12 宽度的版块分类导航，所有页面共用。
来源分析（NOTEWEB 首页和版块页的左侧相同）：
┌────────────┐
│ 综合（首页）│ ← 带 compass 图标
│ │
│ 📁 学习笔记 │ ← 带版块图标
│ 📁 经验交流 │
│ 📁 开发日志 │
│ 📁 插件共享 │
│ 📁 日常分享 │
│ │
│ ┌─ 用户卡片 ─┐
│ │ 头像 │
│ │ 登录/注册 │
│ │ 主题/关注 │
│ │ 收藏/钱包 │
│ └───────────┘
└────────────┘新建文件：
| 文件 | 说明 |
|---|---|
app/Views/partials/sidebar_left.php | 左侧版块导航组件 |
涉及的模板：
| 文件 | 改动 |
|---|---|
app/Views/home/index.php | 引入 sidebar_left |
app/Views/forum/category.php | 引入 sidebar_left |
app/Views/layouts/main.php | 可选的全局引入 |
工作量：小
Step 3：首页主内容区
来源分析（NOTEWEB 首页 col-7）：
┌───────────────────────────┐
│ 轮播图 (Swiper) │
├───────────────────────────┤
│ 置顶帖子列表 │
│ 📌 帖子标题 2023-2-2 │
│ 📌 帖子标题 2023-2-2 │
├───────────────────────────┤
│ [最新] [精华] [新帖] │
├───────────────────────────┤
│ 👤 帖子标题 ⭐ │
│ 版块 · 作者 · 回复 · 时间│
├───────────────────────────┤
│ 👤 帖子标题 │
│ 版块 · 作者 · 回复 · 时间│
├───────────────────────────┤
│ ← 1 2 3 ... 10 → │
└───────────────────────────┘涉及的模板：
| 文件 | 说明 |
|---|---|
app/Views/home/index.php | 重写 — 三栏布局 |
app/Views/partials/thread_list_item.php | 新建 — 帖子列表单项 |
涉及的控制器：
| 文件 | 说明 |
|---|---|
app/Controllers/HomeController.php | 补充 latestThreads 数据中的版块信息、回复统计 |
工作量：中
Step 4：版块页主内容区
来源分析（NOTEWEB forum-1.htm col-7）：
┌───────────────────────────┐
│ 版块横幅 │
│ 📁 学习笔记 版块描述 │
│ 主题数:100 今日:0 │
├───────────────────────────┤
│ 标签筛选 │
│ [全部][js][html][vue] │
├───────────────────────────┤
│ [最新] [精华] [新帖] 排序▾ │
├───────────────────────────┤
│ 👤 帖子标题 │
│ 作者 · 回复数 · 时间 │
├───────────────────────────┤
│ 👤 帖子标题 │
│ 作者 · 回复数 · 时间 │
├───────────────────────────┤
│ ← 1 2 3 ... 10 → │
└───────────────────────────┘涉及的模板：
| 文件 | 说明 |
|---|---|
app/Views/forum/category.php | 重写 — 版块横幅 + 标签 + 帖子列表 |
app/Views/partials/thread_list_item.php | 复用 Step 3 的组件 |
涉及的控制器：
| 文件 | 说明 |
|---|---|
app/Controllers/ForumController.php | 补充版块统计（今日帖数）、标签列表数据 |
工作量：大
Step 5：帖子列表单项组件
目标：统一帖子列表渲染样式，首页和版块页复用。
来源分析（媒体对象结构）：
![]()
涉及的 CSS 文件：
| 文件 | 说明 |
|---|---|
assets/css/forum.css | .media.thread / .style3_subject / .tap / media-body |
assets/css/components.css | .avatar-3 / .badge-pill / .badge-success / break-all |
工作量：中
Step 6：右侧栏（三栏共用）
来源分析（NOTEWEB 右侧 col-3）：
┌───────────────────┐
│ 站点信息卡片 │
│ Logo + 站点名称 │
│ 主题数/帖子数 │
│ 用户数/在线 │
│ 点赞按钮 👍 │
├───────────────────┤
│ 每日签到 │
│ 本周签到日历 │
│ 签到按钮 │
├───────────────────┤
│ 排行榜 │
│ [总排行][周排行] │
│ 1. 帖子标题 │
│ 2. 帖子标题 │
│ ... │
├───────────────────┤
│ 友情链接 │
│ · 链接1 │
│ · 链接2 │
└───────────────────┘新建文件：
| 文件 | 说明 |
|---|---|
app/Views/partials/sidebar_right.php | 右侧栏组件 |
涉及的 CSS：
| 文件 | 说明 |
|---|---|
assets/css/home.css | 站点信息卡片、签到日历、排行列表 |
功能依赖：
- 每日签到 → 需增加签到插件或内建功能
- 排行榜 → 需增加帖子热度/积分统计逻辑
- 友情链接 → 已有插件
工作量：大（含功能开发）
Step 7：轮播图
目标：首页顶部 Swiper 轮播。
方案：使用 Swiper.js 轻量版本，或纯 CSS 轮播。
涉及的模板：
| 文件 | 说明 |
|---|---|
app/Views/home/index.php | 插入轮播图 HTML |
涉及的 CSS：
| 文件 | 说明 |
|---|---|
assets/css/home.css | .carousel-container / .carousel-inner 样式 |
注：轮播图内容可通过后台设置或插件管理。
工作量：小
Step 8：导航栏改造
来源分析（NOTEWEB 导航栏）：
- PC 端：左 Logo + 中导航链接 + 右用户（登录/注册 或 头像下拉）
- 移动端：左菜单按钮 + 中搜索框 + 右发帖按钮
- 移动端子导航：Tab 切换（最新/精华/新帖）
涉及的模板：
| 文件 | 说明 |
|---|---|
app/Views/layouts/main.php | 重写导航栏部分 |
涉及的 CSS：
| 文件 | 说明 |
|---|---|
assets/css/layout.css | 导航栏样式 |
工作量：中
Step 9：分页样式
NOTEWEB 使用 Bootstrap 风格分页：
涉及的 CSS：
| 文件 | 说明 |
|---|---|
assets/css/pages.css | .pagination / .page-item / .page-link 样式 |
工作量：小
Step 10：页脚改造
NOTEWEB 页脚包含：Logo + 站点信息 + 处理时间 + 版权 + 社交链接（QQ/微信/邮箱）。
涉及的模板：
| 文件 | 说明 |
|---|---|
app/Views/layouts/main.php | 页脚部分改造 |
涉及的 CSS：
| 文件 | 说明 |
|---|---|
assets/css/layout.css | .footer 样式 |
工作量：小
四、新增 CSS 网格系统（替代 Bootstrap）
由于 SoSite 不使用 Bootstrap，需要自建一个极简网格系统支持三栏布局：
/* 网格系统 */
.row { display: flex; flex-wrap: wrap; }
/* 列宽 */
.col-lg-2 { width: 16.66667%; }
.col-lg-3 { width: 25%; }
.col-lg-7 { width: 58.33333%; }
/* 内边距 */
.col-lg-2,
.col-lg-3,
.col-lg-7 { padding: 0 15px; box-sizing: border-box; }
/* 移动端：全部转为 100% 宽度 */
@media (max-width: 992px) {
.col-lg-2,
.col-lg-3,
.col-lg-7 { width: 100%; }
}放入 assets/css/layout.css。
五、依赖功能开发清单
| 功能 | 状态 | 说明 |
|---|---|---|
| 版块图标 | SoSite 已有 | 数据库 categories 表有 icon 字段 |
| 版块统计（今日帖数） | ❌ 需新增 | 控制器补充查询 |
| 标签系统 | SoSite 已有 | tags 表 + thread_tags 关联表 |
| 每日签到 | ❌ 需新增 | 插件或内建功能 |
| 帖子排行榜 | ❌ 需新增 | 按浏览量/回复量/热度排序 |
| 友情链接 | ✅ 已有插件 | friend_links 插件 |
| 轮播图 | ❌ 需新增 | 后台管理+前端展示 |
| 站点点赞 | ❌ 需新增 | 简单计数功能 |
六、实施总览
| 步骤 | 内容 | 工作量 | 前置依赖 |
|---|---|---|---|
| 1 | 网格系统 + 三栏布局框架 | 小 | 无 |
| 2 | 左侧导航组件 | 小 | Step 1 |
| 3 | 首页主内容区 | 中 | Step 1, 2 |
| 4 | 版块页主内容区 | 大 | Step 1, 2, 5 |
| 5 | 帖子列表组件 | 中 | Step 3 |
| 6 | 右侧栏组件 | 大 | Step 1, 签到/排行功能 |
| 7 | 轮播图 | 小 | Step 3 |
| 8 | 导航栏改造 | 中 | Step 1 |
| 9 | 分页样式 | 小 | Step 3 |
| 10 | 页脚改造 | 小 | Step 1 |
七、待补充的源码
完成 P0 级页面（首页+版块页）后，还需要以下页面源码以继续：
- [ ] NOTEWEB 帖子详情页（thread-xxx.htm）
- [ ] NOTEWEB 发帖页（thread-create-0.htm）
- [ ] NOTEWEB 个人中心（user-1.htm / my.htm）
