什么是 MDL Blog？

MDL Blog 是一个轻量级的静态博客框架，基于 Google Material Design Lite (MDL) 构建。它不需要数据库，不需要 Node.js，只需 Python + Flask 即可在本地管理内容，然后一键部署到 GitHub Pages。

核心特性

• Material Design 风格 — 遵循 MD1 设计规范，5 套配色主题可切换
• Markdown 写作 — 支持 GFM 语法、代码高亮（17 种语言）、表格、引用块
• 可视化后台 — 浏览器内文章管理，支持实时预览、草稿保存
• 零数据库 — 所有数据存储在 blog-data.json，Git 友好
• 一键部署 — 内置 GitHub Actions 工作流，推送到 main 分支自动发布
• 轻量可扩展 — 核心代码仅 2 个文件（Python 后端 + HTML 前端），易于定制

快速开始

环境要求

• Python 3.8+
• pip

安装步骤

# 1. 克隆仓库
git clone https://github.com/your-username/mdl-blog.git
cd mdl-blog

# 2. 安装依赖
pip install -r requirements.txt

# 3. 启动本地服务器
python blog-admin.py

启动后访问：

• 博客首页：http://localhost:5001/
• 管理后台：http://localhost:5001/admin

写第一篇文章

1. 打开管理后台 http://localhost:5001/admin
2. 在右侧编辑器中填写标题、日期、摘要
3. 在 Markdown 编辑器中编写正文
4. 点击预览确认效果
5. 点击保存并发布即可

项目结构

mdl-blog/
|-- blog-admin.py          # Flask 后端
|-- blog-admin.html        # 管理后台
|-- blog-data.json         # 博客数据
|-- styles.css             # 全局样式
|-- requirements.txt       # Python 依赖
|-- README.md              # 项目文档
|-- images/                # 静态图片
|-- blog/
|   |-- covers/            # 封面图
|   |-- backgrounds/       # 背景图
|   +-- posts/             # 文章 HTML（自动生成）
|-- lib/mdl/               # MDL 框架（5 套主题）
+-- .github/workflows/     # GitHub Pages 部署

Markdown 支持

编辑器支持 GFM 全语法：

def hello(name: str) -> str:
    return f"Hello, {name}!"

print(hello("MDL Blog"))

引用块用于突出重要内容，左侧有 Material Design 风格的蓝色边线标识。

部署到 GitHub Pages

1. 在 GitHub 创建新仓库
2. 推送代码到 main 分支
3. Settings -> Pages -> Source 选择 GitHub Actions
4. 每次推送自动部署

git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

自定义扩展

修改站点信息

编辑 blog-data.json：

• author — 作者名称
• title — 博客标题
• subtitle — 博客副标题

切换主题配色

在 styles.css 中修改 MDL 主题引用即可，共 5 套配色可选。

添加新页面

1. 在根目录创建 HTML 文件
2. 参照现有页面引入 MDL 样式
3. 在导航菜单中添加链接