内置组件

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

可用组件:

• ArtPlayer: 由 ArtPlayer 驱动的视频播放器。
• Badge: 多彩的徽章组件
• BiliBili: 嵌入 BiliBili 视频
• CodePen: 嵌入 CodePen 演示
• PDF: 嵌入 PDF 查看器
• Share: 通过社交媒体分享当前页面
• StackBlitz: 嵌入 StackBlitz 演示
• SiteInfo: 显示站点
• VPBanner: 一个横幅组件
• VPCard: 一个卡片组件
• VidStack: 由 VidStack 驱动的音频/视频播放器
• XiGua: 嵌入 XiGua 视频

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

注

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

.vuepress/config.ts

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

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

杂项

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 页面。

媒体

VidStack

先安装 vidstack@next 。

视频播放器

<VidStack
  src="https://files.vidstack.io/sprite-fight/720p.mp4"
  poster="https://files.vidstack.io/sprite-fight/poster.webp"
/>

有封面、章节、缩略图和字幕的播放器

<VidStack
  title="Agent 327 Operation Barber Shop"
  poster="https://files.vidstack.io/agent-327/poster.png"
  :src="[
    {
      src: 'https://files.vidstack.io/agent-327/720p.mp4',
      type: 'video/mp4',
    },
    {
      src:  'https://files.vidstack.io/agent-327/720p.avi',
      type: 'video/avi',
    },
    {
      src:  'https://files.vidstack.io/agent-327/720p.ogv',
      type: 'video/ogg',
    },
  ]"
  :tracks="[
    {
      src: 'https://files.vidstack.io/agent-327/subs/english.vtt',
      label: 'English',
      language: 'en-US',
      kind: 'subtitles',
      default: true,
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/spanish.vtt',
      label: 'Spanish',
      language: 'es-ES',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/french.vtt',
      label: 'French',
      language: 'fr-FR',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/german.vtt',
      label: 'German',
      language: 'ge-GE',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/italian.vtt',
      label: 'Italian',
      language: 'it-IT',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/russian.vtt',
      label: 'Russian',
      language: 'ru-RU',
      kind: 'subtitles',
    },
    // Chapters
    {
      src: 'https://files.vidstack.io/agent-327/chapters.vtt',
      kind: 'chapters',
      language: 'en-US',
      default: true,
    },
  ]"
  thumbnails="https://files.vidstack.io/agent-327/thumbnails.vtt"
/>

一个流式视频播放器

<VidStack
  src="https://files.vidstack.io/sprite-fight/hls/stream.m3u8"
  :tracks="[
    {
      src: 'https://files.vidstack.io/agent-327/subs/english.vtt',
      label: 'English',
      language: 'en-US',
      kind: 'subtitles',
      default: true,
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/spanish.vtt',
      label: 'Spanish',
      language: 'es-ES',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/french.vtt',
      label: 'French',
      language: 'fr-FR',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/german.vtt',
      label: 'German',
      language: 'ge-GE',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/italian.vtt',
      label: 'Italian',
      language: 'it-IT',
      kind: 'subtitles',
    },
    {
      src: 'https://files.vidstack.io/agent-327/subs/russian.vtt',
      label: 'Russian',
      language: 'ru-RU',
      kind: 'subtitles',
    },
    // Chapters
    {
      src: 'https://files.vidstack.io/agent-327/chapters.vtt',
      kind: 'chapters',
      language: 'en-US',
      default: true,
    },
  ]"
  thumbnails="https://files.vidstack.io/agent-327/thumbnails.vtt"
/>

一个音频播放器

<VidStack src="//theme-hope-assets.vuejs.press/files/sample.mp3" title="VidStack 示例音频" />

YouTube 播放器

<VidStack
  src="youtube/_cMxraX_5RE"
  title="VidStack YouTube Demo"
/>

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

PDF

PDF 浏览器组件。

默认 PDF 阅读器

<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" />

禁用工具栏且初始页面为第二页的阅读器

<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" page="2" no-toolbar />

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

BiliBili

在 Markdown 文件中嵌入 B 站视频。

一个 B 站视频

A BiliBili video

<BiliBili bvid="BV1kt411o7C3" />

一个自定义空降地址的 B 站视频

A BiliBili video

<BiliBili aid="34304064" cid="109293122" ratio="9:16" time="60" page="2" />

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

ArtPlayer

先安装 artplayer 。

一个视频播放器

<ArtPlayer src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />

一个包含了封面的播放器

<ArtPlayer
  src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
  poster="/poster.svg"
/>

一个包含自定义设置的播放器

<ArtPlayer
  src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
  airplay
  aspect-ratio
  auto-size
  auto-orientation
  auto-playback
  fast-forward
  flip
  fullscreen-web
  lock
  loop
  is-live
  muted
  mini-progress-bar
  pip
  screenshot
  subtitle-offset
/>

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

代码相关

CodePen

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

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

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

<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 页面。