Skip to content

Commit 7569068

Browse files
hacxyhacxy
committed
fix: fix the custom image component causing element positioning disorder
1 parent 91186ad commit 7569068

16 files changed

+238
-83
lines changed

‎packages/demo/.vitepress/config.ts.timestamp-1737697198928-665573bb2969c.mjs

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// .vitepress/config.ts
2+
import { defineConfigWithTheme } from "file:///Users/hacxy/Projects/vitepress-theme-mild/node_modules/.pnpm/vitepress@1.6.1_@algolia+client-search@5.18.0_@types+node@20.14.9_async-validator@4.2.5_light_32gskswphm2krivmguvncrv3kq/node_modules/vitepress/dist/node/index.js";
3+
import baseConfig from "file:///Users/hacxy/Projects/vitepress-theme-mild/packages/theme/config/index.js";
4+
var config_default = defineConfigWithTheme({
5+
title: "Hacxy's blog",
6+
description: "A VitePress Site",
7+
extends: baseConfig,
8+
themeConfig: {
9+
logo: "/cat-typing.gif",
10+
nav: [
11+
{ text: "Home", link: "/" },
12+
{ text: "Tags", link: "/pages/tagsasd" }
13+
],
14+
sidebar: {
15+
"/posts/orange/": "auto",
16+
"/posts/": "auto",
17+
"/config/": "auto",
18+
"/guide/": "auto",
19+
"/guide/apple/": "auto"
20+
},
21+
socialLinks: [
22+
{ icon: "github", link: "https://github.com/hacxy/vitepress-theme-mild" }
23+
],
24+
footer: {
25+
message: "MIT Licensed",
26+
copyright: 'Copyright \xA9 2024-Present <a href="https://github.com/hacxy">Hacxy</a>'
27+
}
28+
}
29+
});
30+
export {
31+
config_default as default
32+
};
33+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLnZpdGVwcmVzcy9jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvaGFjeHkvUHJvamVjdHMvdml0ZXByZXNzLXRoZW1lLW1pbGQvcGFja2FnZXMvZGVtby8udml0ZXByZXNzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvaGFjeHkvUHJvamVjdHMvdml0ZXByZXNzLXRoZW1lLW1pbGQvcGFja2FnZXMvZGVtby8udml0ZXByZXNzL2NvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvaGFjeHkvUHJvamVjdHMvdml0ZXByZXNzLXRoZW1lLW1pbGQvcGFja2FnZXMvZGVtby8udml0ZXByZXNzL2NvbmZpZy50c1wiO2ltcG9ydCB0eXBlIHsgVGhlbWVDb25maWcgfSBmcm9tICd2aXRlcHJlc3MtdGhlbWUtbWlsZCc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWdXaXRoVGhlbWUgfSBmcm9tICd2aXRlcHJlc3MnO1xuaW1wb3J0IGJhc2VDb25maWcgZnJvbSAndml0ZXByZXNzLXRoZW1lLW1pbGQvY29uZmlnJztcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnV2l0aFRoZW1lPFRoZW1lQ29uZmlnPih7XG4gIHRpdGxlOiAnSGFjeHlcXCdzIGJsb2cnLFxuICBkZXNjcmlwdGlvbjogJ0EgVml0ZVByZXNzIFNpdGUnLFxuICBleHRlbmRzOiBiYXNlQ29uZmlnLFxuICB0aGVtZUNvbmZpZzoge1xuICAgIGxvZ286ICcvY2F0LXR5cGluZy5naWYnLFxuICAgIG5hdjogW1xuICAgICAgeyB0ZXh0OiAnSG9tZScsIGxpbms6ICcvJyB9LFxuICAgICAgeyB0ZXh0OiAnVGFncycsIGxpbms6ICcvcGFnZXMvdGFnc2FzZCcgfVxuICAgIF0sXG4gICAgc2lkZWJhcjoge1xuICAgICAgJy9wb3N0cy9vcmFuZ2UvJzogJ2F1dG8nLFxuICAgICAgJy9wb3N0cy8nOiAnYXV0bycsXG4gICAgICAnL2NvbmZpZy8nOiAnYXV0bycsXG4gICAgICAnL2d1aWRlLyc6ICdhdXRvJyxcbiAgICAgICcvZ3VpZGUvYXBwbGUvJzogJ2F1dG8nXG4gICAgfSxcbiAgICBzb2NpYWxMaW5rczogW1xuICAgICAgeyBpY29uOiAnZ2l0aHViJywgbGluazogJ2h0dHBzOi8vZ2l0aHViLmNvbS9oYWN4eS92aXRlcHJlc3MtdGhlbWUtbWlsZCcgfVxuICAgIF0sXG4gICAgZm9vdGVyOiB7XG4gICAgICBtZXNzYWdlOiAnTUlUIExpY2Vuc2VkJyxcbiAgICAgIGNvcHlyaWdodDpcbiAgICAgICAgJ0NvcHlyaWdodCBcdTAwQTkgMjAyNC1QcmVzZW50IDxhIGhyZWY9XCJodHRwczovL2dpdGh1Yi5jb20vaGFjeHlcIj5IYWN4eTwvYT4nLFxuICAgIH0sXG4gIH1cbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUNBLFNBQVMsNkJBQTZCO0FBQ3RDLE9BQU8sZ0JBQWdCO0FBRXZCLElBQU8saUJBQVEsc0JBQW1DO0FBQUEsRUFDaEQsT0FBTztBQUFBLEVBQ1AsYUFBYTtBQUFBLEVBQ2IsU0FBUztBQUFBLEVBQ1QsYUFBYTtBQUFBLElBQ1gsTUFBTTtBQUFBLElBQ04sS0FBSztBQUFBLE1BQ0gsRUFBRSxNQUFNLFFBQVEsTUFBTSxJQUFJO0FBQUEsTUFDMUIsRUFBRSxNQUFNLFFBQVEsTUFBTSxpQkFBaUI7QUFBQSxJQUN6QztBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1Asa0JBQWtCO0FBQUEsTUFDbEIsV0FBVztBQUFBLE1BQ1gsWUFBWTtBQUFBLE1BQ1osV0FBVztBQUFBLE1BQ1gsaUJBQWlCO0FBQUEsSUFDbkI7QUFBQSxJQUNBLGFBQWE7QUFBQSxNQUNYLEVBQUUsTUFBTSxVQUFVLE1BQU0sZ0RBQWdEO0FBQUEsSUFDMUU7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLFNBQVM7QUFBQSxNQUNULFdBQ0U7QUFBQSxJQUNKO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==

