将最新博客嵌入网站

网站上显示实时更新的最新博客文章真心是十分酷炫的。虽然洛谷博客并不提供相关API，但是这怎么能阻止我们呢？ 由于无法使用Javascript的Ajax调用，我们只能转而使用Iframe了。于是我们就要实现以下这些功能： - 置入网页 - 裁剪网页使只有最新博客露出 - 避免读者点击链接 - 定位使Iframe嵌入Bootstrap网格 ## 置入网页 这个简单。为防止出现滚动条，禁用滚动即可。还可使用 `border-width:0px` 隐藏边框。 ``` <iframe scrolling="no" style="border-width:0px" src="https://zbx1425.blog.luogu.org"> ``` ## 裁剪网页 此处以 Luogu3 主题为例。该主题页面顶部有着导航栏和大头像，这是我们需要削掉的，让它只显示第一篇文章。其他主题的设定值由于页面不同请您自己试着调整。 我们使用 `position:relative` 搭配设为负值的 `top` 来让iframe下移, 以使顶部内容移出容器区域。 同时我们用 `height` 和 `width` 来确定显示范围，避免因设备分辨率不同页面变形。 ``` <iframe scrolling="no" style="position:relative; height:600px; width:360px; top:-350px; border-width:0px" src="https://zbx1425.blog.luogu.org"></iframe> ``` 接下来在iframe外侧套一个div容器，并通过设定 `height` 及 `overflow:hidden` 削掉超出范围的所有内容。 ``` <div style="overflow:hidden; height:220px"> ``` ## 避免读者点击链接 我用了懒法子，直接整了个透明div，用 `z-index` 盖在iframe脑袋顶上，给他盖住使其链接无法点击。 ``` <div style="position:absolute; top:0; width:360px; height:220px; background-color:transparent; z-index:1"></div> ``` ## 定位使Iframe嵌入Bootstrap网格 这个我使用了 `position: absolute` 之后50%大法定位到中心，然后用负值 `margin` 将宽度高度拉回来。 以下是我使用的最终代码, 我把它放在了个轮播里： ``` <div class="carousel-inner" style="background: #ddd"> <div class="carousel-item active" style="text-align:center; background:hsla(0,0%,100%,.8); padding-bottom:63.59%"> <div style="overflow:hidden; height:220px; position:absolute; left:50%; margin-left:-180px; top:50%; margin-top:-110px;"> <iframe scrolling="no" style="position:relative; height:600px; width:360px; top:-350px; border-width:0px" src="https://zbx1425.blog.luogu.org"></iframe> <div style="position:absolute; top:0; width:360px; height:220px; background-color:transparent; z-index:1"></div> </div> </div> ... ``` ddd 和 hsla 是从模板里抄的，用来使背景和文章框的颜色相同。 ## 缺点 该方法的缺点有： - 没办法换模板，换了就一瞬GG - 标题不能太长，不然会把些内容顶下去 - 分类也不能太长，不然在小屏幕设备里也会把内容顶下去 - 恐怕会在一些奇葩浏览器上出刁钻问题 所以您看到我把默认分类都改成一根斜线了。 总之，做完之后，总体效果还是相当不错的！ Demo: [www.zbx1425.tk](https://www.zbx1425.tk) > 注: 若您想要评论, 您需要先登录或[注册洛谷账号](https://www.luogu.com.cn/auth/register)。敬请谅解不便。