点开图片后关闭，页面会滚动到最下方

dr34m-cn commented 9 months ago

版本为1.9.6

请确认

[已确认 ] 是当前最新的 Release 版本
[已确认 ] 本地 hexo clean && hexo s，并且清除浏览器缓存，仍可复现
[已确认 ] 已经排除是其他 Hexo 插件影响

Bug 描述

点击图片后，再关闭图片，页面会滚动到最下方

复现步骤

该 Bug 复现步骤如下：

在任意文章页面点击图片预览
关闭图片预览
页面会滚到底

进过观察，在点击图片预览的时候，页面已经滚到底了

地址：https://blog.ctftools.com/2023/05/newpost-51/

xiyuvi commented 9 months ago

我在你的博客确实复现了bug，但是在我的博客中没有复现bug，我观察到你的图片放大后没有相应的右上角关闭按钮，请贴出你的配置文件js版本，检查是否和以下版本一致，hexo版本是否为7.0.0，主题版本是否为^1.9.6

anchor: https://lib.baomitu.com/anchor-js/4.3.1/

  github_markdown: https://lib.baomitu.com/github-markdown-css/4.0.0/

  jquery: https://lib.baomitu.com/jquery/3.6.4/

  bootstrap: https://lib.baomitu.com/twitter-bootstrap/4.6.1/

  prismjs: https://lib.baomitu.com/prism/1.29.0/

  tocbot: https://lib.baomitu.com/tocbot/4.20.1/

  typed: https://lib.baomitu.com/typed.js/2.0.12/

  fancybox: https://lib.baomitu.com/fancybox/3.5.7/

  nprogress: https://lib.baomitu.com/nprogress/0.2.0/

  mathjax: https://lib.baomitu.com/mathjax/3.2.2/

  katex: https://lib.baomitu.com/KaTeX/0.16.2/

  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/

  clipboard: https://lib.baomitu.com/clipboard.js/2.0.11/

  mermaid: https://lib.baomitu.com/mermaid/8.14.0/

  valine: https://lib.baomitu.com/valine/1.5.1/

  waline: https://cdn.staticfile.org/waline/2.15.5/

  gitalk: https://lib.baomitu.com/gitalk/1.8.0/

  disqusjs: https://lib.baomitu.com/disqusjs/1.3.0/

  twikoo: https://lib.baomitu.com/twikoo/1.6.8/

  discuss: https://lib.baomitu.com/discuss/1.2.1/

  hint: https://lib.baomitu.com/hint.css/2.7.0/

xiyuvi commented 9 months ago

ni你的博客有一行报错,你解决报错后看问题是否依旧存在

zkqiang commented 9 months ago

在我的环境复现不出来，可以先检查下你的环境

dr34m-cn commented 9 months ago

通过对配置文件的js版本的逐行注释与刷新测试，最终定位到问题在fancybox；

我是这样操作的，我把所有用到的js和css等都下载了下来放在了static目录下，然后配置如下：完整配置文件点这里查看

static_prefix:
  # 内部静态
  # Internal static
  internal_js: /js
  internal_css: /css
  internal_img: /img

  # anchor: https://lib.baomitu.com/anchor-js/4.3.1/
  anchor: /assets/static/

  # github_markdown: https://lib.baomitu.com/github-markdown-css/4.0.0/
  github_markdown: /assets/static/

  # jquery: https://lib.baomitu.com/jquery/3.6.4/
  jquery: /assets/static/

  # bootstrap: https://lib.baomitu.com/twitter-bootstrap/4.6.1/
  bootstrap: /assets/static/

  # prismjs: https://lib.baomitu.com/prism/1.27.0/
  prismjs: /assets/static/

  # tocbot: https://lib.baomitu.com/tocbot/4.18.2/
  tocbot: /assets/static/

  # typed: https://lib.baomitu.com/typed.js/2.0.12/
  typed: /assets/static/

  # fancybox: https://lib.baomitu.com/fancybox/3.5.7/
  fancybox: /assets/static/

  # # nprogress: https://lib.baomitu.com/nprogress/0.2.0/
  nprogress: /assets/static/

  # # mathjax: https://lib.baomitu.com/mathjax/3.2.1/
  mathjax: /assets/static/

  # katex: https://lib.baomitu.com/KaTeX/0.15.6/
  katex: /assets/static/

  # busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/
  busuanzi: /assets/static/

  # clipboard: https://lib.baomitu.com/clipboard.js/2.0.10/
  clipboard: /assets/static/

  # mermaid: https://lib.baomitu.com/mermaid/8.14.0/
  mermaid: /assets/static/

  # valine: https://lib.baomitu.com/valine/1.4.18/
  valine: /assets/static/

  # waline: https://lib.baomitu.com/waline/2.5.1/
  waline: /assets/static/

  # gitalk: https://lib.baomitu.com/gitalk/1.7.2/
  gitalk: /assets/static/

  # disqusjs: https://lib.baomitu.com/disqusjs/1.3.0/
  disqusjs: /assets/static/

  # twikoo: https://lib.baomitu.com/twikoo/1.5.11/
  twikoo: /assets/static/

  # hint: https://lib.baomitu.com/hint.css/2.7.0/
  hint: /assets/static/

这样可以确保即使lib.baomitu.com挂掉了也不会影响我的博客（我之前遇到过导致博客样式全乱了，详见这里）；

但是别的css或者js都没问题，只有fancybox出现了问题，如果我把fancybox:改为https://lib.baomitu.com/fancybox/3.5.7/则没问题，怀疑是因为fancybox的文件名为jquery.开头有关，我不太懂相关知识，希望能得到解惑。这不是一个所有人都会遇到的问题，你们也可以选择忽略它。

再次感谢你们开源了如此优秀的项目

zkqiang commented 9 months ago

@dr34-m 从我测试来看，似乎是你 fancybox js 内容有问题（可能不是一个版本）

可以从 https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js 重新 copy 一份试试

dr34m-cn commented 9 months ago

@zkqiang 经过对比确认，我的fancybox js文件与https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js相同，只是换行符存在差异，我还是重新copy并测试了，问题依然存在。我的博客源码在这里

xiyuvi commented 9 months ago

对比js https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js https://blog.ctftools.com/assets/static/jquery.fancybox.min.js

证明1

baomitu上的jquery.fancybox.min.js的哈希值 | (text/javascript) - 68253bytes
-- | --
MD5 | 49a6b4d019a934bcf83f0c397eba82d8
SHA1 | 6181412e73966696d08e1e5b1243a572d0f22ba6
SHA256 | cadda460ccb4c3c01bb45f3d5976f63f5adf8dc3ff1d31cb4fbd3ded4f18e5bf

你博客上的jquery.fancybox1.min.js的哈希值| (text/javascript) - 67978bytes
-- | --
MD5 | db75378df9db13cc70f770b779acc2be
SHA1 | 037622011ee3dc20e770997c22fa7192f828cdd4
SHA256 | 0a6b43955c8112f2fe3b110a46dc2fe4ba9512ab79d81e09dd182be08c950036

上面的哈希值不一致证明你和官方指定版本的js是不一致的