内置组件

通过 vuepress-plugin-components，你可以在 Markdown 文件中导入并使用一些组件。

可用组件:

• Badge: 多彩的徽章组件
• CodePen: 嵌入 CodePen 演示
• Share: 通过社交媒体分享当前页面
• StackBlitz: 嵌入 StackBlitz 演示
• SiteInfo: 显示站点
• VPBanner: 一个横幅组件
• VPCard: 一个卡片组件

为了启用组件，你需要将 plugins.components.components 设置为一个组件名的数组。

提示

媒体组件由 @vuepress/plugin-media 提供，它们通过 plugins.media 启用。

注

<Badge /> 是默认可用的，以便与 @vuepress/theme-default 行为一致。

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
plugins
: {
    
components
: {
      // 你想使用的组件
      
components
: [
        "Badge",
        "CodePen",
        "Share",
        "SiteInfo",
        "StackBlitz",
        "VPBanner",
        "VPCard",
      ],
    },
  },
});

杂项

Badge

支持自定义颜色的徽章。

• tip
• warning
• danger
• important
• info
• note

徽章类型

- <Badge text="tip" type="tip" vertical="middle" />
- <Badge text="warning" type="warning" vertical="middle" />
- <Badge text="danger" type="danger" vertical="middle" />
- <Badge text="important" type="important" vertical="middle" />
- <Badge text="info" type="info" vertical="middle" />
- <Badge text="note" type="note" vertical="middle" />

有关可用属性，请参阅 Badge 页面。

SiteInfo

Mr.Hope's Blog

基础站点信息

<SiteInfo name="Mr.Hope's Blog" url="https://mister-hope.com" preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg" />

Mr.Hope's Blog

Where there is light, there is hope

有更多属性的站点信息

<SiteInfo
  name="Mr.Hope's Blog"
  desc="Where there is light, there is hope"
  url="https://mister-hope.com"
  logo="https://mister-hope.com/logo.svg"
  repo="https://github.com/Mister-Hope/Mister-Hope.github.io"
  preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg"
/>

有关可用属性，请参阅 SiteInfo 页面。

Share

基础分享

<Share />

自定义分享服务

<Share services="qq,weibo" />
<Share :services="['qq','weibo']" />

彩色图标

<Share colorful />

有关可用属性，请参阅 Share 页面。

代码相关

CodePen

一个允许你嵌入 CodePen 演示的组件。

See Solar System animation - Pure CSS by kowlor on CodePen.

一个使用用户和 Slug Hash 的案例

<CodePen
  user="kowlor"
  slug-hash="ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See Solar System animation - Pure CSS by kowlor on CodePen.

一个使用链接的案例

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See Envelope w/ Hearts by kowlor on CodePen.

一个点击运行的案例

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Envelope w/ Hearts"
  status="clicktorun"
  :theme="$isDarkMode? 'dark': 'light'"
/>

有关可用属性，请参阅 CodePen 页面。

StackBlitz

在 Markdown 文件中嵌入 StackBlitz 演示。

一个 StackBlitz 项目

<StackBlitz id="vuepress-theme-hope" />

一个自定义设置的 StackBlitz 项目

<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hideDevtools />

有关可用属性，请参阅 StackBlitz 页面。