GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 05:14:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added ability to open image links in new tabs

Browse Source
This commit is contained in:
Stephen Tse 2025-05-03 17:41:01 -07:00
parent 3731fb580d
commit 435e6cf899
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz.config.ts
View File

@ -74,7 +74,7 @@ const config: QuartzConfig = {
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }), Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
Plugin.Description(), Plugin.Description(),
Plugin.Latex({ renderEngine: "katex" }), Plugin.Latex({ renderEngine: "katex" }),
Plugin.Images(), Plugin.Images({ openLinksInNewTab: true }),
], ],
filters: [Plugin.RemoveDrafts()], filters: [Plugin.RemoveDrafts()],
emitters: [ emitters: [

19
quartz/plugins/transformers/images.ts
View File

@ -6,9 +6,16 @@ import { imageExtsToOptimize, previewImageMap, targetOptimizedImageExt } from ".
import { FullSlug, getFileExtension, isAbsoluteURL, RelativeURL } from "../../util/path" import { FullSlug, getFileExtension, isAbsoluteURL, RelativeURL } from "../../util/path"
import { parseSelector } from "hast-util-parse-selector" import { parseSelector } from "hast-util-parse-selector"
export interface Options {} export interface Options {
/**
* If true, opens image links in a new tab.
*/
openLinksInNewTab: boolean
}
const defaultOptions: Options = {} const defaultOptions: Options = {
openLinksInNewTab: false,
}
/** /**
* File extensions of all supported image format. Files with an extension * File extensions of all supported image format. Files with an extension
@ -34,7 +41,6 @@ export const supportedImageExts: ReadonlySet<string> = new Set([
* Add this plugin after all Markdown parser plugins in quartz.config. * Add this plugin after all Markdown parser plugins in quartz.config.
*/ */
export const Images: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => { export const Images: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
//@ts-ignore
const opts = { ...defaultOptions, ...userOpts } const opts = { ...defaultOptions, ...userOpts }
return { return {
@ -43,7 +49,7 @@ export const Images: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
const plugins: PluggableList = [] const plugins: PluggableList = []
if (ctx.cfg.configuration.optimizeImages) { if (ctx.cfg.configuration.optimizeImages) {
plugins.push(OptimizeImages) plugins.push([OptimizeImages, opts])
} }
return plugins return plugins
@ -63,7 +69,7 @@ export const Images: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
* </a> * </a>
* ``` * ```
*/ */
const OptimizeImages: Plugin<[], HtmlRoot> = () => { const OptimizeImages: Plugin<[Options], HtmlRoot> = (opts: Options) => {
const transformer: Transformer<HtmlRoot> = (tree: HtmlRoot) => { const transformer: Transformer<HtmlRoot> = (tree: HtmlRoot) => {
visit(tree, "element", (node, index, parent) => { visit(tree, "element", (node, index, parent) => {
if (node.tagName === "img" && typeof node.properties.src === "string") { if (node.tagName === "img" && typeof node.properties.src === "string") {
@ -115,6 +121,9 @@ const OptimizeImages: Plugin<[], HtmlRoot> = () => {
// Disable SPA router click event that always forces link redirection // Disable SPA router click event that always forces link redirection
// (to make image links compatible with lightbox plugins) // (to make image links compatible with lightbox plugins)
wrapper.properties["data-router-ignore"] = true wrapper.properties["data-router-ignore"] = true
if (opts.openLinksInNewTab) {
wrapper.properties["target"] = "_blank"
}
wrapper.children = [node] wrapper.children = [node]
parent!.children[index!] = wrapper parent!.children[index!] = wrapper