将群晖相册嵌入到Hexo博客中

Z.TIAN

Hexo相关

2020年6月21日

大约1.4k字

阅读需9分钟

本页文档最后更新于：2021年3月8日

如何高效便捷的在博客中更新自己的动态是困扰很多人的问题，简单的方案就是另起炉灶在博客重新发布一份，但这种方法耗时耗力，因此不建议这样做。从原po平台同步到博客的某个位置应该是最理想的解决方案。对于照片来说，群晖的相册给我提供了一个来源库，那么如果我想让访客浏览我的近照，那么如何把照片从群晖相册同步到博客中就成了实现这一想法的核心问题。

拍摄设备：HUAWEI P30
同步来源：群晖 PhotoStation Album
扩展详情：关于如何放置在主页，详见更新日志

实现思路

可以查证的、群晖官方提供的嵌入相册的方法，主要就是使用iframe进行嵌入。注意这里说的群晖相册，特指 Photo Station，而不是Moments等套件、在使用 Photo Station 的过程中，比较好的地方在于照片的地图模式、缩略图加载速度以及丰富的配置设置项。Moments我没有用过，但由于其关联套件太多，所以不在我的考虑范围之内，要知道我是个连Drive都不用的群晖用户。

采用iframe嵌入的另一个好处是，异步加载，基本对原站加载速度没什么影响。

遇到的问题

iframe的大小自适应

这是个老生常谈的问题，但其实每次遇到其详细情况又都不尽相同，这里使用日常解决方案：JS控制。

<script type="text/javascript">
  function changeFrameHeight(){
    var iframe= document.getElementById("myiframe");
    var wid = document.getElementById('father').clientWidth;
    if (wid>900) iframe.height = wid/2.19;
    else if (wid>551) iframe.height = wid/2.21;
    else if (wid>470) iframe.height = wid/2.165;
    else iframe.height = wid/2.26;
  }
</script>
<div style="background-color: rgb(0, 0, 0);padding-top: 7px;" id="father">
  <iframe width="100%" id="myiframe" frameborder="0" onload="changeFrameHeight()" 
    src="https://nas.cz5h.com:5443/photo/embed/embed.html?album=album_5745425f414c42554d&autoplay=1&lightbox=1" photostation>
  </iframe>
</div>

巧妙之处在于包裹在iframe之上的div，正式利用这个父级div标签来获得iframe可以“撑起来”的最大宽度，如果直接拿原主题文件的类去获取宽度，那需要复杂的选择器实现。

得到父级标签的宽度之后就很容易通过当前宽度来配置iframe的高度了（宽度就是div的宽度）。

<< 更多精彩尽在『程序萌部落』>>
<< https://www.cxmoe.com >>

嵌入的链接为http而被禁止

Mixed Content: The page at 'https://www.cxmoe.com/' was loaded over HTTPS, but requested an insecure frame 'http://asus.myds.me:5080/photo/embed/embed.html?album=album_5745425f414c42554d&autoplay=1&lightbox=1'. This request has been blocked; the content must be served over HTTPS.

这也是个令人头痛的问题，基本上如果Server不是自己手写的代码，那就没法解决，只能换用https的安全链接。为此，我终于在群晖上把https的证书搞好了（之前一直拖着没弄）。