網頁管理編輯器

Fork

This project is forked from vvvebjs

目的

為了替代Google site可以提供社團或者一些使用者來進行簡易架站（如Publii之類的） 以及希望可以增加Google site不支援的模組如Blog等 但是由於本人對Python比較熟悉，所以不考慮使用現有的vvvebjs cms套組，而是另外重新撰寫dashboard等 我就是死不用node的傢伙 (其實相當於是預期重製一套更好用一點CMS套組)

requirement

uv(python 3.13)

預計功能

• 中文化

• 部落格模組

• 帳號管理（註冊登入網站管理器、網站成員管理）

• 網站管理（頁面管理、模組管理、檔案管理、版本控制）

• 部署功能（網域配置：dns與tunnel設置？）

• 網站模板（提供一些預設模板）

• 網站設定（如網站名稱、網站描述、網站logo等）

• 自動導覽列模組（根據頁面名稱自動生成導覽列）

• 電子報設計功能

招募貢獻

目前還在開發中，歡迎有興趣的開發者一起參與開發，可以來信跟我說！

📋 分步計畫架構

根據你的需求，我建議將開發分為 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//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": "..."}, │ {"type": "added", "content": "

New Title

"}, │ {"type": "removed", "content": "

Old Title

"} │ ], │ "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 整合？

---

你對這個計畫有什麼想法？ 需要調整優先級或合併某些階段嗎？