Hexo博客在MD文档中写HTML内容的方法

Hexo完全支持在Markdown文档中直接使用HTML代码，无需额外配置，主要有以下几种方式：

一、直接嵌入HTML代码（最常用）

Hexo使用的Markdown解析器（默认是marked，部分主题可能使用其他解析器如hexo-renderer-markdown-it）完全兼容HTML语法。

1. 行内HTML（Inline HTML）

可直接在Markdown文本中插入HTML标签，用于格式化个别文字或添加简单元素：

这是普通文字，<span style="color:red; font-weight:bold;">这是用HTML设置的红色粗体文字</span>，这是普通文字。

点击 <a href="https://hexo.io" target="_blank">Hexo官网</a> 了解更多。

2. 块级HTML（Block-level HTML）

用于创建独立的区块内容，如自定义容器、表格、表单等。注意：块级元素前后需要空一行，且内部Markdown语法可能失效，需使用HTML语法本身。

## 自定义内容区块

<div class="custom-container" style="border: 2px solid #3498db; padding: 20px; border-radius: 8px; background-color: #f8f9fa;">
  <h3 style="color: #3498db; margin-top: 0;">HTML内容区域</h3>
  <p>这里可以放置任何HTML代码，如图片、按钮、列表等</p>
  <button onclick="alert('Hello Hexo!')" style="background-color: #3498db; color: white; border: none; padding: 8px 16px; cursor: pointer;">点击我</button>
</div>

## 复杂表格（HTML实现）

<table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #f0f0f0;">
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

二、使用Hexo标签插件辅助HTML

Hexo提供了一些标签插件，可与HTML结合使用，或解决特殊场景问题：

1. Raw标签（处理特殊语法）

当HTML中包含Hexo模板语法（如{{ }}、{% %}）时，使用``标签包裹，避免被Hexo解析器误处理： ```markdown {% raw %}

模板变量: {{ variable }}

循环语句: {% for item in list %}{{ item }}{% endfor %}

{% endraw %}

### 2. Include标签（嵌入外部HTML文件）
如果HTML内容较多，可将其保存为独立文件，通过`{% include %}`标签引入（文件需放在`source/_includes`目录下）：
```markdown
{% include 'custom-html-content.html' %}

3. 嵌入完整HTML文件（使用iframe）

对于大型HTML内容（如完整页面、交互演示），可将HTML文件放在source目录下，通过iframe嵌入：

<iframe 
  src="/html/demo-page.html" 
  width="100%" 
  height="500px" 
  frameborder="0" 
  scrolling="auto"
></iframe>

三、注意事项与优化技巧

注意事项	解决方法
块级HTML内部Markdown失效	块级元素内使用纯HTML语法，或用<div markdown="1">启用Markdown解析（部分解析器支持）
样式冲突	使用自定义class，避免与主题样式冲突；通过<style>标签添加局部样式
JavaScript不执行	确保主题未禁用页面JavaScript；部分主题可能有安全限制，需在配置中启用
特殊字符转义	<转&lt;，>转&gt;，&转&amp;，避免解析错误

示例：完整MD文档包含HTML

---
title: Hexo中使用HTML示例
date: 2026-06-03 12:00:00
tags: [Hexo, HTML, Markdown]
---

# Hexo + HTML 混合使用指南

## 1. 行内HTML效果
这是<span style="color: #e74c3c; font-size: 1.2em;">红色放大</span>的文字，这是<u>带下划线</u>的文字。

## 2. 自定义卡片组件
<div style="display: flex; gap: 20px; margin: 20px 0;">
  <div style="flex: 1; border: 1px solid #ddd; padding: 15px; border-radius: 5px; background: #f9f9f9;">
    <h4>卡片1</h4>
    <p>HTML+CSS实现的简单卡片</p>
  </div>
  <div style="flex: 1; border: 1px solid #3498db; padding: 15px; border-radius: 5px; background: #eaf6ff;">
    <h4>卡片2</h4>
    <p>带自定义样式的卡片</p>
  </div>
</div>

## 3. 嵌入视频
<video width="100%" controls>
  <source src="/videos/demo.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频。
</video>

## 4. 折叠面板（details标签）
<details style="border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin: 10px 0;">
  <summary style="cursor: pointer; font-weight: bold;">点击展开更多内容</summary>
  <p>这里是隐藏的内容，使用HTML5的details标签实现折叠效果</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</details>

四、进阶用法

1. 引入外部CSS/JS：在MD文档中直接添加<link>和<script>标签，引入外部资源

   <link rel="stylesheet" href="/css/custom-style.css">
   <script src="/js/custom-script.js"></script>
   

2. 使用主题自定义样式：多数Hexo主题（如Butterfly、Next）支持自定义CSS类，可直接在HTML中使用，保持风格统一

3. 通过Hexo脚本注入HTML：对于全站统一的HTML内容，可通过scripts文件夹下的JS文件注入到页面头部或底部

Hexo的Markdown与HTML混合使用非常灵活，几乎可以实现任何网页效果。建议优先使用Markdown语法，仅在需要特殊效果时使用HTML补充。