事情是这样的
由于刚进typecho坑不久
加上在这方面完完全全就是0基础小白
所有的东西都是一边学一边做
整个国庆假期都是在谷歌百度q群中度过
倒也过得挺充实,好歹博客是开门接客了
昨天无意中发现南博app,卧槽太舒服了
再也不用进后台编辑了
把玩app的时候又发现动态这么个玩意
这不就是俗称的时光机功能吗
看到大神们的demo后惊为天人
简直不要太完美了
一个app就把博客和动态全管理起来
一扫之前写博客和发动态操作的割裂感带来的不适
啥也不说,我冲了
装好后发现,动态页面和我正在用的主题不能说不搭吧
简直就是两个毫不相关的东西
我当然希望这个动态页面可以和主题融合
又是好一顿谷歌百度github找教程
官方教程对于我这样没基础的人来说,等于没有
搜到吐也没搜到其他教程
正所谓世上无难事,只要肯放弃
一番天人交战后决定,放弃了
转身看到一个足迹地图还挺好玩的
就跟着教程也弄了一个
这个时候,一段iframe代码引起了我的注意
我心想,既然iframe可以将足迹地图嵌入到我的主题页面里
那动态页面不也可以这样操作吗?
这不就融合了吗?
说干就干,将足迹地图中的iframe代码扒过来试试
<div style="padding-bottom: 0%;width: 100%;position: relative;">
<iframe src="url"
frameborder="no"
border="0"
scrolling="No"
marginwidth="0"
marginheight="0"
width="100%"
height="1000px"
></iframe></div>
唔,开始有点内味了
但是同时我也发现了问题
由于代码中设定了高度为1000像素
但是实际情况肯定是不适用的
动态有长有短,或者发个图片什么的
固定高度就会导致效果页面中显示不全的情况
这就要求代码可以自动适应动态页面的长度然后嵌套进主题页面中
又是一番百度谷歌github,终于找到了一段代码
<iframe src="url"
frameborder="0"
scrolling="no"
width="100%"
id="test" onload="this.height=100">
</iframe>
<script type="text/javascript">
function reinitIframe() {
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
} catch (ex) {}
}
window.setInterval("reinitIframe()", 200);
</script>
部分常用参数
name:内嵌帧名称
width:内嵌帧宽度(可用像素值或百分比)
height:内嵌帧高度(可用像素值或百分比)
frameborder:内嵌帧边框
marginwidth:帧内文本的左右页边距
marginheight:帧内文本的上下页边距
scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)
src:内嵌入文件的地址
style:内嵌文档的样式(如设置文档背景等)
allowtransparency:是否允许透明
说实话代码是啥意思我也不知道
但是效果是出来了
这个时候再把header和footer一些多余的内容删掉,再调整一下样式
虽然不能说100%融合,但也有个七八成了
起码看着也舒服多了
总结一下
这次属于多重巧合组合而成的强制学习
还是相当有收获的
熟悉iframe万物皆可套娃
还是挺好玩的
不过据说会影响seo
在意这个的就自己考虑吧
而且套多了页面卡顿会很明显
至于最后为什么不启用官方动态?
因为群友们告诉我
app其实也是可以在主题时光机中发动态的
我裂了,我特么通宵一宿白折腾了
算了,毁灭吧,累了
2 条评论
学习一下
哈哈哈