Insert single html

尝试在博客中插入单独的html

方法1:直接写入 容易影响其他页面

最初使用了如下tag脚本来将对应html直接写入md中，但这样会导致渲染主页时包含独立样式的html的污染主页样式。

1
2
3
4
5
6
7
8
9
hexo.extend.tag.register('include_html', function(args) {
    
    const fs = require('fs');
    const path = require('path');
    const filePath = path.join(hexo.source_dir, '_html', args[0]);
    const htmlContent = fs.readFileSync(filePath, 'utf8');
    return htmlContent
});
调用: {% include_html "testsingle.html" %}

方法2:使用iframe元素 效果较好

最后使用了如下tag脚本来生成对应iframe元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo.extend.tag.register('include_iframe', function(args) {
    const path = require('path');
    const fs = require('fs');
    const filePath = path.join(hexo.source_dir, 'html', args[0]);

    // 检查文件是否存在
    if (!fs.existsSync(filePath)) {
        console.error('File does not exist:', filePath);
        return '<p>Error: HTML file does not exist.</p>'; 
    }

    // 构建iframe标记，引用HTML文件
    const urlPath = '/html/' + args[0]; 
    return `<iframe src="${urlPath}" style="width:100%; height:100%; border:none;"></iframe>`;
});
调用: {% include_iframe "testsingle.html" %}

方法2效果:

如果想原封不动的放入单个html,在md中设置layout: false即可