323 lines
11 KiB
Markdown
323 lines
11 KiB
Markdown
# 網頁管理編輯器
|
||
|
||
# Fork
|
||
This project is forked from [vvvebjs](https://github.com/givanz/VvvebJs)
|
||
|
||
# 目的
|
||
為了替代Google site可以提供社團或者一些使用者來進行簡易架站（如Publii之類的）
|
||
以及希望可以增加Google site不支援的模組如Blog等
|
||
但是由於本人對Python比較熟悉，所以不考慮使用現有的vvvebjs cms套組，而是另外重新撰寫dashboard等
|
||
~~我就是死不用node的傢伙~~
|
||
(其實相當於是預期重製一套更好用一點CMS套組)
|
||
|
||
# requirement
|
||
uv(python 3.13)
|
||
|
||
# 預計功能
|
||
- [x] 中文化
|
||
- [ ] 部落格模組
|
||
- [ ] 帳號管理（註冊登入網站管理器、網站成員管理）
|
||
- [ ] 網站管理（頁面管理、模組管理、檔案管理、版本控制）
|
||
- [ ] 部署功能（網域配置：dns與tunnel設置？）
|
||
- [ ] 網站模板（提供一些預設模板）
|
||
- [ ] 網站設定（如網站名稱、網站描述、網站logo等）
|
||
- [ ] 自動導覽列模組（根據頁面名稱自動生成導覽列）
|
||
|
||
- [ ] 電子報設計功能
|
||
|
||
# 招募貢獻
|
||
目前還在開發中，歡迎有興趣的開發者一起參與開發，可以[來信](mailto:hi@l.nudoragon.com)跟我說！
|
||
|
||
|
||
|
||
## 📋 **分步計畫架構**
|
||
|
||
根據你的需求，我建議將開發分為 **5 個優先級階段**，共 1-2 個月：
|
||
|
||
### **Phase 1️⃣：網站核心功能（第 1-2 週）**
|
||
✨ 對標 Google Sites 的基礎管理功能
|
||
|
||
**步驟：**
|
||
1. **網站設定模組** — 獨立儀表板頁面，支援編輯「網站名稱、描述、Logo、主色、favicon」
|
||
- 儲存到 `project.json` 擴展結構
|
||
- 前端：新增 `/dashboard/project-settings` 路由
|
||
|
||
2. **檔案管理系統** — 統一的媒體資源管理
|
||
- 改進現有 `upload.php` → 遷移到 Flask
|
||
- 支援資料夾分類上傳
|
||
- 圖片預覽 + 刪除功能
|
||
|
||
3. **頁面組織改進** — 支援頁面群組和排序
|
||
- 在 `project.json` 新增「頁面樹狀結構」和「頁面順序」
|
||
- 編輯器面板顯示頁面層級關係
|
||
|
||
**相關文件**：
|
||
- main.py — 擴展 `/api/projects/<slug>/settings` 端點
|
||
- dashboard.html — 新增設定頁面
|
||
- my-editor.js — 更新檔案管理器
|
||
|
||
**依賴**: 無 | **驗證**: ✅ 能建立和編輯網站基本資訊
|
||
|
||
Phase 1：檔案管理優化
|
||
API 端點：POST /api/projects/<slug>/media/upload
|
||
圖片預覽和刪除
|
||
自動生成縮圖
|
||
本地圖片上傳結構：
|
||
websites/
|
||
└─ my-website/
|
||
└─ media/
|
||
├─ 2026-05/
|
||
│ ├─ banner.jpg
|
||
│ └─ thumbnail.png
|
||
└─ index.json (圖片元數據：上傳時間、大小、alt文本)
|
||
|
||
---
|
||
|
||
### **Phase 2️⃣：自動導覽列模組（第 2-3 週）**
|
||
🧭 根據頁面結構自動生成
|
||
|
||
**步驟：**
|
||
1. **導覽列配置系統** — 支援多種模式
|
||
- 模式 A：自動（頁面層級自動生成）
|
||
- 模式 B：手動（拖拽排序選擇）
|
||
- 模式 C：混合（自動+手動覆蓋）
|
||
|
||
2. **導覽列組件化** — 建立可拖拽的導覽列編輯UI
|
||
- 在 `project.json` 儲存導覽結構
|
||
- 前端：建立可視化編輯器（拖拽排序、新增/刪除項目）
|
||
|
||
3. **導覽列注入** — 自動將導覽列代碼注入所有頁面
|
||
- 建立 HTML 範本 (`_navbar.html`)
|
||
- 編輯器保存時自動合併（防止重複注入）
|
||
|
||
**相關文件**：
|
||
- main.py — 新增 `/api/projects/<slug>/navbar` 端點
|
||
- templates — 新增導覽列管理頁面
|
||
- Vvvebjs — 建立導覽列組件庫
|
||
|
||
**依賴**: 依賴 Phase 1 | **驗證**: ✅ 導覽列在所有頁面正確顯示和更新
|
||
|
||
---
|
||
|
||
### **Phase 3️⃣：部落格模組基礎（第 3-4 週）**
|
||
📰 文章列表、分類、存檔
|
||
|
||
**步驟：**
|
||
1. **部落格資料模型** — 擴展頁面結構
|
||
- 新增文章元數據：`title`, `date`, `category`, `tags`, `excerpt`, `author`
|
||
- 儲存位置：`websites/<slug>/blog/posts/` 下的 `post.json` + `post.html`
|
||
|
||
2. **文章管理 API** — 專用的部落格 CRUD 端點
|
||
- `POST /api/projects/<slug>/blog/posts` — 建立文章
|
||
- `GET /api/projects/<slug>/blog/posts?category=xxx` — 篩選
|
||
- 支援日期排序、分類篩選
|
||
|
||
3. **部落格頁面範本** — 自動生成部落格首頁
|
||
- 文章列表（含摘要）
|
||
- 分類側邊欄
|
||
- 存檔面板（按月份）
|
||
|
||
4. **前端整合** — 編輯器新增「部落格」編輯模式
|
||
- 部落格文章編輯表單（填充元數據）
|
||
- 預覽實時更新
|
||
|
||
**相關文件**：
|
||
- main.py — 新增 `/api/projects/<slug>/blog/*` 端點
|
||
- `templates/blog-editor.html` — 新增部落格編輯頁面
|
||
- blog — 參考範本
|
||
|
||
**依賴**: 依賴 Phase 1 | **驗證**: ✅ 能建立/編輯/分類文章，自動生成列表
|
||
|
||
|
||
Phase 3：部落格文件組織
|
||
搜尋策略：
|
||
|
||
啟動時掃描所有 post.json，建立內存索引
|
||
簡單全文搜尋（title + excerpt 關鍵詞匹配）
|
||
快取文章索引（5 分鐘更新一次）
|
||
websites/my-website/
|
||
└─ blog/
|
||
├─ posts/
|
||
│ ├─ 2026-05-20-first-post/
|
||
│ │ ├─ post.json {title, date, category, tags, author, excerpt}
|
||
│ │ └─ index.html {完整文章內容}
|
||
│ └─ 2026-05-19-second-post/
|
||
├─ categories.json {category_name: count}
|
||
└─ index.json {最後更新時間、文章總數}
|
||
|
||
---
|
||
|
||
### **Phase 4️⃣：進階部落格功能（第 4-5 週）**
|
||
💬 評論、標籤、RSS
|
||
|
||
**步驟：**
|
||
1. **評論系統** — 支援簡單評論（可選認證）
|
||
- 後端：`comments/` 資料夾儲存評論 JSON
|
||
- 前端：評論表單 + 列表顯示
|
||
- 可選垃圾過濾（簡單關鍵詞檢查）
|
||
|
||
2. **標籤系統** — 完整的標籤索引
|
||
- `tags/` 頁面自動生成（顯示所有標籤及文章計數）
|
||
- 支援標籤雲視覺化
|
||
|
||
3. **RSS 源** — 自動生成 RSS feed
|
||
- `GET /sites/<slug>/blog/feed.xml` — 最新 N 篇文章
|
||
- 支援類別篩選 RSS
|
||
|
||
4. **搜尋功能** — 部落格內搜尋
|
||
- 簡單全文搜尋（Python 端搜尋文章標題/內容）
|
||
- 前端搜尋表單
|
||
|
||
**相關文件**：
|
||
- main.py — 新增 RSS 端點、評論端點、搜尋端點
|
||
- templates — 評論表單、搜尋結果頁面
|
||
- 新增 `utils/rss_generator.py` — RSS 生成工具
|
||
|
||
**依賴**: 依賴 Phase 3 | **驗證**: ✅ RSS 訂閱有效，評論顯示正確，搜尋功能工作
|
||
|
||
Phase 4：評論和垃圾過濾
|
||
垃圾過濾（基礎）：
|
||
|
||
檢查過多連結（>3 個 URL = 高風險）
|
||
大寫字母比例（>70% = 可疑）
|
||
黑名單關鍵詞
|
||
評論長度限制（最多 5000 字）
|
||
websites/my-website/blog/posts/2026-05-20-first-post/
|
||
└─ comments.json
|
||
[
|
||
{
|
||
"id": "uuid",
|
||
"author": "name",
|
||
"email": "test@example.com",
|
||
"content": "Great article!",
|
||
"timestamp": "2026-05-20T10:30:00",
|
||
"spam_score": 0.1 // 簡單評分
|
||
}
|
||
]
|
||
|
||
---
|
||
|
||
### **Phase 5️⃣：簡易認證 + 共享機制（第 5-6 週）**
|
||
🔐 社團成員協作與角色管理
|
||
|
||
**步驟：**
|
||
1. **簡易認證系統** — 輕量級密碼保護
|
||
- 後端：管理員密碼 + session token
|
||
- 可選：CSV 匯入成員清單（每人隨機密碼）
|
||
|
||
2. **角色與權限** — 基於角色的訪問控制
|
||
- 角色：管理員（完全控制）、編輯者（編輯頁面）、查看者（只讀）
|
||
- 儲存在 `project.json` 的 `members` 陣列
|
||
|
||
3. **共享邀請** — 簡單的邀請機制
|
||
- 產生邀請連結（有效期 7 天）
|
||
- 訪客可透過邀請連結加入
|
||
|
||
4. **審計日誌** — 追蹤編輯歷史
|
||
- 簡單版本控制：記錄每次保存的「時間、使用者、變更內容」
|
||
- 前端：「版本歷史」側邊欄，支援回溯預覽
|
||
|
||
**相關文件**：
|
||
- main.py — 認證中介軟體、權限檢查
|
||
- main.py — 新增 `/api/auth/*` 端點（登入、邀請、成員管理）
|
||
- `templates/login.html`, `members.html` — 新增認證頁面
|
||
- `utils/audit.py` — 審計日誌工具
|
||
|
||
**依賴**: 依賴 Phase 1 | **驗證**: ✅ 能登入、邀請成員、檢視版本歷史
|
||
|
||
Phase 5：審計日誌與版本 Diff
|
||
Diff 工具：
|
||
|
||
使用 Python difflib 對 HTML 進行行級比較
|
||
前端顯示「並排對比」或「高亮改變」
|
||
支援「回復到此版本」功能
|
||
websites/my-website/
|
||
└─ .audits/
|
||
├─ 2026-05-20-10-30-00-user1-edit.json
|
||
│ {
|
||
│ "timestamp": "...",
|
||
│ "user": "user1",
|
||
│ "action": "edit",
|
||
│ "page": "index.html",
|
||
│ "diff_type": "html_diff",
|
||
│ "diff": [
|
||
│ {"type": "unchanged", "content": "<body>..."},
|
||
│ {"type": "added", "content": "<h1>New Title</h1>"},
|
||
│ {"type": "removed", "content": "<h1>Old Title</h1>"}
|
||
│ ],
|
||
│ "full_hash": "sha256:abc123..."
|
||
│ }
|
||
└─ index.json {版本清單}
|
||
|
||
|
||
---
|
||
|
||
### **Phase 6️⃣：部署與進階功能（第 6-8 週）**
|
||
🚀 自託管選項、進階範本、國際化
|
||
|
||
**步驟：**
|
||
1. **部署支援包** — Docker 容器化 + 部署指南
|
||
- 編寫 `Dockerfile` 最佳實踐
|
||
- 提供 `docker-compose.yml` 配置
|
||
- 支援環境變數配置（資料庫、CDN URL）
|
||
|
||
2. **進階範本庫** — 20+ 預設網站模板
|
||
- 行業模板（餐廳、工作室、社群、新聞）
|
||
- 一鍵部署模板到新專案
|
||
|
||
3. **SEO 最佳化** — 後設資料管理
|
||
- 每頁支援 title、description、og tags
|
||
- 自動 sitemap 生成
|
||
- 結構化資料（JSON-LD）
|
||
|
||
4. **完整國際化** — i18n 支援
|
||
- 多語言界面（至少：繁體中文、English）
|
||
- 前端翻譯系統
|
||
|
||
**相關文件**：
|
||
- `Dockerfile`, `docker-compose.yml` — 容器化
|
||
- 新增 `templates/templates/` — 範本庫管理
|
||
- 新增 `utils/seo.py`, `utils/i18n.py` — SEO 和翻譯工具
|
||
|
||
**依賴**: 依賴 Phase 1 | **驗證**: ✅ 可用 Docker 快速啟動，能選擇範本，多語言切換正常
|
||
|
||
---
|
||
|
||
## 🎯 **實施優先級與並行工作**
|
||
|
||
| 週次 | 主要任務 | 平行工作 | 完成指標 |
|
||
|-----|--------|--------|--------|
|
||
| W1-2 | Phase 1：網站設定、檔案管理 | — | 可編輯網站基本資訊 |
|
||
| W2-3 | Phase 2：自動導覽列 | 回顧 Phase 1 | 所有頁面有正確導覽列 |
|
||
| W3-4 | Phase 3：部落格基礎 | 準備 Phase 4 元素 | 能發佈文章、自動生成列表 |
|
||
| W4-5 | Phase 4：評論、RSS、搜尋 | — | RSS 訂閱、評論、搜尋可用 |
|
||
| W5-6 | Phase 5：簡易認證、邀請 | 進行 Phase 6 規劃 | 能登入、邀請成員、檢視版本 |
|
||
| W6-8 | Phase 6：部署、範本、SEO | 用戶測試 | Docker 快速部署、支援多語言 |
|
||
|
||
---
|
||
|
||
## 🤔 **需要你決定的事項**
|
||
|
||
1. **部落格存儲方案**
|
||
V- 方案 A：純文件系統 (JSON + HTML) — 簡單但搜尋效能差
|
||
- 方案 B：SQLite 資料庫 — 更好的搜尋和篩選
|
||
- 方案 C：混合 — 快取 + 搜尋索引
|
||
|
||
2. **評論審核**
|
||
V- 開放所有評論？
|
||
- 需要管理員審核？
|
||
- 支援評論回覆線程？
|
||
|
||
3. **圖片儲存**
|
||
V- 本地檔案系統？
|
||
- 外部 CDN（如 Cloudinary）？
|
||
- S3 相容服務？
|
||
|
||
4. **版本控制深度**
|
||
- 簡單版本記錄（時間、使用者）？
|
||
V- 完整 diff（顯示改變內容）？
|
||
- Git 整合？
|
||
|
||
---
|
||
|
||
**你對這個計畫有什麼想法？** 需要調整優先級或合併某些階段嗎？ |