1
import deepmerge from "@fastify/deepmerge";
2
import { type Child, type Properties, h } from "hastscript";
3
import type {
4
    Image,
5
    Link,
6
    Paragraph,
7
    PhrasingContent,
8
    Root,
9
    RootContent,
10
} from "mdast";
11
import type { Plugin, Transformer } from "unified";
12
import { visit } from "unist-util-visit";
13
import type { Visitor } from "unist-util-visit";
14

15
type DeepPartial<T> = T extends object
16
    ? {
17
        [P in keyof T]?: DeepPartial<T[P]>;
18
    }
19
    : T;
20

21
interface LinkAttributes {
22
    target: string;
23
    rel: string;
24
}
25

26
interface Options {
27
    className: string;
28
    excludedPaths: (string | RegExp)[];
29
    lazyLoad: boolean;
30
    linkAttributes: LinkAttributes;
31
}
32

33
type UserOptions = DeepPartial<Options>;
34

35
const defaultOptions: Options = {
36
    className: "",
37
    excludedPaths: [],
38
    lazyLoad: false,
39
    linkAttributes: { target: "", rel: "" },
40
};
41

42
const remarkImageCaption: Plugin<[UserOptions?], Root> = (options) => {
43
    const mergedOptions = deepmerge()(defaultOptions, options ?? {}) as Options;
44

45
    const transformer: Transformer<Root> = async (tree) => {
46
        const visitor: Visitor<Paragraph> = (paragraphNode, index, parent) => {
47
            if (
48
                index === undefined ||
49
                parent === undefined ||
50
                parent.type !== "root" ||
51
                paragraphNode.data !== undefined
52
            )
53
                return;
54

55
            const customNodes = createCustomNodes(paragraphNode, mergedOptions);
56

57
            if (customNodes.length) {
58
                parent.children.splice(index, 1, ...customNodes);
59
            }
60
        };
61

62
        visit(tree, "paragraph", visitor);
63
    };
64

65
    return transformer;
66
};
67

68
const isExcluded = (input: string, patterns: (string | RegExp)[]): boolean => {
69
    for (const pattern of patterns) {
70
        if (typeof pattern === "string") {
71
            if (input.includes(pattern)) return true;
72
        } else if (pattern instanceof RegExp) {
73
            if (pattern.test(input)) return true;
74
        }
75
    }
76

77
    return false;
78
};
79

80
const isSoftBreak = (node: PhrasingContent): boolean => {
81
    return node.type === "text" && (node.value === "\n" || node.value === "\r\n");
82
};
83

84
const containsOnlyImageRelatedChildren = (
85
    node: Paragraph | Link,
86
    patterns: (string | RegExp)[],
87
): boolean => {
88
    return node.children.every(
89
        (child) =>
90
            (child.type === "image" && !isExcluded(child.url, patterns)) ||
91
            child.type === "break" ||
92
            isSoftBreak(child),
93
    );
94
};
95

96
const extractValidImageNodes = (
97
    paragraphNode: Paragraph,
98
    options: Options,
99
): Image[] => {
100
    const hasImages = containsOnlyImageRelatedChildren(
101
        paragraphNode,
102
        options.excludedPaths,
103
    );
104

105
    return hasImages
106
        ? paragraphNode.children.filter((child) => child.type === "image")
107
        : [];
108
};
109

110
const extractValidImageLinkNodes = (
111
    paragraphNode: Paragraph,
112
    options: Options,
113
): Link[] => {
114
    const hasImageLinks = paragraphNode.children.every(
115
        (child) =>
116
            child.type === "link" &&
117
            child.children.length &&
118
            containsOnlyImageRelatedChildren(child, options.excludedPaths),
119
    );
120

121
    return hasImageLinks
122
        ? ((paragraphNode.children as Link[]).map((child) => ({
123
            ...child,
124
            children: child.children.filter(
125
                (subChild) => subChild.type === "image",
126
            ),
127
        })) as Link[])
128
        : [];
129
};
130

131
const createImageProperties = (
132
    imageNode: Image,
133
    lazyLoad: boolean,
134
): Properties => {
135
    return {
136
        alt: imageNode.alt,
137
        src: imageNode.url,
138
        ...(lazyLoad && { loading: "lazy" }),
139
    };
140
};
141

