vuepress-plugin-obsidian

实现obsidian语法向vuepress的平滑过渡，灵感来源于[windily-cloud/vuepress-plugin-obsidian](https://github.com/windily-cloud/vuepress-plugin-obsidian)

功能实现

一、容器语法转换

实现将obsidian中插件Admonition语法转换为vuepress中的语法，如将

```ad-tip
//something
```

转换为

:::tip

//something

:::

主要支持的有以下几种容器类型:

1. tip
2. warning
3. note
4. info
5. danger

同时支持Admonition容器中的title和collapse属性

二、标签转换

众所周知，obsidian中标签很好用，本插件提供了将其转换为vuepress内置组件<badage>

三、自定义对齐方式

在obsidian插件Admonition中新增Admonition type,新增right和center类型,然后在obsidian的外观设置中的mycss.css中配置自定义样式,建议样式如下:

.admonition-right .admonition-center {
    margin: 0;
    padding: 0;
}

.admonition-right>div:nth-child(2) {
    float: right;
}

.admonition-center>div:nth-child(2) {
    display: flex;
    justify-content: center;
}

注意:添加上述CSS样式,只是为了在obsidian中生效,显得不那么违和!

然后本插件就会自动将

```ad-right
居中
```

转换为

:::right
居中
:::

ad-center同理

四、 锚点链接同步修改原始链接

主要是解决这个问题

使用方法

1. 在vuepress工程.vuepress目录下,新建vuepress-plugin-obsidian文件夹
2. 将本项目的dist文件夹移动至该文件夹内
3. 按照如下方式在config.js中引用插件

import obsidianPlugin from "./vuepress-plugin-obsidian/dist";
export default defineUserConfig({
  //...
  plugins: [
    obsidianPlugin()
  ],
  //...
})

五、选项卡tabs的支持

支持了tabs增强语法,在obsidian对应的插件是obsidian-code-tab,为了语法上的统一,这里本人将其源码进行了小小的修改,其原本的语法是tab,修改为tabs,然后本插件就会在编译时将对应的语法转换为vuepress中的语法,需要注意的是,若在tabs中嵌套其他的容器(例如代码块这种包括反引号的块级内容),此时tabs需要使用四个反引号,平时可以直接使用三个反引号

• ob中的效果

• 转换后的效果

六、卡片支持

对于vuepress中的card语法请参考卡片,在obsidian中实现对应语法的插件是obsidian-auto-card-link,此处给出的仓库是本人fork之后做了一些修改的版本,主要是为了兼容vuepress中card的语法,致敬原作者nekoshita/obsidian-auto-card-link

在vuepress中,卡片数据支持 title、desc、logo、link 和 color 属性。

在obsidian中,开启插件后,支持的属性有

  link: string;
  title: string;
  desc?: string;
  host?: string;
  favicon?: string;
  logo?: string;

其中相同部分为两者兼容,其余部分则为各自的属性,只会在一方有效果

开发引入

将本项目clone到本地,移到对应的.vuepress目录下,引用方式改为

// confis.js
import obsidianPlugin from "./vuepress-plugin-obsidian/src/index.ts";
export default defineUserConfig({
  //...
  plugins: [
    obsidianPlugin()
  ],
  //...
})