HTML 文件导入 Twilight

约 1201 字大约 4 分钟

2025-10-10

本指南将帮助您将现有的 HTML 文件内容导入到 Twilight 主题。

HTML 文件与 Twilight 文章格式差异

Twilight 文章的核心是 Markdown 文件，并需要包含特定的 Frontmatter（YAML 头部信息）来定义文章的元数据。直接导入 HTML 文件内容需要将其转换为 Markdown 格式，并添加 Frontmatter。

纯 HTML 文件示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一篇 HTML 文章</title>
</head>
<body>
    <h1>我的第一篇 HTML 文章</h1>
    <p>这是一篇纯 HTML 格式的文章内容。</p>
    <h2>小标题</h2>
    <p>更多内容...</p>
</body>
</html>

Twilight 格式示例（转换为 Markdown 并添加 Frontmatter）：

---
title: HTML 导入指南
published: 2025-01-20
pinned: true
description: 将 HTML 内容导入 Twilight 的详细指南。
tags: [Import, HTML, Twilight]
category: Import Guides
licenseName: "Unlicensed"
author: Your Name
sourceLink: ""
draft: false
---


# 我的第一篇 HTML 文章

这是一篇纯 HTML 格式的文章内容。

## 小标题

更多内容...

导入步骤

1. 准备工作

确保已安装 Twilight 主题。
准备文章存放目录：src/content/posts/。

2. HTML 到 Markdown 的转换

由于 Twilight 使用 Markdown 作为内容格式，您需要将 HTML 内容转换为 Markdown。这通常需要借助工具或库来完成。

推荐工具：

在线转换工具：例如 html2markdown.com 或 pandoc 的在线版本。
编程库：
- Python: BeautifulSoup (用于解析 HTML) 结合 markdownify 或 html2text (用于转换为 Markdown)。
- Node.js: turndown 库。

转换示例 (Python + html2text):

import html2text

html_content = """
<!DOCTYPE html>
<html>
<body>
    <h1>我的第一篇 HTML 文章</h1>
    <p>这是一篇纯 HTML 格式的文章内容。</p>
    <h2>小标题</h2>
    <p>更多内容...</p>
</body>
</html>
"""

h = html2text.HTML2Text()
h.ignore_links = False
markdown_content = h.handle(html_content)

print(markdown_content)

转换示例 (Node.js + turndown):

const TurndownService = require('turndown')

const turndownService = new TurndownService()
const markdown = turndownService.turndown('<h1>我的第一篇 HTML 文章</h1><p>这是一篇纯 HTML 格式的文章内容。</p><h2>小标题</h2><p>更多内容...</p>')

console.log(markdown)

将转换后的 Markdown 内容保存为 .md 文件，并放置到 Twilight 的文章目录 src/content/posts/。

3. 添加 Frontmatter

对于每个转换后的 Markdown 文件，您需要手动或通过脚本添加 Twilight 所需的 Frontmatter。这是导入过程中最关键的一步。

必需字段：

title: 文章标题
pubDate: 发布日期 (格式: YYYY-MM-DD)

示例 Frontmatter：

---
title: Markdown Tutorial
published: 2025-01-20
pinned: true
description: A simple example of a Markdown blog post.
tags: [Markdown, Blogging]
category: Examples
licenseName: "Unlicensed"
author: emn178
sourceLink: "https://github.com/emn178/markdown"
draft: false
---

4. 静态资源处理

如果您的 HTML 文件中包含图片或其他媒体文件，您需要手动处理这些资源。

复制资源文件：将图片、视频等媒体文件复制到 Twilight 的 public/ 目录下，通常建议放在 public/images/ 或 public/assets/。
更新文件路径：确保 Markdown 文件中的图片链接指向 Twilight 项目中的正确路径。
- 示例：![图片描述](/images/your-image.jpg)