Meekdai / Gmeek

Gmeek is a Blog All in Github
https://meekdai.github.io
MIT License
1.66k stars 238 forks source link

支持medium-zoom的缩放功能 #74

Closed lartpang closed 6 months ago

lartpang commented 6 months ago

对现有代码进行了部分修改,以支持medium-zoom的缩放功能,并同时移除点击跳转新页面的问题。 支持使用用户的config.json文件覆盖默认设置。

启用缩放显示功能:

"useMediumZoom": 1

关闭,即原始行为,点击后在新标签页显示:

"useMediumZoom": 0
lartpang commented 6 months ago

Fixed #71

Meekdai commented 6 months ago

@lartpang 谢谢你的建议,但是正如我昨天回复你的,这个完全可以通过自定义配置来实现这个功能。

https://blog.meekdai.com/post/yang-yu-%EF%BC%9F-wo-ying-gai-bu-xing.html

上面这篇文章,我通过自定义配置,在文章最后添加如下代码,就可以实现你这个功能。

<!-- ##{"script":"<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css'><script src='https://cdn.jsdelivr.net/gh/lokesh/lightbox2@v2.11.4/dist/js/lightbox-plus-jquery.min.js'></script><script>var imgLinks=document.querySelectorAll('a > img');imgLinks.forEach(function(imgLink){imgLink.parentElement.setAttribute('data-lightbox','images');});lightbox.init();</script>"}## -->

这样做的好处是:

  1. 不是每篇文章都需要加载这些额外的库,完全由用户自己配置。
  2. 也不局限于使用lightbox2或者medium-zoom,用户想用哪个都可以。
  3. 如果用户搭建的是一个纯图片网站,也可以通过把这段配置文件写到config.json中。

这也是为什么我实现自定义单篇文章配置自定义全局配置这两个功能的初心,一是保持基础博客的轻量化,二是给用户更多的可配置空间。

Meekdai commented 6 months ago

我也简单通过medium-zoom实现了这个功能

https://blog.meekdai.com/post/Paddy%20Richter.html

只需要在文章最后添加下面的代码就可以实现了。

<!-- ##{"script":"<script src='https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js'></script><script>var imgLinks = document.querySelectorAll('a > img');imgLinks.forEach(function(imgLink){var parentLink = imgLink.parentElement;parentLink.parentNode.insertBefore(parentLink.removeChild(imgLink), parentLink);parentLink.parentNode.removeChild(parentLink);});mediumZoom('img');</script>"}## -->

目前看来medium-zoom是直接放大页面上的图片,而lightbox2会请求原图片一次再显示,各有各的优点。

lartpang commented 6 months ago

@Meekdai 直接在文档最后添加这样的设置似乎有点太繁琐,而且也导致了markdown文件的不纯粹 :>

我最终通过修改config.json进行了配置。

https://github.com/lartpang/blog/blob/4dc53c265076de42666da9b89352d203aaebcc67/config.json#L6

Meekdai commented 6 months ago

是的,如果你的文章大多都包含图片,在config.json配置这个script就可以。