soarli

Typecho博客handsome主题的一个坑完美解决
手机上点击图片以求放大时,页面会自动回顶部。困扰了许多天,在网上一直找不到任何有效的解决方案!这两天手机阅读笔记需...
扫描右侧二维码阅读全文
07
2020/04

Typecho博客handsome主题的一个坑完美解决

手机上点击图片以求放大时,页面会自动回顶部。

困扰了许多天,在网上一直找不到任何有效的解决方案!

这两天手机阅读笔记需求更大,问题的解决显得尤为重要!

仍记得Hexo Next主题中曾经用node.js装过一款图片放大开源插件(不得不感慨开源精神的强大力量),和这个主题自带的图像放大插件一模一样!!

找出以前的记录,知道了它叫fancybox

接着,百度一波、谷歌一波,最终找到了以下教程(链接都放在了文末参考资料):

发现,所有相关信息竟然惊人的雷同,然而,我用的项目源码里面根本没有这个!

通过谷歌翻译,大概知道了fancybox类里面某个关于图像的方法会触发overlay(覆盖)行为,从而让页面发生回顶部的操作,因此需要找到并把这种行为禁止掉。

Ctrl+U,进来搜一波:

貌似有点希望了,把这个文件揪出来看看:

Woc,,看右边你能发现貌似11行的代码包含了几万行火星文。。。

换个思路,对一个个可能相关文件进行fancybox类搜索,结合F12的帮助,发现bug的触发条件是左侧边栏被收起,花了几个小时的时间(本不会PHP、CSS的小白差点被淹死其中),终于上岸了,可谓“柳暗花明又一村”!

废话不说了,最后找到在themes/handsome/assets/css里面的handsome.min.css

这几行代码,注释掉后随即恢复正常,嗯呐真香。

今天这波操作,确实做了很多“无用功”,确实想过要不要直接禁用功能放弃修正:

但是坚持下来后发现对typechophp的运作原理/方式似乎有了那么些了解了。

现在,刚过了0点,心情逐渐平复下来了,不襟陷入了对开源理念的大思考,总结下来就是开源真伟大

最后,由衷感谢Handsome,感谢Typecho等伟大开源项目!

本次踩坑日记就写到这里了,如果你读到了这里,还请多多指教!

参考资料:

https://www.wumingx.com/tools/hexo-tutorial.html

https://blog.csdn.net/wu410674496/article/details/51003144

https://blog.csdn.net/weixin_30466039/article/details/96870394

https://www.acgist.com/article/120.html

https://blog.csdn.net/weixin_30466039/article/details/96870394

https://stackoverflow.com/questions/19636654/how-lock-fancybox-overlay-without-jumping-to-the-top

最后修改:2020 年 04 月 08 日 12 : 11 AM

1 条评论

  1. 孟超

发表评论 取消回复