142
const createFigureFromImages = (
143
    imageNodes: Image[],
144
    options: Options,
145
): RootContent => {
146
    const canNest = imageNodes.every((imageNode) => imageNode.title);
147

148
    let children: Child[];
149

150
    if (canNest) {
151
        children = imageNodes.map((imageNode) =>
152
            h("figure", {}, [
153
                h("img", createImageProperties(imageNode, options.lazyLoad), []),
154
                h("figcaption", {}, [imageNode.title]),
155
            ]),
156
        );
157
    } else {
158
        children = imageNodes.map((imageNode) =>
159
            h("img", createImageProperties(imageNode, options.lazyLoad), []),
160
        );
161
    }
162

163
    return {
164
        type: "text",
165
        value: "",
166
        data: {
167
            hName: "figure",
168
            hProperties: {
169
                ...(options.className ? { class: options.className } : {}),
170
            },
171
            hChildren: [
172
                h("div", {}, ...children),
173
                ...(!canNest && imageNodes[0].title
174
                    ? [h("figcaption", {}, [imageNodes[0].title])]
175
                    : []),
176
            ],
177
        },
178
    };
179
};
180

181
const isAbsoluteUrl = (url: string): boolean => {
182
    return /^[a-z][a-z\d+\-.]*:/i.test(url);
183
};
184

185
const createFigureFromLink = (
186
    linkNode: Link,
187
    options: Options,
188
): RootContent => {
189
    const imageNodes = linkNode.children as Image[];
190
    const canNest = imageNodes.some((imageNode) => imageNode.title);
191
    const target = options.linkAttributes.target;
192
    const rel = options.linkAttributes.rel;
193

194
    let children: Child[];
195

196
    if (canNest) {
197
        children = imageNodes.map((imageNode) =>
198
            h("figure", {}, [
199
                h("img", createImageProperties(imageNode, options.lazyLoad), []),
200
                ...(imageNode.title ? [h("figcaption", {}, [imageNode.title])] : []),
201
            ]),
202
        );
203
    } else {
204
        children = imageNodes.map((imageNode) =>
205
            h("img", createImageProperties(imageNode, options.lazyLoad), []),
206
        );
207
    }
208

209
    return {
210
        type: "text",
211
        value: "",
212
        data: {
213
            hName: "figure",
214
            hProperties: {
215
                ...(options.className ? { class: options.className } : {}),
216
            },
217
            hChildren: [
218
                h(
219
                    "a",
220
                    {
221
                        href: linkNode.url,
222
                        ...(isAbsoluteUrl(linkNode.url) && {
223
                            ...(target && { target }),
224
                            ...(rel && { rel }),
225
                        }),
226
                    },
227
                    ...children,
228
                ),
229
                ...(linkNode.title ? [h("figcaption", {}, [linkNode.title])] : []),
230
            ],
231
        },
232
    };
233
};
234

235
const createCustomNodes = (
236
    paragraphNode: Paragraph,
237
    options: Options,
238
): RootContent[] => {
239
    const nodes: RootContent[] = [];
240

241
    let extractedNodes: Image[] | Link[] = extractValidImageNodes(
242
        paragraphNode,
243
        options,
244
    );
245

246
    if (extractedNodes.length) {
247
        const newNode = createFigureFromImages(extractedNodes, options);
248
        nodes.push(newNode);
249
        return nodes;
250
    }
251

252
    extractedNodes = extractValidImageLinkNodes(paragraphNode, options);
253

254
    if (extractedNodes.length) {
255
        for (const extractedNode of extractedNodes) {
256
            const newNode = createFigureFromLink(extractedNode, options);
257
            nodes.push(newNode);
258
        }
259
        return nodes;
260
    }
261

262
    return [];
263
};
264

265
export default remarkImageCaption;
266
export type { UserOptions };

1
import { visit } from "unist-util-visit";
2

