有时候,需要文章内嵌入网页来展示一些内容。
不仅是html界面,普通的网页,b站视频啥的都可以用iframe嵌入到文章中。
注意,本文内容仅针对typecho使用handsome主题,其他博客或者主题可能不会生效。
如果网页使用iframe过多可能会极大的拖慢你网站的加载速度,甚至让客户无法访问。比如这个教程就嵌入了五个iframe,已经卡的受不了。
举个例子
例如我的这个文章
typecho外链转内链
虽然我也不知道有什么具体用处,但是据说有利于 SEO,我就尝试鼓捣了一下。最终效果就是这样,点击前往GitHub下...
直接使用iframe虽然在桌面端显示正常,但在移动端就会超出界限。
例如下面的写法:
在移动端会超出设备界限。
直接强行100%平铺的话拿整个文章只能显示一个,完全不符合需求。
所以,ucw大佬建议参考这个教程,在外面套一个div
即如下所示:
三个感叹号
三个感叹号
效果入下:
之所以加三感叹号是因为要启用特权模式,不启用特权模式有些参数就无法加载。有点奇怪,单独使用iframe可以解析出来。
拓展
修改iframe内的内容还可以嵌入其他的都行,比如探针,或者是b站视频。
探针
代码如下:
三个感叹号
三个感叹号
b站视频
嵌入的视频:https://www.bilibili.com/video/av57983137
代码如下:
三个感叹号
三个感叹号
疫情地图
代码如下:
三个感叹号
三个感叹号
网盘
代码如下:
三个感叹号
三个感叹号
总结一下
typecho配合handsome后的编辑器,使用特权模式后还是挺强大的,我没使用过其他主题,不知道这个教程在其他主题下表现怎么样。
歪打正着的是,这个也解决了我在typecho的文章内嵌入b站视频的需求。网上搜到的教程都TM是互抄的,压根不能用还信誓旦旦的保证可以用。
这个方法也不用自定义css啥的,挺好。
再次感谢UCW大神,大家没事可以去他的博客朝圣下,233.
此处评论已关闭