-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbuild-tools.html
More file actions
417 lines (366 loc) · 17.5 KB
/
build-tools.html
File metadata and controls
417 lines (366 loc) · 17.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板化网页生成工具：MarkdownConverter&BlogGenerator——原理、功能与使用方法详解 - CoccusQ的博客</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="layout-container">
<!-- 导航栏 -->
<nav class="navbar">
<div class="navbar-container">
<a href="https://coccusq.github.io" class="navbar-logo">CoccusQ</a>
<div class="navbar-links">
<a href="https://coccusq.github.io/about">关于本站✓</a>
<a href="https://github.com/CoccusQ/coccusq.github.io">GitHub↗</a>
</div>
</div>
</nav>
<!-- 左侧边栏 -->
<aside class="sidebar-left">
<!-- 左侧导航内容 -->
</aside>
<main class="main-content">
<header class="article-header">
<h1 class="article-title" id="headline">模板化网页生成工具：MarkdownConverter&BlogGenerator——原理、功能与使用方法详解</h1>
<div class="article-meta">
By <a href="https://github.com/CoccusQ">CoccusQ</a> · 2025.03.01 Update
</div>
</header>
<!-- 下面这个是占位符，不能去除 -->
<section class="section">
<h2 class="section-title" id=""></h2>
<div class="note">
<strong>💡</strong>
<ul>
<li>内容较多较杂，可点击目录快速跳转注意实现</li>
<li>如有疑惑，可点击页脚联系方式与我联系</li>
<li>本文和该工具均采用deepseek辅助生成</li>
</ul>
</div>
</section>
<section class="section">
<h2 class="section-title" id="一、程序原理">一、程序原理</h2>
<p>这是一个将Markdown格式文档转换为结构化JSON配置，并最终生成HTML博客页面的工具链。核心由<code>MarkdownConverter</code>类和<code>BlogGenerator</code>类组成，实现以下核心流程：
</p>
<pre class="language-"><code>Markdown文档 → 结构化JSON → HTML页面</code></pre>
<p>1. Markdown解析阶段 (<code>MarkdownConverter</code>)</p>
<pre class="language-"><code>通过正则表达式逐行解析Markdown元素
识别标题层级（H1-H3）、代码块、列表、段落等元素
构建嵌套的章节结构（Section/Subsection）
生成包含内容语义的JSON配置文件</code></pre>
<p>2. HTML生成阶段 (<code>BlogGenerator</code>)</p>
<pre class="language-"><code>读取HTML模板和JSON配置
将结构化内容注入模板生成最终页面</code></pre>
</section>
<section class="section">
<h2 class="section-title" id=""></h2>
<div class="subsection">
<h3 class="subsection-title">协同工作流程示意图</h3>
<pre class="language-"><code>[Markdown编辑器]
↓
[MarkdownConverter] → (config.json)
↓
[BlogGenerator] → [HTML模板]
↓
[浏览器] ← output.html</code></pre>
</div>
</section>
<section class="section">
<h2 class="section-title" id="二、核心功能">二、核心功能</h2>
<p>1. 支持元素类型</p>
<p>标题：<code># H1</code>、<code>## H2</code>、<code>### H3</code></p>
<p>代码块：```包裹的代码段（支持语言标注）</p>
<p>无序列表：以<code>- * +</code>开头的列表项</p>
<p>普通段落：连续文本内容</p>
<p>1. 数据结构化</p>
<p>生成嵌套的JSON结构：</p>
<pre class="language-json"><code>{
"title": "文档标题",
"sections": [
{
"id": "章节ID",
"title": "章节标题",
"subsections": [
{
"id": "子章节ID",
"title": "子章节标题",
"content": [/* 内容元素 */]
}
]
}
]
}</code></pre>
<p>内容元素支持四种类型：</p>
<p>普通文本段落：<code>"段落内容"</code></p>
<p>代码块：<code>{ "code": ["line1", "line2"], "notes": { ... } }</code>
</p>
<p>要点列表：<code>{ "notes": { "title": "要点说明", "items": [...] } }</code>
</p>
<p>表格：<code>{ "table": { "headers": ["header1", ..."], "align": ["left", ...], "rows": [...] } }</code>
</p>
</section>
<section class="section">
<h2 class="section-title" id="三、使用方法">三、使用方法</h2>
<p>1. 输入文件准备</p>
<p>创建<code>input.md</code>文件，按以下规范编写内容：</p>
<pre class="language-markdown"><code># 博客标题
## 主章节1
### 子章节1
段落文本...
- 列表项1
- 列表项2
```python
print("代码示例")
```
## 主章节2
直接内容...</code></pre>
<p>2. 模板文件准备</p>
<p>创建<code>template.html</code>，需包含占位符（具体格式需与<code>BlogGenerator</code>实现匹配）</p>
<p>3. 执行转换</p>
<pre
class="language-python"><code># 创建转换器实例
converter = MarkdownConverter()
# 转换Markdown为JSON配置
converter.convert("input.md", "config.json")
# 生成最终HTML
blog_generator.BlogGenerator("template.html").generate("config.json", "output.html")</code></pre>
<p>输出文件说明</p>
<p><code>config.json</code>：结构化内容配置</p>
<p><code>output.html</code>：最终生成的博客页面</p>
</section>
<section class="section">
<h2 class="section-title" id="四、注意事项">四、注意事项</h2>
<p>1. 格式规范</p>
<div class="note">
<strong>💡</strong>
<ul>
<li>必须包含且仅有一个H1标题</li>
<li>子章节（H3）必须位于主章节（H2）内</li>
<li>代码块必须成对出现（三个反引号闭合），在markdown文档内反引号请顶格</li>
<li>列表内暂不支持代码块和公式</li>
<li>若想在markdown代码块内嵌套代码块，请缩进</li>
</ul>
</div>
<p>2. 特殊处理</p>
<p>列表项自动转为<code>notes</code>对象</p>
<p>代码块语言说明存储于<code>notes.title</code></p>
<p>连续段落自动合并为数组元素</p>
<div class="note">
<strong>💡</strong>
<ul>
<li>若想手动更改格式，请在`output.html`文件内直接编辑</li>
</ul>
</div>
</section>
<section class="section">
<h2 class="section-title" id="五、示例工作流">五、示例工作流</h2>
<p>1. 输入<code>input.md</code>：</p>
<pre class="language-markdown"><code># 机器学习入门
## 核心概念
### 监督学习
主要特点包括：
- 需要标注数据
- 用于预测任务
```python
model.fit(X_train, y_train)
```
## 实践步骤
1. 数据预处理
2. 模型训练</code></pre>
<p>2. 输出<code>config.json</code>片段：</p>
<pre class="language-json"><code>{
"title": "机器学习入门",
"sections": [
{
"id": "核心概念",
"title": "核心概念",
"subsections": [
{
"id": "监督学习",
"title": "监督学习",
"content": [
"主要特点包括：",
{
"notes": {
"title": "要点说明",
"items": ["需要标注数据", "用于预测任务"]
}
},
{
"code": ["model.fit(X_train, y_train)"],
"notes": {"title": "语言说明", "items": ["编程语言: python"]}
}
]
}
]
}
]
}</code></pre>
</section>
<section class="section">
<h2 class="section-title" id="六、总结">六、总结</h2>
</section>
<section class="section">
<h2 class="section-title" id=""></h2>
<div class="subsection">
<h3 class="subsection-title">双程序对比总结</h3>
<div class="markdown-table-container">
<table class="markdown-table">
<thead>
<tr>
<th style="text-align: left">维度</th>
<th style="text-align: left">MarkdownConverter</th>
<th style="text-align: left">BlogGenerator</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">核心功能</td>
<td style="text-align: left">Markdown→结构化JSON</td>
<td style="text-align: left">结构化JSON→HTML</td>
</tr>
<tr>
<td style="text-align: left">处理方式</td>
<td style="text-align: left">状态机解析</td>
<td style="text-align: left">模板引擎替换</td>
</tr>
<tr>
<td style="text-align: left">核心算法</td>
<td style="text-align: left">正则匹配+层级状态管理</td>
<td style="text-align: left">递归DOM构建+字符串操作</td>
</tr>
<tr>
<td style="text-align: left">错误处理</td>
<td style="text-align: left">隐式处理（自动跳过）</td>
<td style="text-align: left">显式try-catch+详细错误提示</td>
</tr>
<tr>
<td style="text-align: left">安全机制</td>
<td style="text-align: left">无</td>
<td style="text-align: left">HTML转义+链接校验</td>
</tr>
<tr>
<td style="text-align: left">扩展性</td>
<td style="text-align: left">需修改正则和状态逻辑</td>
<td style="text-align: left">通过模板修改+新内容类型处理</td>
</tr>
<tr>
<td style="text-align: left">输入输出</td>
<td style="text-align: left">.md → .json</td>
<td style="text-align: left">.json + .html → .html</td>
</tr>
<tr>
<td style="text-align: left">复杂度</td>
<td style="text-align: left">高（需处理嵌套关系）</td>
<td style="text-align: left">中（主要处理结构转换）</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="section">
<h2 class="section-title" id=""></h2>
<div class="subsection">
<h3 class="subsection-title">工具链整体特性</h3>
<p>1. 模块化架构</p>
<div class="note">
<strong>💡</strong>
<ul>
<li>内容生成（Converter）与样式呈现（Generator）解耦</li>
<li>通过JSON实现数据中转</li>
</ul>
</div>
<p>2. 标准化输出</p>
<div class="note">
<strong>💡</strong>
<ul>
<li>统一的章节结构规范</li>
<li>预定义的内容类型（code/notes/paragraph）</li>
</ul>
</div>
<p>3. 可维护性</p>
<div class="note">
<strong>💡</strong>
<ul>
<li>清晰的错误提示信息</li>
<li>详细的代码注释</li>
</ul>
</div>
<p>4. 典型应用场景</p>
<div class="note">
<strong>💡</strong>
<ul>
<li>技术文档生成</li>
<li>博客文章发布</li>
</ul>
</div>
<p>该工具适用于需要将技术文档转换为结构化展示页面的场景，通过分离内容与表现形式，可快速生成风格统一的系列教程页面。</p>
</div>
</section>
<!-- 索引部分 -->
<div class="guide-grid">
<article class="guide-card">
<div class="guide-card-left">
<span class="guide-date">Last post</span>
<a href="https://coccusq.github.io/c-stl-list" class="guide-title-link">
<h2 class="guide-title">« C语言实现STL：list（双向循环链表）</h2>
</a>
</div>
</article>
<article class="guide-card">
<div class="guide-card-right">
<span class="guide-date">Next post</span>
<a href="https://coccusq.github.io/autoplayer" class="guide-title-link">
<h2 class="guide-title">Python音乐播放器：AutoPlayer »</h2>
</a>
</div>
</article>
</div>
</main>
<!-- 右侧边栏 -->
<aside class="sidebar-right">
<div class="sidebar-header">文档目录</div>
<nav class="sidebar-nav" id="sidebar-nav"></nav>
</aside>
<!-- 页脚内容 -->
<footer class="footer">
<div class="footer-container">
<div class="footer-column">
<h4 class="footer-title">About us</h4>
<div class="footer-links">
<a href="https://coccusq.github.io/about">✒️Learn More</a>
<a href="https://coccusq.github.io/build-tools">🛠️Build-tools</a>
</div>
</div>
<div class="footer-column">
<h4 class="footer-title">Useful Tools</h4>
<div class="footer-links">
<a href="https://chat.deepseek.com">🤖DeepSeek</a>
<a href="https://github.com/cayxc/Mdtht">📑Mdtht</a>
<a href="https://www.emojiall.com">😄EMOJIALL</a>
</div>
</div>
<div class="footer-column">
<h4 class="footer-title">Social</h4>
<div class="footer-links">
<a href="mailto:king_crab_cn@outlook.com">Email</a>
<a href="https://github.com/CoccusQ/coccusq.github.io">GitHub↗</a>
</div>
</div>
</div>
<div class="footer-divider"></div>
<div class="footer-copyright">
<p>© 2025 CoccusQ 🇨🇳. All rights reserved.</p>
</div>
</footer>
<div class="copy-feedback" id="copyFeedback"></div>
<script src="script.js"></script>
<!-- 代码高亮 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-c.min.js"></script>
</body>
</html>