3
export default function remarkImageWidth() {
4
    var regex = / w-([0-9]+)%/
5
    const transformer = async tree => {
6
        const visitor = (paragraphNode, index, parent) => {
7
            if (index === undefined || parent === undefined) return
8

9
            parent.children.forEach((node, index, parent) => {
10
                if (node.type === 'text' && node.data !== undefined && node.data.hName === 'figure') {
11
                    findImgNodes(node).forEach(img => {
12
                        const { parentNode, imgNode } = img
13
                        if (imgNode.properties.alt.search(regex) != -1) {
14
                            if (parentNode !== undefined && parentNode.tagName === 'figure') {
15
                                imgNode.properties.width = `${imgNode.properties.alt.match(regex)[1]}%`
16
                                parentNode.properties.style = `justify-items: center;`
17
                            }
18
                            imgNode.properties.alt = imgNode.properties.alt.replace(regex, "")
19
                        }
20
                    })
21
                }
22
            })
23
        }
24
        visit(tree, 'paragraph', visitor)
25
    }
26
    return transformer
27
}
28

29
function findImgNodes(node, parent = undefined, imgNodes = []) {
30
    if (node.tagName === 'img') {
31
        imgNodes.push({'parentNode': parent, 'imgNode': node})
32
    } else if (node.data !== undefined && node.data.hChildren !== undefined) {
33
        node.data.hChildren.forEach(child => findImgNodes(child, node, imgNodes))
34
    } else if (node.children !== undefined) {
35
        node.children.forEach(child => findImgNodes(child, node, imgNodes))
36
    }
37
    return imgNodes
38
}

1
<Markdown class="mb-6 markdown-content onload-animation">

1
 <Markdown class="mb-6 markdown-content onload-animation" basePath={path.join("content/posts/", getDir(entry.id))}>

1
import path from 'node:path'
2
import { getImage } from 'astro:assets'
3
import { parseHTML } from 'linkedom'

1
interface Props {
2
  class: string
3
}

1
interface Props {
2
  class: string
3
  basePath?: string
4
}

1
const className = Astro.props.class

1
const { class: className, basePath = '/' } = Astro.props
2
/*
3
 * Normally, relative paths under the `src` directory are handled by Astro.
4
 * However, paths that the plugin couldn't process may appear here and require separate handling.
5
 */
6
const html = await Astro.slots.render('default')
7
const { document } = parseHTML(html)
8
await (async () => {
9
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
10
  const modules: Record<string, any> = import.meta.glob(
11
    '../../**/*.{jpeg,jpg,png,tiff,webp,gif,svg,avif}',
12
  )
13
  const re = /^(?![a-zA-Z]+:\/|\/)/
14
  for (const img of document.querySelectorAll('img')) {
15
    const src = img.getAttribute('src')
16
    if (!src || !re.test(src)) continue
17
    const normalizedPath = path
18
      .normalize(path.join('../../', basePath, src))
19
      .replaceAll('\\', '/')
20
    const moduleLoader = modules[normalizedPath]
21
    if (!moduleLoader) continue
22
    try {
23
      const module = await moduleLoader()
24
      const result = await getImage({ src: module.default })
25
      img.setAttribute('src', result.src)
26
    } catch (error) {
27
      console.warn(
28
        `Skipping image "${normalizedPath}" due to processing error:`,
29
        error,
30
      )
31
    }
32
  }
33
})()

1
 <slot/>

1
    <Fragment set:html={document.toString()} />

1
import remarkImageCaption from "./src/plugins/remark-image-caption.ts";//图片标题
2
import remarkImageWidth from './src/plugins/remark-image-width.js'图片大小

1
  remarkPlugins: [
2
            remarkMath, // 支持 $ 数学语法
3
            remarkReadingTime, // 计算阅读时长
4
            remarkExcerpt, // 自动生成摘要
5
            remarkGithubAdmonitionsToDirectives, // 支持 GitHub 风格提示块
6
            remarkDirective, // 支持 ::note 等指令
7
            [
8
                remarkImageCaption,
9
                {
10
                    className: 'image-caption',
11
                },
12
            ],
13
            remarkImageWidth,
14
            remarkSectionize, // 自动 section 包裹
15
            parseDirectiveNode, // 自定义指令处理
16
        ],