Closed lartpang closed 6 months ago
Fixed #71
@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>"}## -->
这样做的好处是:
config.json
中。这也是为什么我实现自定义单篇文章配置
和自定义全局配置
这两个功能的初心,一是保持基础博客的轻量化,二是给用户更多的可配置空间。
我也简单通过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会请求原图片一次再显示,各有各的优点。
@Meekdai 直接在文档最后添加这样的设置似乎有点太繁琐,而且也导致了markdown文件的不纯粹 :>
我最终通过修改config.json进行了配置。
https://github.com/lartpang/blog/blob/4dc53c265076de42666da9b89352d203aaebcc67/config.json#L6
是的,如果你的文章大多都包含图片,在config.json配置这个script就可以。
对现有代码进行了部分修改,以支持medium-zoom的缩放功能,并同时移除点击跳转新页面的问题。 支持使用用户的config.json文件覆盖默认设置。
启用缩放显示功能:
关闭,即原始行为,点击后在新标签页显示: