Nemo Zhang 的博客

Nemo Zhang 的博客

将最新博客嵌入网站

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下移, 以使顶部内容移出容器区域。

同时我们用 heightwidth 来确定显示范围,避免因设备分辨率不同页面变形。

<iframe scrolling="no" style="position:relative; height:600px; width:360px; top:-350px; border-width:0px" src="https://zbx1425.blog.luogu.org"></iframe>

接下来在iframe外侧套一个div容器,并通过设定 heightoverflow: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

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