‎packages/demo/.vitepress/config.ts.timestamp-1737701846652-55d11539f405f.mjs

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// .vitepress/config.ts
2+
import { defineConfigWithTheme } from "file:///Users/hacxy/Projects/vitepress-theme-mild/node_modules/.pnpm/vitepress@1.6.1_@algolia+client-search@5.18.0_@types+node@20.14.9_async-validator@4.2.5_light_32gskswphm2krivmguvncrv3kq/node_modules/vitepress/dist/node/index.js";
3+
import baseConfig from "file:///Users/hacxy/Projects/vitepress-theme-mild/packages/theme/config/index.js";
4+
var config_default = defineConfigWithTheme({
5+
title: "Hacxy's blog",
6+
description: "A VitePress Site",
7+
extends: baseConfig,
8+
themeConfig: {
9+
logo: "/cat-typing.gif",
10+
nav: [
11+
{ text: "Home", link: "/" },
12+
{ text: "Tags", link: "/pages/tagsasd" }
13+
],
14+
sidebar: {
15+
"/posts/orange/": "auto",
16+
"/posts/": "auto",
17+
"/config/": "auto",
18+
"/guide/": "auto",
19+
"/guide/apple/": "auto"
20+
},
21+
socialLinks: [
22+
{ icon: "github", link: "https://github.com/hacxy/vitepress-theme-mild" }
23+
],
24+
footer: {
25+
message: "MIT Licensed",
26+
copyright: 'Copyright \xA9 2024-Present <a href="https://github.com/hacxy">Hacxy</a>'
27+
}
28+
}
29+
});
30+
export {
31+
config_default as default
32+
};
33+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLnZpdGVwcmVzcy9jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvaGFjeHkvUHJvamVjdHMvdml0ZXByZXNzLXRoZW1lLW1pbGQvcGFja2FnZXMvZGVtby8udml0ZXByZXNzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvaGFjeHkvUHJvamVjdHMvdml0ZXByZXNzLXRoZW1lLW1pbGQvcGFja2FnZXMvZGVtby8udml0ZXByZXNzL2NvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvaGFjeHkvUHJvamVjdHMvdml0ZXByZXNzLXRoZW1lLW1pbGQvcGFja2FnZXMvZGVtby8udml0ZXByZXNzL2NvbmZpZy50c1wiO2ltcG9ydCB0eXBlIHsgVGhlbWVDb25maWcgfSBmcm9tICd2aXRlcHJlc3MtdGhlbWUtbWlsZCc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWdXaXRoVGhlbWUgfSBmcm9tICd2aXRlcHJlc3MnO1xuaW1wb3J0IGJhc2VDb25maWcgZnJvbSAndml0ZXByZXNzLXRoZW1lLW1pbGQvY29uZmlnJztcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnV2l0aFRoZW1lPFRoZW1lQ29uZmlnPih7XG4gIHRpdGxlOiAnSGFjeHlcXCdzIGJsb2cnLFxuICBkZXNjcmlwdGlvbjogJ0EgVml0ZVByZXNzIFNpdGUnLFxuICBleHRlbmRzOiBiYXNlQ29uZmlnLFxuICB0aGVtZUNvbmZpZzoge1xuICAgIGxvZ286ICcvY2F0LXR5cGluZy5naWYnLFxuICAgIG5hdjogW1xuICAgICAgeyB0ZXh0OiAnSG9tZScsIGxpbms6ICcvJyB9LFxuICAgICAgeyB0ZXh0OiAnVGFncycsIGxpbms6ICcvcGFnZXMvdGFnc2FzZCcgfVxuICAgIF0sXG4gICAgc2lkZWJhcjoge1xuICAgICAgJy9wb3N0cy9vcmFuZ2UvJzogJ2F1dG8nLFxuICAgICAgJy9wb3N0cy8nOiAnYXV0bycsXG4gICAgICAnL2NvbmZpZy8nOiAnYXV0bycsXG4gICAgICAnL2d1aWRlLyc6ICdhdXRvJyxcbiAgICAgICcvZ3VpZGUvYXBwbGUvJzogJ2F1dG8nXG4gICAgfSxcbiAgICBzb2NpYWxMaW5rczogW1xuICAgICAgeyBpY29uOiAnZ2l0aHViJywgbGluazogJ2h0dHBzOi8vZ2l0aHViLmNvbS9oYWN4eS92aXRlcHJlc3MtdGhlbWUtbWlsZCcgfVxuICAgIF0sXG4gICAgZm9vdGVyOiB7XG4gICAgICBtZXNzYWdlOiAnTUlUIExpY2Vuc2VkJyxcbiAgICAgIGNvcHlyaWdodDpcbiAgICAgICAgJ0NvcHlyaWdodCBcdTAwQTkgMjAyNC1QcmVzZW50IDxhIGhyZWY9XCJodHRwczovL2dpdGh1Yi5jb20vaGFjeHlcIj5IYWN4eTwvYT4nLFxuICAgIH0sXG4gIH1cbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUNBLFNBQVMsNkJBQTZCO0FBQ3RDLE9BQU8sZ0JBQWdCO0FBRXZCLElBQU8saUJBQVEsc0JBQW1DO0FBQUEsRUFDaEQsT0FBTztBQUFBLEVBQ1AsYUFBYTtBQUFBLEVBQ2IsU0FBUztBQUFBLEVBQ1QsYUFBYTtBQUFBLElBQ1gsTUFBTTtBQUFBLElBQ04sS0FBSztBQUFBLE1BQ0gsRUFBRSxNQUFNLFFBQVEsTUFBTSxJQUFJO0FBQUEsTUFDMUIsRUFBRSxNQUFNLFFBQVEsTUFBTSxpQkFBaUI7QUFBQSxJQUN6QztBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1Asa0JBQWtCO0FBQUEsTUFDbEIsV0FBVztBQUFBLE1BQ1gsWUFBWTtBQUFBLE1BQ1osV0FBVztBQUFBLE1BQ1gsaUJBQWlCO0FBQUEsSUFDbkI7QUFBQSxJQUNBLGFBQWE7QUFBQSxNQUNYLEVBQUUsTUFBTSxVQUFVLE1BQU0sZ0RBQWdEO0FBQUEsSUFDMUU7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLFNBQVM7QUFBQSxNQUNULFdBQ0U7QUFBQSxJQUNKO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==

