将最新博客嵌入网站

posted on 2020-04-17 16:03:39 | under / |

网站上显示实时更新的最新博客文章真心是十分酷炫的。虽然洛谷博客并不提供相关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

注: 若您想要评论, 您需要先登录或注册洛谷账号。敬请谅解不便。

Zbx1425 的博客