使用说明

一、文件部署

将上面提供的完整代码保存为 main-h5.php，放到您的主题目录的 includes/ 文件夹中：

text

你的主题目录/
└── includes/
    └── main-h5.php  (完整替换为此文件)

二、三种模式的使用方法

模式1：普通文章模式（不加任何标记）

用途：正常的博客文章，显示主题原有的样式

文章内容示例：

这是一篇普通的博客文章，没有任何特殊标记。

这里可以写正常的文字、插入图片等。

效果：显示主题的页头、页脚、侧边栏、评论区，内容区域为正常宽度

模式2：iframe完美隔离模式（推荐）

用途：嵌入复杂的H5页面（如您之前遇到问题的图片压缩工具），完美解决样式冲突

文章内容示例：

<!--H5MODE-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的H5页面</title>
<style>
    body {
        margin: 0;
        padding: 20px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        font-family: system-ui;
    }
    .card {
        background: white;
        border-radius: 24px;
        padding: 40px;
        text-align: center;
        max-width: 400px;
        margin: 0 auto;
    }
    button {
        background: #667eea;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 999px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="card">
        <h1>✨ 独立H5页面</h1>
        <p>这是一个完整HTML页面，通过iframe嵌入</p>
        <button onclick="alert('Hello!')">点击</button>
    </div>
</body>
</html>

效果：

  • ✅ 保留主题的页头、页脚
  • ✅ H5内容全宽显示
  • ✅ 完美样式隔离，与主题不冲突
  • ✅ 支持黑暗模式自动适配
  • ✅ 移动端友好

模式3：强制使用iframe模式

用途：当您想确保某个页面一定使用iframe模式时

文章内容示例：

<!--H5MODE IFRAME-->
<!DOCTYPE html>
<html>
... 您的完整H5代码 ...
</html>

模式4：强制使用嵌入模式

用途：当您需要H5内容与主题页面有交互（如调用主题的JS函数）时

文章内容示例：

html

<!--H5MODE EMBED-->
<!DOCTYPE html>
<html>
... 您的完整H5代码 ...
</html>

注意：嵌入模式可能仍有样式冲突风险，除非您需要与主题交互，否则建议使用iframe模式

三、配置默认模式

在 main-h5.php 文件开头可以修改默认模式：

// 全局默认模式: 'iframe' 或 'embed'
$h5_isolation_mode = 'iframe';  // 改为 'embed' 可切换默认模式

四、针对您现有页面的建议

对于您当前的 https://qxgifts.com/qx11.html 页面（图片压缩工具）：

  1. 编辑该文章，将原有内容全部删除
  2. 粘贴以下内容：
<!--H5MODE IFRAME-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>七寻礼纪 - 图片压缩工具</title>
<style>
    /* 您的完整工具样式 */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        font-family: system-ui, -apple-system, sans-serif;
        background: #f8f9fa;
        padding: 20px;
    }
    /* ... 其他样式保持不变 ... */
</style>
</head>
<body>
    <!-- 您的工具HTML结构 -->
</body>
</html>
  1. 保存并发布，页面错位和黑暗模式问题将会解决

五、常见问题

问题解决方法
H5内容显示空白检查是否添加了 <!--H5MODE--> 标记
iframe高度显示不全代码已包含自动高度调整，等待几秒即可
黑暗模式下H5背景怪异iframe模式会自动继承，无需额外处理
想保留主题的评论区普通文章模式会保留，iframe模式不会
H5页面需要调用主题JS使用 <!--H5MODE EMBED--> 嵌入模式

六、快速参考

您想要的效果使用标记
普通博客文章不加标记
独立H5页面（推荐）<!--H5MODE-->
强制iframe模式<!--H5MODE IFRAME-->
强制嵌入模式<!--H5MODE EMBED-->