‎packages/demo/guide/index.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
# publish: false
33
# sidebar: false
4-
54
---
65

76
# guide - index
7+
8+
![](https://raw.githubusercontent.com/hacxy/hacxy/main/images/20241231113508.png)

‎packages/demo/posts/scroll-restoration.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
date: 2025-01-24
3+
---
4+
5+
# 浏览器滚动恢复属性
6+
7+
## 背景
8+
9+
最近在开发 vitepress 主题, 发现一个从来没有注意到的问题, 就是每次刷新页面时网页都会回到上一次滚动条的位置, 并且这个过程是不流畅的, 存在一个较长的时间间隔:
10+
11+
![](https://hacxy-1259720482.cos.ap-hongkong.myqcloud.com/images/Kapture%25202025-01-22%2520at%252010.11.28.gif)
12+
13+
## 问题
14+
15+
我的主题需要一个逐行显示的动画效果, 如果每次刷新页面都回到之前的滚动位置, 那么就会存在动画效果还没有播放完毕时, 页面就会回到上一次的位置, 导致页面会出现一段时间的空白:
16+
17+
![](https://hacxy-1259720482.cos.ap-hongkong.myqcloud.com/images/Kapture%25202025-01-22%2520at%252010.08.28.gif)
18+
19+
为此我还向 VitePress 提了一个: [issue](https://github.com/vuejs/vitepress/issues/4506).
20+
21+
## 解决方案
22+
23+
在这个 Issue 得到回复前, 我意外的把这个问题给解决了
24+
25+
一开始我以为是 `VitePress` 故意为之, 直到我找到了这个属性: [History.scrollRestoration](https://developer.mozilla.org/zh-CN/docs/Web/API/History/scrollRestoration#auto)
26+
27+
这个属性默认情况下为`auto` 也就是刷新会自动回到上次滚动条的位置, 如果想关闭它, 则只需要:
28+
29+
```ts
30+
if ('scrollRestoration' in history) {
31+
history.scrollRestoration = 'manual';
32+
}
33+
```
34+
35+
之后无论页面在哪个位置刷新都会回到最顶部. 完美解决 😎
36+
37+
至于效果嘛, 本页面就是最好的例子.

‎packages/theme/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import type { ThemeConfig } from './types';
33
import { setup } from '@css-render/vue3-ssr';
44
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client';
55
import { MotionPlugin } from '@vueuse/motion';
6-
import { NImage, NImageGroup } from 'naive-ui';
6+
import { NImageGroup } from 'naive-ui';
77
import VPTheme from 'vitepress/theme';
88
import Bili from './src/client/components/Bili.vue';
99
import BlogPage from './src/client/components/BlogPage.vue';
1010
import ContentWrapper from './src/client/components/ContentWrapper.vue';
1111
import DocsHeaderInfo from './src/client/components/DocsHeaderInfo.vue';
12+
import Image from './src/client/components/Image.vue';
1213
import Layout from './src/client/components/Layout.vue';
1314
import Tags from './src/client/components/Tags.vue';
1415
import { useProgress } from './src/client/hooks/useProgress';
@@ -85,7 +86,7 @@ const MildTheme: Theme = {
8586
app.component('blog', BlogPage);
8687
app.component('tags', Tags);
8788
app.component('DocsHeaderInfo', DocsHeaderInfo);
88-
app.component('Image', NImage);
89+
app.component('Image', Image);
8990
app.component('ImageGroup', NImageGroup);
9091
app.component('ContentWrapper', ContentWrapper);
9192
app.component('Bili', Bili);

‎packages/theme/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@
5555
"typed.js": "^2.1.0",
5656
"vitepress-plugin-group-icons": "^1.3.2",
5757
"vitepress-plugin-rss": "^0.3.0",
58-
"vue": "^3.4.21"
58+
"vue": "^3.4.21",
59+
"vue-easy-lightbox": "^1.19.0"
5960
},
6061
"devDependencies": {
6162
"@types/fs-extra": "^11.0.4",

‎packages/theme/src/client/components/ContentWrapper.vue

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
<script lang="ts" setup>
2+
import { useImagePreview } from '../hooks/useImagePreview';
3+
4+
const props = defineProps<{
5+
imgsStr: string
6+
}>();
27
const classes = { 'slide-enter-content': !((import.meta as any).env.DEV) };
8+
const imgs = props.imgsStr.split(',');
9+
const { $images } = useImagePreview();
10+
$images.set(imgs);
311
</script>
412

513
<template>

‎packages/theme/src/client/components/Image.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import { useImagePreview } from '../hooks/useImagePreview';
3+
4+
const props = defineProps<{
5+
src: string
6+
alt: string
7+
index: string | number
8+
}>();
9+
const idx = Number(props.index);
10+
const { show } = useImagePreview();
11+
</script>
12+
13+
<template>
14+
<img
15+
class="VMImage"
16+
:src="src"
17+
:alt="alt"
18+
@click="show(idx)"
19+
>
20+
</template>
21+
22+
<style lang="scss" scoped>
23+
.VMImage {
24+
cursor: pointer;
25+
}
26+
</style>

‎packages/theme/src/client/components/ImagePreview.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import VueEaseLightBox from 'vue-easy-lightbox';
3+
import { useImagePreview } from '../hooks/useImagePreview';
4+
5+
const { visible, hide, currentIndex, images } = useImagePreview();
6+
</script>
7+
8+
<template>
9+
<VueEaseLightBox
10+
move-disabled
11+
loop
12+
:imgs="images"
13+
:visible="visible"
14+
:index="currentIndex"
15+
@hide="hide"
16+
/>
17+
</template>

‎packages/theme/src/client/components/Layout.vue

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useInitData } from '../hooks/useInitData';
88
import { useCloseSidebarOnEscape, useSidebar } from '../hooks/useSidebar';
99
import Content from './Content.vue';
1010
import VMFooter from './Footer.vue';
11+
import ImagePreview from './ImagePreview.vue';
1112
import LocalNav from './LocalNav.vue';
1213
import Sidebar from './Sidebar.vue';
1314
@@ -197,6 +198,7 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
197198
<slot name="layout-bottom" />
198199
</div>
199200
<content v-else />
201+
<ImagePreview />
200202
</template>
201203

202204
<style scoped lang="scss">

‎packages/theme/src/client/components/icons/IconCalendar.vue

-26
This file was deleted.

‎packages/theme/src/client/components/icons/IconClock.vue

-20
This file was deleted.

‎packages/theme/src/client/components/icons/IconWords.vue

-15
This file was deleted.

‎packages/theme/src/client/hooks/useImagePreview.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useStore } from '@nanostores/vue';
2+
import { atom } from 'nanostores';
3+
4+
const $visible = atom(false);
5+
const $currentIndex = atom(0);
6+
const $images = atom<string[]>([]);
7+
8+
export function useImagePreview() {
9+
const visible = useStore($visible);
10+
const currentIndex = useStore($currentIndex);
11+
const images = useStore($images as any);
12+
13+
function show(index: number) {
14+
$visible.set(true);
15+
$currentIndex.set(index);
16+
}
17+
18+
function hide() {
19+
$visible.set(false);
20+
}
21+
22+
return {
23+
visible,
24+
currentIndex,
25+
show,
26+
hide,
27+
images,
28+
$images
29+
};
30+
}

‎packages/theme/src/node/plugins/markdown.ts

+28-8
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,39 @@ export const insertDocsHeaderInfo: PluginSimple = md => {
1919

2020
export const imgToImage: PluginSimple = md => {
2121
const defaultRender = md.renderer.render;
22-
md.renderer.rules.image = (tokens, idx) => {
23-
const token = tokens[idx];
24-
const srcIndex = token.attrIndex('src');
25-
const altIndex = token.attrIndex('alt');
22+
let imgs: string[] = [];
2623

27-
const src = token?.attrs?.[srcIndex][1];
28-
const alt = altIndex >= 0 ? token?.attrs?.[altIndex][1] : '';
24+
// Add a rule to collect image src attributes
25+
md.core.ruler.push('collect_image_src', state => {
26+
imgs = [];
27+
state.tokens.forEach(token => {
28+
if (token.type === 'inline' && token.children) {
29+
token.children.forEach(child => {
30+
if (child.type === 'image') {
31+
const src = child.attrGet('src');
32+
if (src) {
33+
imgs.push(src);
34+
}
35+
}
36+
});
37+
}
38+
});
39+
});
2940

30-
return `<Image src="${src}" alt="${alt}" />`;
41+
md.renderer.rules.image = (tokens, idx, _opt, env) => {
42+
const token = tokens[idx];
43+
const src = token.attrGet('src');
44+
const alt = token.attrGet('alt');
45+
if (!env.imgs) {
46+
env.imgs = [];
47+
}
48+
env.imgs.push({ src, index: env.imgs.length });
49+
return `<Image src="${src}" alt="${alt}" index="${env.imgs.length - 1}"/>`;
3150
};
51+
3252
md.renderer.render = (...args) => {
3353
const content = defaultRender.apply(md.renderer, args);
34-
return `<ImageGroup><ContentWrapper>${content}</ContentWrapper></ImageGroup>`;
54+
return `<ContentWrapper imgsStr="${imgs.join(',')}">${content}</ContentWrapper>`;
3555
};
3656
};
3757

0 commit comments

Comments
 (0)