2000年01月01日 · 指南页面

Blog简单页面增修工具
-->markdown格式

使用markdown简单写博客，html拜拜了您嘞

NW' Blog 文章管理工具

一个(并非)强大的桌面应用程序，让你能够轻松编写、管理和发布博客文章。支持 Markdown 编写，一键导出为 HTML 或 Astro 格式，并自动维护归档页面。

主要特性

所见即所得编辑 – 双栏布局：左侧表单管理元信息，右侧 Markdown 编辑器编写正文，双向自动同步。
超强 Markdown 解析 – 支持包含特殊字符（如  、->）的 Frontmatter，正文逐行扫描，绝不丢失内容。
智能图片处理 – 使用标准 Markdown 图片语法 <figure><img class="content-image" src="路径" alt="描述"><figcaption>小标题</figcaption></figure>，生成 HTML 时自动转换为带小标题的 <figure> 或普通 <img>。
双格式导出 – 一键导出为 HTML（完整页面）或 Astro 组件，路径自动适配（相对路径 / 绝对路径）。
归档管理 – 可视化列表显示所有文章，支持添加（自动编号）和删除（条目 + 文件）。
自定义侧边栏 – 可自由修改 Promo 区域的标题和内容。
可移植项目 – 图片默认使用 images/ 相对路径，轻松部署到 Vercel 等平台。

安装与启动

1. 环境要求

Python 3.8 或更高版本
建议使用虚拟环境

2. 安装依赖

pip install beautifulsoup4 markdown lxml

3. 运行工具

python article_tool.py

提示：将 article_tool.py 保存为任意文件名，确保与 styles.css、site.js 等资源文件放在同一目录（或后续调整路径）。

核心功能使用指南

主界面布局

文章信息表单：填写标题、日期、类型、摘要、主图、标签、侧边栏 Tagline / Badge、Promo 标题 / 内容。
Markdown 编辑器：编写正文，支持标准 Markdown 语法 + 扩展图片语法。
手动同步按钮：表单 → 编辑器 和 编辑器 → 表单，用于精确控制同步方向（自动同步已默认开启）。
工具栏：导入 HTML/Markdown、导出 Markdown、导出文章、插入图片、更新归档。

文章编写流程

填写基本信息（标题、日期等）。
在编辑器中编写正文，使用 ## 开头表示章节标题。
插入图片：点击工具栏 “插入图片”，选择文件并输入描述和小标题（小标题可选）。
导出文章：点击 “导出文章” 或按 Ctrl+G，在弹出的对话框中选择格式（HTML 或 Astro）。
更新归档：切换到 “归档管理” 标签，选择 archive.html，点击 “添加当前文章到归档”。

文章编写格式完整教程

本工具基于 Markdown 语法，并扩展了图片处理功能。所有标准 Markdown 语法均受支持，以下是详细说明。

1. 标题（章节）

使用 ## 开头表示二级标题（即文章中的章节）。
每个 ## 标题会自动生成目录条目。 ```

第一章

这是第一章的内容...

第二章

这是第二章的内容...


    ### 2. 图片（重点）
    **语法**：`<figure><img class="content-image" src="图片路径" alt="图片描述"><figcaption>小标题</figcaption></figure>`
    - `图片描述`：图片的 `alt` 文本，必填。
    - `图片路径`：图片的相对或绝对路径，推荐使用 `images/文件名`。
    - `小标题`：可选，用英文双引号括起。如果存在，生成 HTML 时会在图片下方显示小标题；如果省略，只显示图片本身。

    **示例**：
    ```markdown
    <figure><img class="content-image" src="images/arch.png" alt="系统架构图"><figcaption>图1 整体架构</figcaption></figure>
    <img class="content-image" src="images/photo.jpg" alt="无标题图片">

生成效果（HTML）： - 有标题：<figure><img src="images/arch.png" alt="系统架构图"><figcaption>图1 整体架构</figcaption></figure> - 无标题：<img src="images/photo.jpg" alt="无标题图片">

注意：路径默认为 images/，在 Astro 模式下会自动转换为 /images/。

3. 字体样式

样式	语法	示例
加粗	`加粗`	加粗
斜体	`斜体` 或 `_斜体_`	斜体
加粗+斜体	`*加粗斜体*`	*加粗斜体*
删除线	`~~删除线~~`	~~删除线~~
下划线	HTML 标签 `<u>下划线</u>`	下划线
行内代码	`代码`	`代码`

4. 列表

无序列表：使用 -、+ 或 * 开头。

- 项目一
    - 项目二
      - 子项目

有序列表：使用数字加 . 开头。

1. 第一步
    2. 第二步
       1. 子步骤

5. 链接

外部链接：[链接文字](URL)

[GitHub](https://github.com)

内部链接（指向本站其他文章）： - HTML 模式：[文章名](article1.html) - Astro 模式：[文章名](/article1/)

建议在写正文时使用相对路径，工具不会自动转换内部链接，但你可以根据目标格式手动调整。

6. 代码块

使用三个反引号 ``` 包裹，并可指定语言。

```python
    print("Hello, World!")
    ```

7. 引用

使用 > 开头。

> 这是一段引用文字。

8. 分隔线

