🍥

Coffity's Blog

吹灭读书灯，一身都是月

嵌入HTML-气体单位转换器

方式一：Markdown 嵌入 Iframe

这里直接将 HTML 通过 Iframe 的方式嵌入。步骤如下：

将 HTML 文件放入 static/html-files/example.html。
在你的 Markdown 文章中直接写入 <iframe> 标签：

1
2
3
4
5


这是我的博文内容...

<iframe src="/html-files/example.html" width="100%" height="1000px" frameborder="0"></iframe>

继续博文内容...

缺点：Markdown 编辑器中无法预览，因为 html 文件在博客目录下，不再笔记软件目录下

方式 2：博客嵌入 html

如果你希望这个 HTML 文件看起来像一篇普通的博文，带有 hugo-theme-stack 的侧边栏、头像和评论区，你可以直接将 HTML 放在 content 文件夹下。操作步骤如下：

将 .html 文件放入 content/post/（或其他你存放文章的目录）。
关键：添加 Front Matter。在 HTML 文件的最顶端手动加入 Hugo 的元数据（YAML 格式），并用 --- 包裹。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


---
title: "我的 HTML 页面标题"
date: 2023-10-27
description: "这是一个直接使用 HTML 编写的文章"
image: "cover.jpg"
---

<div>
    <h1>欢迎来到我的页面</h1>
    <p>这段内容会自动被套在 Stack 主题的框架内。</p>
</div>

注意点：

不要包含 <html>, <head>, <body> 标签。Hugo 的模板会自动生成这些标签。
只保留 <body> 内部的核心内容。
如果 HTML 里有专属的 <style> 或 <script>，可以直接写在里面。

缺点：会破坏原始 HTML 格式，破坏了想要恢复回来比较麻烦

如果 HTML 中本来就引用了一些样式，和博客自身的样式容易引起冲突（例如网页宽度）

这里放弃方式 2 了，直接用方式 1 吧

下面演示：方式 1