0%

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

  • 英语:

在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%;"

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

-------全文结束  感谢您的阅读-------
  • 本文作者: LuoV
  • 本文链接: https://xian6ge.cn/posts/3fecefd4/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!