feat(bi-link): support image size (#486)

LincZero · web-flow · commit 752d13a11b24 · 2025-05-01T14:29:52.000+08:00
* feat(bi-link): support image size
* docs(bi-link): refactor bi-link syntax docs
* feat(bi-link): support size without height
diff --git a/docs/pages/en/integrations/markdown-it-bi-directional-links/index.md b/docs/pages/en/integrations/markdown-it-bi-directional-links/index.md
@@ -28,6 +28,8 @@ This plugin is a fully featured compatible implementation version of [Obsidian](
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>Images</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
+  <span>Images size</span>
+  <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>Custom text</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>Custom HTML attributes</span>
diff --git a/docs/pages/en/integrations/markdown-it-bi-directional-links/syntax.md b/docs/pages/en/integrations/markdown-it-bi-directional-links/syntax.md
@@ -18,6 +18,8 @@ The following syntaxes are supported:
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>Images</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
+  <span>Images size</span>
+  <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>Custom text</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>Custom HTML attributes</span>
@@ -27,9 +29,7 @@ The following syntaxes are supported:
   <span>Absolute path</span>
 </div>
 
-## Syntax Reference
-
-### Basic
+## Basic Syntax
 
 The syntax is the same as what [Internal links - Obsidian Help](https://help.obsidian.md/Linking+notes+and+files/Internal+links) supported and simple to write:
 
@@ -41,6 +41,8 @@ The `Bi-directional Links Example Page` is the file name of the target page. The
 
 [[Bi-directional Links Example Page]]
 
+## link url
+
 ### Hash tags
 
 ::: info What is the targeted title? How does this feature work?
@@ -81,6 +83,10 @@ The rendered result will be:
 
 [[Bi-directional Links Example Page#section-2]]
 
+Or leave the page section blank and directly fill in `#<heading>` to indicate a jump to the specified heading of the current page, such as:
+
+[[#basic-syntax]]
+
 ### Query strings
 
 Beyond the default behaviors that Obsidian supported, we also support query strings in the link target. This is useful when you have a inner Vue component or JavaScript logic that can handle the query strings as part of the automation:
@@ -93,7 +99,19 @@ The rendered result will be:
 
 [[Bi-directional Links Example Page?query=string]]
 
-### Image
+### Absolute path
+
+```markdown
+[[Some Full Path Reference to Your Page]]
+```
+
+Demo
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page]]
+
+### Show Image
+
+Adding `!` in front of `[[...]]` can display the picture, video, audio.
 
 ```markdown
 ![[foxtail field.jpg]]
@@ -103,6 +121,24 @@ Demo
 
 ![[foxtail field.jpg]]
 
+## Additional attributes
+
+This part is optional.
+
+### Media Size
+
+(It takes effect for pictures and video links)
+
+```markdown
+![[foxtail field.jpg|pic alt(option)|200x200]]
+```
+
+Among them, `200x0` or `0x200` respectively indicate setting only the width or heigh.
+
+Demo
+
+![[foxtail field.jpg|pic alt(option)|200x200]]
+
 ### Custom Text
 
 ```markdown
@@ -113,6 +149,10 @@ Demo
 
 [[Bi-directional Links Example Page|Custom Text]]
 
+For jump links, this is the displayed text.
+For the display of pictures or videos, etc., this is the alt attribute.
+(It is displayed when the object cannot be rendered)
+
 #### Use Markdown markup in custom text
 
 ```markdown
@@ -169,17 +209,9 @@ Demo
 
 [[Bi-directional Links Example Page]]{.custom-class}
 
-### Absolute path
+## More demo
 
-```markdown
-[[Some Full Path Reference to Your Page]]
-```
-
-Demo
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page]]
-
-#### Image with absolute path
+### Image with absolute path
 
 ```markdown
 ![[en/integrations/markdown-it-bi-directional-links/images/railway near by beach same name.jpg]]
@@ -199,7 +231,7 @@ Demo
 
 ![[pages/en/integrations/markdown-it-bi-directional-links/images/same-name/railway near by beach same name.jpg]]
 
-#### Audio with absolute path
+### Audio with absolute path
 
 ```markdown
 ![[pages/en/integrations/markdown-it-bi-directional-links/audios/Applause.mp3]]
@@ -209,7 +241,7 @@ Demo
 
 ![[pages/en/integrations/markdown-it-bi-directional-links/audios/Applause.mp3]]
 
-#### Video with absolute path
+### Video with absolute path
 
 ```markdown
 ![[pages/en/integrations/markdown-it-bi-directional-links/videos/Big rabbit came out of the hutch.mp4]]
@@ -219,7 +251,7 @@ Demo
 
 ![[pages/en/integrations/markdown-it-bi-directional-links/videos/Big rabbit came out of the hutch.mp4]]
 
-#### Absolute path with custom text
+### Absolute path with custom text
 
 ```markdown
 [[Some Full Path Reference to Your Page|Custom Text]]
@@ -228,5 +260,3 @@ Demo
 Demo
 
 [[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|Custom Text]]
-
-
diff --git a/docs/pages/zh-CN/integrations/markdown-it-bi-directional-links/index.md b/docs/pages/zh-CN/integrations/markdown-it-bi-directional-links/index.md
@@ -29,6 +29,8 @@ import packageJSON from '~/packages/markdown-it-bi-directional-links/package.jso
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>图片双链</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
+  <span>图片尺寸</span>
+  <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>自定义文案</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>自定义 HTML 属性</span>
diff --git a/docs/pages/zh-CN/integrations/markdown-it-bi-directional-links/syntax.md b/docs/pages/zh-CN/integrations/markdown-it-bi-directional-links/syntax.md
@@ -18,6 +18,8 @@ sidebarTitle: 语法
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>图片双链</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
+  <span>图片尺寸</span>
+  <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>自定义文案</span>
   <div h=[1rem]><div i-icon-park-outline:check-one text="green-600" /></div>
   <span>自定义 HTML 属性</span>
@@ -27,9 +29,7 @@ sidebarTitle: 语法
   <span>绝对路径语法</span>
 </div>
 
-## 用法示例
-
-### 基本语法
+## 基本语法
 
 其语法与 [Internal links - Obsidian Help](https://help.obsidian.md/Linking+notes+and+files/Internal+links)支持的语法相同，编写起来也很简单：
 
@@ -43,6 +43,8 @@ sidebarTitle: 语法
 
 [[双向链接示例页面]]
 
+## 链接 url
+
 ### Hash tag（标题选择器）
 
 ::: info 目标标题是什么？这样的功能是如何工作的？
@@ -83,6 +85,10 @@ document.querySelector('#为什么')
 
 [[双向链接示例页面#章节-2]]
 
+或者不写页面部分，直接填写 `#<heading>` 表示跳转到当前页面的指定标题，如：
+
+[[#基本语法]]
+
 ### 查询字符串
 
 除了 Obsidian 支持的默认行为外，我们还支持「查询字符串」。
@@ -97,7 +103,19 @@ document.querySelector('#为什么')
 
 [[双向链接示例页面?query=string]]
 
-### 图片
+### 绝对路径
+
+```markdown
+[[某个完整路径]]
+```
+
+效果
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面]]
+
+### 显示图片
+
+在 `[[...]]` 前面添加 `!` 可以显示图片、视频、音频等。
 
 ```markdown
 ![[一片 狗尾草.jpg]]
@@ -107,6 +125,24 @@ document.querySelector('#为什么')
 
 ![[一片 狗尾草.jpg]]
 
+## 额外属性
+
+这部分是可选的。
+
+### 显示大小
+
+（对图片和视频链接生效）
+
+```markdown
+![[一片 狗尾草.jpg|图片名(可省略)|200x200]]
+```
+
+其中 `200x0` 或 `0x200` 分别表示仅设置宽或高。
+
+效果
+
+![[一片 狗尾草.jpg|图片名(可省略)|200x200]]
+
 ### 自定义显示的文案
 
 ```markdown
@@ -117,6 +153,9 @@ document.querySelector('#为什么')
 
 [[双向链接示例页面|自定义文案]]
 
+对于跳转链接来说，这是显示的文字。对于图片或视频等显示来说，这是 alt 属性
+(用于对象无法渲染时显示)
+
 #### 自定义文案中使用 Markdown 语法
 
 ```markdown
@@ -175,17 +214,9 @@ document.querySelector('#为什么')
 
 [[双向链接示例页面]]{.some-class}
 
-### 绝对路径
-
-```markdown
-[[某个完整路径]]
-```
-
-效果
-
-[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面]]
+## 更多案例
 
-#### 图片配合绝对路径
+### 图片配合绝对路径
 
 ```markdown
 ![[zh-CN/integrations/markdown-it-bi-directional-links/images/海滩铁轨 同名图片.jpg]]
@@ -205,7 +236,7 @@ document.querySelector('#为什么')
 
 ![[pages/zh-CN/integrations/markdown-it-bi-directional-links/images/same-name/海滩铁轨 同名图片.jpg]]
 
-#### 音频配合绝对路径
+### 音频配合绝对路径
 
 ```markdown
 ![[pages/zh-CN/integrations/markdown-it-bi-directional-links/audios/鼓掌声.mp3]]
@@ -215,7 +246,7 @@ document.querySelector('#为什么')
 
 ![[pages/zh-CN/integrations/markdown-it-bi-directional-links/audios/鼓掌声.mp3]]
 
-#### 视频配合绝对路径
+### 视频配合绝对路径
 
 ```markdown
 ![[pages/zh-CN/integrations/markdown-it-bi-directional-links/videos/大兔子从兔窝中钻出.mp4]]
@@ -225,7 +256,7 @@ document.querySelector('#为什么')
 
 ![[pages/zh-CN/integrations/markdown-it-bi-directional-links/videos/大兔子从兔窝中钻出.mp4]]
 
-#### 绝对路径和自定义文案
+### 绝对路径和自定义文案
 
 ```markdown
 [[某个文件夹|自定义文案]]
diff --git a/packages/markdown-it-bi-directional-links/src/index.test.ts b/packages/markdown-it-bi-directional-links/src/index.test.ts
@@ -91,6 +91,46 @@ describe('markdown-it-bi-directional-links', () => {
     expect(rendered).toBe('<p><img src="/foo.png" alt="alt text"></p>\n')
   })
 
+  it('image size', () => {
+    const rendered = new MarkdownIt({ html: true })
+      .use(BiDirectionalLinks({ dir: testdataDir }))
+      .render('[[foo.png|300x200]]')
+
+    expect(rendered).toBe('<p><img src="/foo.png" alt="" width="300" height="200"></p>\n')
+  })
+
+  it('image size, without height', () => {
+    const rendered = new MarkdownIt({ html: true })
+      .use(BiDirectionalLinks({ dir: testdataDir }))
+      .render('[[foo.png|300]]')
+
+    expect(rendered).toBe('<p><img src="/foo.png" alt="" width="300"></p>\n')
+  })
+
+  it('image size, with zero height', () => {
+    const rendered = new MarkdownIt({ html: true })
+      .use(BiDirectionalLinks({ dir: testdataDir }))
+      .render('[[foo.png|300x0]]')
+
+    expect(rendered).toBe('<p><img src="/foo.png" alt="" width="300"></p>\n')
+  })
+
+  it('image size, with zero width', () => {
+    const rendered = new MarkdownIt({ html: true })
+      .use(BiDirectionalLinks({ dir: testdataDir }))
+      .render('[[foo.png|0x200]]')
+
+    expect(rendered).toBe('<p><img src="/foo.png" alt="" height="200"></p>\n')
+  })
+
+  it('image size, with alt', () => {
+    const rendered = new MarkdownIt({ html: true })
+      .use(BiDirectionalLinks({ dir: testdataDir }))
+      .render('[[foo.png|alt text|300x200]]')
+
+    expect(rendered).toBe('<p><img src="/foo.png" alt="alt text" width="300" height="200"></p>\n')
+  })
+
   it('should render simple form with custom html texts', () => {
     const inlineHTML = `<span style="color: red;">Custom HTML (Before)</span> Middle <span style="color: blue;">Custom HTML (After)</span>`
 
diff --git a/packages/markdown-it-bi-directional-links/src/utils.ts b/packages/markdown-it-bi-directional-links/src/utils.ts
diff --git a/packages/markdown-it-unlazy-img/src/index.ts b/packages/markdown-it-unlazy-img/src/index.ts
