search

xaoxuu / hexo-theme-stellar

内置文档系统的简约商务风Hexo主题，支持大量的标签组件和动态数据组件。
https://xaoxuu.com/wiki/stellar/
MIT License
1.26k stars 313 forks source link

升级最新主题后，fancybox 没法使用了，求助 #385

Closed strongduanmu closed 6 months ago

strongduanmu commented 6 months ago

例如这篇文章：https://strongduanmu.com/blog/use-wireshark-to-solve-benchmarksql-exception-with-shardingsphere-proxy.html，升级之前 markdown 图片可以使用 fancybox 放大查看，升级最新的 1.26.8 版本后，fancybox 失效，无法放大查看。

image

fancybox 配置已打开，另外从 Release Note 中搜到一个 replace_original 参数，设置成 true 也没有用。

  image:
    fancybox: true # true, false
    replace_original:  #把 markdown 格式的图片解析成图片标签
      enable: true
xaoxuu commented 6 months ago

已不支持markdown替换功能了，请使用image标签，更新日志中已有说明。

xaoxuu commented 6 months ago

https://github.com/xaoxuu/hexo-theme-stellar/releases/tag/1.22.1

strongduanmu commented 6 months ago

已不支持markdown替换功能了，请使用image标签，更新日志中已有说明。

好的，谢谢。

L33Z22L11 commented 6 months ago

你可以通过 为您的stellar添加medium-zoom 来实现功能，无需替换全站图片标签。

strongduanmu commented 6 months ago

你可以通过 为您的stellar添加medium-zoom 来实现功能，无需替换全站图片标签。

感谢大佬，我试下。

strongduanmu commented 6 months ago

你可以通过 为您的stellar添加medium-zoom 来实现功能，无需替换全站图片标签。

请问这个 zoom-img.js 放在什么位置，我添加了好像没生效。

L33Z22L11 commented 6 months ago

请参阅 Hexo 官方文档 脚本（Scripts） 一节的内容。

另外，这篇博客提到的js库也可以通过设置配置文件的inject.head和inject.script项来加载。

xaoxuu commented 6 months ago

这个思路不错，我试了一下发现其实还是可以直接用的，直接修改这个地方的配置，别的什么都不用改：

plugins:
  fancybox:
    selector: .md-text img:not([class]), .md-text .image img # 多个选择器用英文逗号隔开

原本是通过正则替换文章源码的，维护成本很高，就去掉了。

strongduanmu commented 6 months ago

脚本（Scripts）

收到，多谢

strongduanmu commented 6 months ago

这个思路不错，我试了一下发现其实还是可以直接用的，直接修改这个地方的配置，别的什么都不用改：

plugins:
  fancybox:
    selector: .md-text img:not([class]), .md-text .image img # 多个选择器用英文逗号隔开

原本是通过正则替换文章源码的，维护成本很高，就去掉了。

这个方法测试可以，感谢大佬。

strongduanmu commented 6 months ago
image

另外，还想请教下大佬，图片下面的 title 怎么显示出来。

xaoxuu commented 6 months ago

这就没办法了

strongduanmu commented 6 months ago

写了点 js，强行增加 HTML 元素展示 😂：

    - <script>function change_img_alt(){$("article.md-text img:not(.post-cover img):not(.cover img):not(.card-link img):not(.image-bg img):not(.social img):not(.preview img)").each(function(index){$(this).after("<div class='image-meta' style='text-align:center;'><span class='image-caption center' style='display:inline-block;font-size:.8125rem;color:var(--text-p2);line-height:1.5;text-align:justify;'>" + ($(this).attr("title") || $(this).attr("alt")) + "</span></div>")});}setTimeout("change_img_alt()", 1000);</script>
image