在 Astro 博客中为 Markdown 添加多图并排的自适应网格画廊功能

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

3
/**
4
 * Custom Remark plugin for creating responsive image grids.
5
 *
6
 * It parses markdown blocks surrounded by `[grid]` and `[/grid]` tags and wraps
7
 * the contained images in a styled `div` container with a grid layout.
8
 * The column count is evaluated automatically based on the number of inserted images
9
 * inside the grid tags (up to 4 columns).
10
 */
11
export function remarkImageGrid() {
12
  return (tree) => {
13
    // 聚焦根节点，以便收集我们要进行重组的元素
14
    if (tree.type === 'root') {
15
      const newChildren = [];
16
      let inGrid = false;
17
      let gridChildren = [];
18

19
      for (let i = 0; i < tree.children.length; i++) {
20
        let node = tree.children[i];
21

22
        // 识别包含图片的段落中的 [grid] 或者 [/grid] 标记
23
        if (node.type === 'paragraph' && node.children.length > 0) {
24
          const first = node.children[0];
25
          const last = node.children[node.children.length - 1];
26

27
          let containsGridStart = false;
28
          let containsGridEnd = false;
29

30
          if (first.type === 'text' && first.value.trim().startsWith('[grid]')) {
31
            containsGridStart = true;
32
          }
33
          if (last.type === 'text' && last.value.trim().endsWith('[/grid]')) {
34
             containsGridEnd = true;
35
          }
36

37
          // Case: 当 [grid] 标签跨越不同段落（中间有空行换行）时
38
          if (!inGrid && containsGridStart) {
39
            inGrid = true;
40
            // 清理语法标签文本本身
41
            first.value = first.value.replace(/^\s*\[grid\]\s*/, '');
42
            if (node.children.length === 1 && first.value.trim() === '') {
43
               // 处理它自成一行的极端情况
44
            } else {
45
               gridChildren.push(node);
46
            }
47
            continue;
48
          }
49

50
          if (inGrid && containsGridEnd) {
51
             inGrid = false;
52
             last.value = last.value.replace(/\s*\[\/grid\]\s*$/, '');
53
             if (node.children.length === 1 && last.value.trim() === '') {
54
             } else {
55
                 gridChildren.push(node);
56
             }
57

58
             // ✨ 重点：动态计数，根据包含的图片自动计算列数，最高支持一行四列
59
             let imgCount = 0;
60
             gridChildren.forEach(child => {
61
                 visit(child, 'image', () => { imgCount++; });
62
             });
63
             const cols = imgCount || 2;
64
             const mdColClass = cols === 1 ? 'md:grid-cols-1' :
65
                                cols === 2 ? 'md:grid-cols-2' :
66
                                cols === 3 ? 'md:grid-cols-3' : 'md:grid-cols-4';
67

68
             // 将节点重新推入为一个自带 class 定义的 HTML 结构节点！
69
             newChildren.push({
70
               type: 'paragraph',
71
               data: {
72
                 hName: 'div',
73
                 hProperties: { className: ['image-grid', 'grid', 'grid-cols-1', mdColClass, 'gap-4', 'my-4'] }
74
               },
75
               children: gridChildren
76
             });
77
             gridChildren = []; // 初始化留待下次使用
78
             continue;
79
          }
80
        }
81

82
        // 把普通的非图节点正常塞回 AST 中
83
        if (inGrid) {
84
           gridChildren.push(node);
85
        } else {
86
           newChildren.push(node);
87
        }
88
      }
89

90
      // 防止用户忘记写闭合标签，帮他们补全推入
91
      if (inGrid) {
92
         newChildren.push(...gridChildren);
93
      }
94

95
      tree.children = newChildren;
96
    }
97
  };
98
}