From 298be6e12db323a048ca8ef000b5c56812c2b381 Mon Sep 17 00:00:00 2001 From: Xlenco <75837117+xlenco@users.noreply.github.com> Date: Tue, 5 Aug 2025 13:57:20 +0800 Subject: [PATCH 1/5] Update quartz.config.ts --- quartz.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/quartz.config.ts b/quartz.config.ts index b3db3d60d..af6d2f000 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -72,6 +72,7 @@ const config: QuartzConfig = { Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }), Plugin.Description(), Plugin.Latex({ renderEngine: "katex" }), + Plugin.ViewImage(), ], filters: [Plugin.RemoveDrafts()], emitters: [ From b9b49623a3b750c6d072152d8cb1fa2a1371798c Mon Sep 17 00:00:00 2001 From: Xlenco <75837117+xlenco@users.noreply.github.com> Date: Tue, 5 Aug 2025 13:58:13 +0800 Subject: [PATCH 2/5] Create viewImage.ts --- quartz/plugins/transformers/viewImage.ts | 47 ++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 quartz/plugins/transformers/viewImage.ts diff --git a/quartz/plugins/transformers/viewImage.ts b/quartz/plugins/transformers/viewImage.ts new file mode 100644 index 000000000..b54b91b41 --- /dev/null +++ b/quartz/plugins/transformers/viewImage.ts @@ -0,0 +1,47 @@ +import { QuartzTransformerPlugin } from "../types" + +// ViewImage.js灯箱插件 +// 简化版实现 +export const ViewImage: QuartzTransformerPlugin = () => { + return { + name: "ViewImage", + externalResources() { + return { + js: [ + { + src: "https://cdn.jsdelivr.net/gh/Tokinx/ViewImage/view-image.min.js", + loadTime: "afterDOMReady", + contentType: "external", + }, + { + script: ` + // 简单的初始化代码 + document.addEventListener('DOMContentLoaded', function() { + if (window.ViewImage) { + // 使用更通用的选择器 + ViewImage.init('article img, .content img'); + // 添加视觉反馈 + const style = document.createElement('style'); + style.textContent = 'article img, .content img { cursor: zoom-in; border: 2px dashed #284b63; }'; + document.head.appendChild(style); + console.log('ViewImage灯箱插件已初始化'); + } else { + console.error('ViewImage库未加载成功'); + } + }); + `, + loadTime: "afterDOMReady", + contentType: "inline", + }, + ], + } + }, + } +} + +// 告诉TypeScript我们添加的内容 +declare module "vfile" { + interface DataMap { + viewImage?: boolean + } +} From 9ffd33f76c8486d13681088aaa60b175443e2a0f Mon Sep 17 00:00:00 2001 From: Xlenco <75837117+xlenco@users.noreply.github.com> Date: Tue, 5 Aug 2025 13:58:40 +0800 Subject: [PATCH 3/5] Update index.ts --- quartz/plugins/transformers/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/quartz/plugins/transformers/index.ts b/quartz/plugins/transformers/index.ts index 8e2cd844f..8fd5e7071 100644 --- a/quartz/plugins/transformers/index.ts +++ b/quartz/plugins/transformers/index.ts @@ -11,3 +11,4 @@ export { SyntaxHighlighting } from "./syntax" export { TableOfContents } from "./toc" export { HardLineBreaks } from "./linebreaks" export { RoamFlavoredMarkdown } from "./roam" +export { ViewImage } from "./viewImage" From 6138294d835bd455ec16b7d6496f444c428c0565 Mon Sep 17 00:00:00 2001 From: chengyongru <2755839590@qq.com> Date: Mon, 29 Sep 2025 15:16:30 +0800 Subject: [PATCH 4/5] fix https://github.com/jackyzha0/quartz/pull/2074#issuecomment-3222127920 --- quartz/plugins/transformers/viewImage.ts | 79 ++++++++++++++++++++---- 1 file changed, 67 insertions(+), 12 deletions(-) diff --git a/quartz/plugins/transformers/viewImage.ts b/quartz/plugins/transformers/viewImage.ts index b54b91b41..e5b540a25 100644 --- a/quartz/plugins/transformers/viewImage.ts +++ b/quartz/plugins/transformers/viewImage.ts @@ -1,12 +1,25 @@ import { QuartzTransformerPlugin } from "../types" -// ViewImage.js灯箱插件 -// 简化版实现 export const ViewImage: QuartzTransformerPlugin = () => { return { name: "ViewImage", externalResources() { return { + css: [ + { + content: ` + img { + cursor: zoom-in !important; + border: 2px dashed #284b63 !important; + transition: border-color 0.2s ease !important; + } + img:hover { + border-color: #1a365d !important; + } + `, + inline: true, + } + ], js: [ { src: "https://cdn.jsdelivr.net/gh/Tokinx/ViewImage/view-image.min.js", @@ -15,19 +28,62 @@ export const ViewImage: QuartzTransformerPlugin = () => { }, { script: ` - // 简单的初始化代码 - document.addEventListener('DOMContentLoaded', function() { + function initViewImage() { if (window.ViewImage) { - // 使用更通用的选择器 - ViewImage.init('article img, .content img'); - // 添加视觉反馈 - const style = document.createElement('style'); - style.textContent = 'article img, .content img { cursor: zoom-in; border: 2px dashed #284b63; }'; - document.head.appendChild(style); - console.log('ViewImage灯箱插件已初始化'); + const existingImages = document.querySelectorAll('img[data-viewimage]'); + existingImages.forEach(img => { + img.removeAttribute('data-viewimage'); + const newImg = img.cloneNode(true); + img.parentNode.replaceChild(newImg, img); + }); + + ViewImage.init('img'); + console.log('ViewImage灯箱插件已初始化，处理了', document.querySelectorAll('img').length, '张图片'); } else { console.error('ViewImage库未加载成功'); } + } + + function setupViewImageObserver() { + const observer = new MutationObserver(function(mutations) { + let shouldReinit = false; + mutations.forEach(function(mutation) { + if (mutation.type === 'childList') { + mutation.addedNodes.forEach(function(node) { + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node; + if (element.tagName === 'IMG' || element.querySelector('img')) { + shouldReinit = true; + } + } + }); + } + }); + + if (shouldReinit) { + console.log('检测到页面内容变化，重新初始化 ViewImage'); + setTimeout(initViewImage, 50); + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); + + return observer; + } + + document.addEventListener('DOMContentLoaded', function() { + initViewImage(); + setupViewImageObserver(); + }); + + document.addEventListener('nav', function() { + console.log('SPA 导航事件触发，准备重新初始化 ViewImage'); + setTimeout(function() { + initViewImage(); + }, 200); }); `, loadTime: "afterDOMReady", @@ -39,7 +95,6 @@ export const ViewImage: QuartzTransformerPlugin = () => { } } -// 告诉TypeScript我们添加的内容 declare module "vfile" { interface DataMap { viewImage?: boolean From 8999a23af8e18a75675bfed8bd48b069ef045e9a Mon Sep 17 00:00:00 2001 From: chengyongru <2755839590@qq.com> Date: Mon, 29 Sep 2025 15:27:33 +0800 Subject: [PATCH 5/5] clean format issue --- quartz/plugins/transformers/viewImage.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quartz/plugins/transformers/viewImage.ts b/quartz/plugins/transformers/viewImage.ts index e5b540a25..9268e3dda 100644 --- a/quartz/plugins/transformers/viewImage.ts +++ b/quartz/plugins/transformers/viewImage.ts @@ -18,7 +18,7 @@ export const ViewImage: QuartzTransformerPlugin = () => { } `, inline: true, - } + }, ], js: [ {