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

2024-08-22 09:08
文章标签 博客 hexo 嵌入 相册 群晖

本文主要是介绍将群晖相册嵌入到Hexo博客中,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如何高效便捷的在博客中更新自己的动态是困扰很多人的问题,简单的方案就是另起炉灶在博客重新发布一份,但这种方法耗时耗力,因此不建议这样做。从原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的宽度)。

嵌入的链接为http而被禁止

Mixed Content: The page at 'https://www.cz5h.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的证书搞好了(之前一直拖着没弄)。

alt

之后通过https访问5001是可以了,但群晖相册却怎么也打不开了,在经过了一大堆尝试(端口映射、相册设置等等)之后,终于解决了这个问题。

alt

需要注意的是,群晖的相册默认是使用80端口,在内网是直接以 的形式访问,当然如果在外网,需要配置一个端口映射到80,在http时代,我使用5080->80,即访问地址是:http://nas.cz5h.com:5080/photo/#Albums

在https时代,相应的,应该再用一个端口映射到443(!非常重要),也就是这里的5443->443,之后访问地址应该是:https://nas.cz5h.com:5443/photo/#Albums

至此,iframe采用新的https链接,问题解决。

群晖相册的灯箱模式失效

经验证,引入如下的JavaScript源是会出现错误的,而且导致允许连接到群晖相册和单机进入灯箱模式的失效,解决方法就是简单地取消第一、三项的勾选,只保留基本的幻灯片模式。

alt

其他可能的引入方法

RSS订阅

这是一个比较通用的解决方案,缺点是好像群晖相册的RSS源只包含了有限张照片,并没有将同一相册的全部照片都涵盖其中,亟待寻求解决方案。

如果一切正常的话,通过RSS解析到图片,然后再通过自己的想法构造页面就可以了,这种方法是最贴合的嵌入方式,但暂时还不知道如何获得包含全部图片的订阅源。

待补充

写在最后

我已经将群晖相册做了整理并公开了部分相册,欢迎访问直接访问我的群晖相册。
http://nas.cz5h.com:5080/photo/#Albums

群晖相册点开图片后还可以留言,简直不要太方便!
另外,PhotoStation还允许你批量添加(显示层面的)自定义水印!



😒 留下您对该文章的评价 😄


这篇关于将群晖相册嵌入到Hexo博客中的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1095839

相关文章

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

搜狗浏览器打开CSDN博客排版错乱问题解决

之前发生过几次,不知道什么原因。 今天一直用着好好的,打开一个csdn连接,显示404,博文被删除了,于是就用百度快照打开试试,百度快照打开显示的排版很乱也没找到有用信息。 后面再浏览CSDN博客就排版错乱,显示一个大大二维码图片。 尝试删除IE缓存无效,使用谷歌浏览是好的。 基本锁定就是搜狗缓存导致的,于是找如何删除搜狗缓存   清除后恢复正常

828华为云征文|基于华为云Flexus云服务器X实例部搭建Halo博客平台

华为云征文|基于华为云Flexus云服务器X实例部搭建Halo博客平台 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、Halo介绍2.1 Halo 简介2.2 Halo 特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、购买华为云Flexus云服务器X实例4.

缓存的常见问题 以及解决博客文章

1.jedispool 连 redis 高并发卡死  (子非鱼yy) https://blog.csdn.net/ztx114/article/details/78291734 2. Redis安装及主从配置 https://blog.csdn.net/ztx114/article/details/78320193 3.Spring中使用RedisTemplate操作Redis(sprin

[置顶] IT牛人博客

团队技术博客 淘宝UED淘宝用户体验团队淘宝核心系统淘宝核心系统团队博客阿里巴巴数据库团队专注数据库管理开发运维淘宝通用产品专注JAVA技术淘宝QA致力于做测试的行业标准淘宝搜索技术关注技术 关注搜索量子恒道专注大数据统计百度搜索研发关注搜索相关技术EMC中国研究院关注于云计算和大数据贰号楼肆层阿里巴巴平台技术部阿里数据平台阿里巴巴数据平台百度技术分享交流百度的互联网技术编码者说腾讯滴技术团队腾

为什么你应该从现在开始就写博客---刘未鹏

(一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处。(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极大损伤一样) 让我说得更明确一点:用博客的形式来记录下你有价值的思考,会带来很多好处,却没有任何明显的坏处。Note:碎碎念不算思考、心情琐记不算思考、唠唠叨叨也不算思考、没话找话也不算思考

Base64编码 及 在HTML中用Base编码直接显示图片或嵌入其他文件类型

1.为什么要用到BASE64编码的图片信息      Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符,不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码.  2.base64编码定义    目前的internet

游戏开发者有必要写博客的6大原因

为什么你要写博客?在本文中我将分析为何写博客在游戏产业中如此有效的 6 大原因。 假设你是资深的游戏开发者、制作、发行商、二年级学生、测试者、设计师、程序员、美术师或者编曲者。你的爱好伴随着许多的技艺。每个人完成一款游戏的过程,方法都不同,这里也充满许多值得我们学习的有趣瞬间。当然你可以继续坚守自己的看法。但我还是看到了许多低调的开发者们在挣扎着。 1. 贡献 我的观点中最重要的一方面便是你

为什么csdn博客不能推荐首页了?

哎,好久没来写文章, 结果就不能推荐首页了. 开始以为,是因为很久不发表文章了,但是,后来发表了几篇,还是不行。 换了个账号,写文章还是不能推荐首页, 估计是csdn不提供这个功能了。 但是吧,推荐首页无非就是增加浏览量,现在,大家写文章都没有推荐首页了,对所以用户都是公平的。

群晖NAS安装(二)

把电脑和NAS都接到路由器LAN口 可以看NAS IP地址 其他参考:https://zhuanlan.zhihu.com/p/515187738?utm_id=0&wd=&eqid=e69f50bb0000263900000006645b5680 警告:会格式化硬盘! 访问:ip:5000 新增存储方案和共享文件夹 文件夹、文件操作和windows一致。 因为我有一个256固态和500机械,所