VM Docs

Appearance

文档特有组件示例 Alpha ​

🚧警告🚧

本页面所有控件均处于WIP状态，随时可能进行破坏性更改

LinkCard 示例 ​

LargeLinkCard 示例 ​

EmojiTextIcon ​

查看文档规范统一命名、结构和维护方式。Vue 官方网站外部链接示例，会在新窗口打开。
markdown
<LargeLinkCard title="查看文档规范" desc="统一命名、结构和维护方式。" href="/guide/conventions" icon="📘"/>
<LargeLinkCard title="Vue 官方网站" desc="外部链接示例，会在新窗口打开。" href="https://vuejs.org/" icon="🟢" :external="true"/>

ImageIcon ​

VMTU图片图标示例
markdown
<LargeLinkCard title="VMTU" desc="图片图标示例" href="/vmtu/index" iconSrc="/img/example/icon.png" />

IconifyIcon ​

ModrinthIconify图标示例
markdown
<LargeLinkCard title="Modrinth" desc="Iconify图标示例" href="https://modrinth.com/mod/vmupdate" iconify="simple-icons:modrinth" iconifyColor="#60e499" :external="true" />

WithoutDesc ​

Github (VMTUCore)
markdown
<LargeLinkCard title="Github (VMTUCore)" href="https://github.com/VM-Chinese-translate-group/VMTUCore" iconify="simple-icons:github" :external="true"/>

MediumLinkCard 示例 ​

EmojiTextIcon ​

FAQ
VMTU
Vue 官网
markdown
<MediumLinkCard title="FAQ" href="/guide/faq" icon="❓" />
<MediumLinkCard title="VMTU" href="/vmtu/index" icon="🧭" />
<MediumLinkCard title="Vue 官网" href="https://vuejs.org/" icon="🟢" :external="true" />

ImageIcon ​

VMTU
VMTU
markdown
<MediumLinkCard title="VMTU" href="/vmtu/index" iconSrc="/img/example/icon.png" />

IconifyIcon ​

Modrinth
markdown
<MediumLinkCard title="Modrinth" href="https://modrinth.com/mod/vmupdate" iconify="simple-icons:modrinth" iconifyColor="#60e499" :external="true" />

WithDesc ​

GithubVMTUCore
markdown
<MediumLinkCard title="Github" desc="VMTUCore" href="https://github.com/VM-Chinese-translate-group/VMTUCore" iconify="simple-icons:github" :external="true"/>

MiniLinkCard 示例 ​

EmojiTextIcon ​

FAQVMTUVue 官网
markdown
<MiniLinkCard title="FAQ" href="/guide/faq" icon="❓" />
<MiniLinkCard title="VMTU" href="/vmtu/index" icon="🧭" />
<MiniLinkCard title="Vue 官网" href="https://vuejs.org/" icon="🟢" :external="true" />

ImageIcon ​

VMTU
markdown
<MiniLinkCard title="VMTU" href="/vmtu/index" iconSrc="/img/example/icon.png" />

IconifyIcon ​

Modrinth
markdown
<MiniLinkCard title="Modrinth" href="https://modrinth.com/mod/vmupdate" iconify="simple-icons:modrinth" iconifyColor="#60e499" :external="true"/>

FileTree 示例 ​

项目结构
    • index.md
      • getting-started.md
      • conventions.md
      • faq.md
      • config.mts
        • LinkCard.vue
        • MiniLinkCard.vue
        • FileTree.vue
markdown
<FileTree
  title="项目结构"
  :items="[
    {
      name: 'docs',
      children: [
        { name: 'index.md', type: 'file' },
        {
          name: 'guide',
          children: [
            { name: 'getting-started.md', type: 'file' },
            { name: 'conventions.md', type: 'file' },
            { name: 'faq.md', type: 'file' }
          ]
        },
        {
          name: '.vitepress',
          children: [
            { name: 'config.mts', type: 'file' },
            { name: 'theme', type: 'folder' },
            {
              name: 'components',
              children: [
                { name: 'LinkCard.vue', type: 'file' },
                { name: 'MiniLinkCard.vue', type: 'file' },
                { name: 'FileTree.vue', type: 'file' }
              ]
            }
          ]
        }
      ]
    }
  ]"
/>