使用三个或更多 ---、*** 或 ___ 单独占一行。

9. 特殊字符转义

如果需要显示 *、_、# 等符号，请在前面加反斜杠 \，例如 \*。

10. 支持的 HTML 标签

由于本工具使用 Python 的 markdown 库并启用 extra 扩展，你还可以在正文中直接插入以下 HTML 标签（不会影响 Markdown 解析）： -  下划线 -  标记 -  /  上下标 - <div> 容器（谨慎使用） - 以及 <figure> / <figcaption> 等（但推荐使用图片语法，工具会自动生成）

11. 段落与换行

段落之间用空行分隔。
如果需要强制换行（不产生新段落），在行末加两个空格或使用   标签（Frontmatter 中也可用）。

12. Frontmatter（文章元信息）

文章开头需包含 --- 包裹的 YAML 风格字段，用于控制页面标题、日期、类型等。示例如下：

---
    title: 博客简单页面增修工具
    date: 2000-01-01
    type: 内容页面
    excerpt: 使用markdown简单写博客，html拜拜了您嘞
    image: images/wws.jpg
    tags: 项目实战, 设计, BlogTool
    tagline: 本页展示文章内容。
    icon: fa-pen-fancy
    badge_text: BlogTool
    promo_title: 提示
    promo_text: 如果你正在构建数据型页面，建议先确认信息优先级，再逐步加入交互层。
    ---

字段含义见下文“文章信息表单”部分。

文章信息表单字段说明

字段	说明
标题	文章主标题，显示在页面顶部和浏览器标签
日期	格式 `YYYY-MM-DD`，用于归档排序和显示
类型	如“内容页面”、“项目实战”等，显示在 meta 行
摘要	显示在标题下方，简要介绍文章
主图路径	可选，显示在摘要下方作为头图
标签	逗号分隔，显示在左侧“热门标签”区域
侧边栏 Tagline	左侧侧边栏中的简短描述
Badge 文字	侧边栏中的徽章文字
Promo 标题	右侧边栏提示框的标题（默认“提示”）
Promo 内容	右侧边栏提示框的内容

导出格式对比

特性	HTML	Astro
文件扩展名	`.html`	`.astro`
模板类型	完整 HTML 页面	Astro 组件（`import BaseLayout`）
内部链接	`articleX.html`	`/articleX/`
图片路径	`images/xxx`	`/images/xxx`
适用场景	静态站点托管（如 GitHub Pages）	Astro 项目（如 Vercel 部署）
归档兼容	直接使用 `archive.html`	需手动调整链接格式（本工具不自动转换）

推荐：如果使用本工具管理归档，请保持 archive.html 为 HTML 格式，并定期更新。

归档管理

归档文件（archive.html）是一个标准 HTML 页面，包含时间线列表。本工具提供以下操作：

选择归档文件：点击“选择归档文件”按钮，选取你的 archive.html。
刷新列表：显示所有已归档文章（日期、标题、类型）。
添加当前文章：自动将当前文章的 HTML 复制到归档目录，按日期排序插入时间线，并自动编号（articleX.html）。
删除选中文章：单击列表中的文章，点击“删除选中文章”即可移除归档条目并删除对应的 HTML 文件。

注意：删除操作不可撤销，请谨慎使用。

常见问题

1. 为什么正文中的图片不显示？

检查图片路径是否正确，推荐使用相对路径 images/文件名。
确保图片文件存在于 images/ 文件夹中。
生成 HTML 后，若在浏览器中打开，请确保图片路径相对于 HTML 文件位置正确。

2. 如何自定义侧边栏 Promo？

在文章信息表单底部修改“Promo 标题”和“Promo 内容”，导出时会自动应用到右侧边栏。

3. Astro 模式生成的 `.astro` 文件如何集成到项目中？

将生成的 .astro 文件放在 src/pages/ 目录（或相应路由目录），工具会自动识别路由。确保项目中有 layouts/BaseLayout.astro 和 styles.css 等依赖。

4. 导入 Markdown 时 frontmatter 解析失败？

确保文件开头是 ---，且键值对使用 : 分隔（冒号后有空格）。
允许值中包含 : 和特殊字符，本工具已优化解析。

5. 插入图片时弹出对话框，但插入的路径是 `images/`，可以更改吗？

可以，插入后手动修改编辑器中的路径即可，支持任意相对或绝对路径。

6. 如何添加更多标签？

在表单“标签”字段用英文逗号分隔，例如 项目实战, 设计, BlogTool。

7. 支持 GIF 动图吗？

完全支持，选择 GIF 文件即可，语法相同，生成的 HTML 会正常显示动图。

8. 文章内容中可以插入视频或音频吗？

可以，直接使用 HTML 的 <video> 或 <audio> 标签嵌入，Markdown 会原样保留。

技术栈

Python 3.8+
Tkinter（GUI）
BeautifulSoup4（HTML 解析）
Markdown（转换）
LXML（HTML 解析加速）

许可证

🤝 贡献与反馈

欢迎提交 Issue 或 Pull Request。若有任何使用问题，可联系作者（见博客侧边栏）。

Happy Writing! 🎉

Blog简单页面增修工具-->markdown格式