Hexo 文章中展示自定义的 HTML 内容

发表于 更新于 分类于 阅读次数： 本文字数： 1k 阅读时长 ≈ 1 分钟

在 Hexo 的博文中，有时需要展示一些自定义的 HTML 内容或者样式。这部分内容是文章的组成部分之一，也不是全局的样式。但 Hexo 是使用 markdown 语言进行书写，然后编译为 HTML 内容的。因此直接在其中展示 HTML 会被编译为普通文字，甚至编译不通过。

那么，可以利用 markdown 支持 HTML 标签的特性，通过嵌套额外的网页来提升效果。例如本站关于页面中的动态时钟和友情链接中的友站样式。

代码如下：

1
2
3
4
<span style="width:100%; height:260;border:none;text-align:center"> 
	<iframe allowtransparency="yes" frameborder="0" width="100%" height="88" src="url">
	</iframe>
</span>

其中，url 指向的是独立的 HTML 文件，在同级目录建立。为了避免文件被编译而被嵌套样式，需要在头部添加标记，关闭编译。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
layout: false
title: "内容标题"
comments: false
permalink:
---
<html lang="en">

<style type="text/css">
    <!--  自定义样式 -->
</style>
<script language=javascript>
	<!--  自定义脚本 -->
</script>
</head>

<body>
	<!--  网页主要内容 -->
</body>

</html>

例如，本站关于中的建站时间计时器。
不过需要注意的是，如果博客开启了懒加载，图片会显示不出来，这是因为在懒加载过程前，图片的 src 标签会显示为 data-src，然后在加载时改会原来的进而正常渲染。不过外部的 js 无法作用到 iframe 框内的内容，导致图片无法显示，因此需要将图片作为背景展示。将原本的 img 标签中加入如下的样式：

1
2
3
style="
	background:url('img_url');
	background-repeat:no-repeat ;background-size:100% 100%;"

这样，就可以在博文中辟出一块区域展示自定义的样式了。