语法
当前支持以下语法:
#
的链接?
的链接用法示例
基本语法
其语法与 Internal links - Obsidian Help支持的语法相同,编写起来也很简单:
[[双向链接示例页面]]
其中,双向链接示例页面
是目标页面的文件名。
渲染结果将是这样的:
Hash tag(标题选择器)
目标标题是什么?这样的功能是如何工作的?
当点击右侧大纲内的链接或者直接点击标题左侧的链接按钮的时候,注意观察地址栏中的变化。
你会发现 URL 中会出现一个 #
符号,后面跟着一个 ID,这个 ID 就是目标标题的 ID。
这里说的目标标题的 ID 其实就是 HTML 元素的 ID,所以理论上不光是可以要求框架和浏览器配合着去滚动标题元素到视窗内,也可以是其他有效的带有匹配得上 HTML ID 的元素。
这样的元素可以通过按下 F12 打开开发者工具,然后在控制台中输入
document.querySelector('#为什么')
来查找到,这段代码将会返回一个 HTML 元素,这个元素就是我们说的「目标标题」。
我们也支持这一功能,语法参考此处:链接到注释中的标题 - 内部链接 - Obsidian 帮助。
TIP
当您想要在当页面打开并加载后跳转到特定部分时,这种功能就非常有用了。
搭配使用我们提供的 闪烁高亮当前的目标标题 VitePress 插件时,hash tag 选中的标题(双链指向的标题)将在页面加载后以闪烁的效果突出显示,从而增强能力和阅读体验。
[[双向链接示例页面#标题-id]]
标题-id
是目标页面的哈希标签。默认情况下,哈希标签将是标题元素的 id
属性。
渲染结果将是这样的:
查询字符串
除了 Obsidian 支持的默认行为外,我们还支持「查询字符串」。
这对于页面内引用了 Vue 组件或 JavaScript 逻辑的页面或者设计而言,可以将查询字符串作为自动化的一部分来处理,这将非常有用:
[[双向链接示例页面?query=string]]
渲染结果将是这样的:
图片
![[一片 狗尾草.jpg]]
效果
自定义显示的文案
[[双向链接示例页面|自定义文案]]
效果
自定义文案中使用 Markdown 语法
[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|`代码块(前缀)` 中间的内容 `代码块(后缀)`]]
[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|**粗体(前缀)** 中间的内容 **粗体(后缀)**]]
[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|*斜体(前缀)* 中间的内容 *斜体(后缀)*]]
[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|~~删除线(前缀)~~ 中间的内容 ~~删除线(后缀)~~]]
效果
自定义文案中使用 HTML 语法
[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|<span style="color: red;">自定义 HTML</span>]]
[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|<span style="color: red;">自定义 HTML</span> 中间的内容 <span style="color: blue;">自定义 HTML</span>]]
兼容 markdown-it-attrs
修改 HTML 属性(Attribute)
改颜色
[[双向链接示例页面]]{style="color: red;"}
效果
改类名
[[双向链接示例页面]]{.some-class}
效果
绝对路径
[[某个完整路径]]
效果
pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面
图片配合绝对路径
![[zh-CN/integrations/markdown-it-bi-directional-links/images/海滩铁轨 同名图片.jpg]]
效果
它与同名图片是可以区分的:
![[zh-CN/integrations/markdown-it-bi-directional-links/images/same-name/海滩铁轨 同名图片.jpg]]
效果
音频配合绝对路径
![[pages/zh-CN/integrations/markdown-it-bi-directional-links/audios/鼓掌声.mp3]]
效果
视频配合绝对路径
![[pages/zh-CN/integrations/markdown-it-bi-directional-links/videos/大兔子从兔窝中钻出.mp4]]
效果
绝对路径和自定义文案
[[某个文件夹|自定义文案]]
效果