组件
大约 2 分钟
通过使用vuepress-plugin-components
,你可以在你的 Markdown 文件中导入和使用一些组件。
可用组件:
- ArtPlayer
- Badge
- BiliBili
- CodePen
- FontIcon
- Replit
- Share
- StackBlitz
- SiteInfo
- VPBanner
- VPCard
- VidStack
- XiGua
默认情况下,<Badge />
和 <FontIcon />
是启用的。
要启用组件,你应该使用组件名称数组设置 plugin.components.components
。
TS
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
plugins: {
components: {
// 你想使用的组件
components: [
"ArtPlayer",
"Badge",
"BiliBili",
"CodePen",
"PDF",
"Replit",
"Share",
"SiteInfo",
"StackBlitz",
"VPBanner",
"VPCard",
"VidStack",
"XiGua",
],
},
},
}),
});
JS
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
components: {
// 你想使用的组件
components: [
"ArtPlayer",
"Badge",
"BiliBili",
"CodePen",
"PDF",
"Replit",
"Share",
"SiteInfo",
"StackBlitz",
"VPBanner",
"VPCard",
"VidStack",
"XiGua",
],
},
},
}),
};
Badge
支持自定义颜色的徽章。
徽章类型
- tip
- warning
- danger
- 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="info" type="info" vertical="middle" />
- <Badge text="note" type="note" vertical="middle" />
有关可用属性,请参阅 Badge 页面。
BiliBili
在 Markdown 文件中嵌入 B 站视频。
一个自定义空降地址的 B 站视频
<BiliBili aid="34304064" cid="109293122" ratio="9:16" time="60" page="2" />
有关可用属性,请参阅 BiliBili 页面。
CodePen
一个允许你嵌入 CodePen 演示的组件。
一个使用用户和 Slug Hash 的案例
See the Pen 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 the Pen 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 the Pen 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 页面。
FontIcon
允许你显示字体图标的组件。
主页图标:
一个大绿分享图标:
- 主页图标: <FontIcon icon="home" />
- 一个大绿分享图标: <FontIcon icon="share" color="#3eaf7c" size="32" />
有关可用属性,请参阅 FontIcon 页面。
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 页面。
Replit
一个 replit
<Replit user="FuckDoctors" repl="Java-Test" />
一个 replit,并且显示指定的文件
<Replit user="FuckDoctors" repl="Java-Test" file="Main.java" />
一个自动加载的 replit
<Replit user="FuckDoctors" repl="Java-Test" auto-load />
一个 replit 链接
<Replit link="https://replit.com/@FuckDoctors/Java-Test" />
有关可用属性,请参阅 Replit 页面。
Share
基础分享
<Share />
自定义分享服务
<Share services="qq,weibo" />
<Share :services="['qq','weibo']" />
彩色图标
<Share colorful />
有关可用属性,请参阅 Share 页面。
SiteInfo
基础站点信息
<SiteInfo name="Mr.Hope's Blog" url="https://mister-hope.com" preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg" />
有更多属性的站点信息
<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 页面。
StackBlitz
在 Markdown 文件中嵌入 StackBlitz 演示。
一个 StackBlitz 项目
<StackBlitz id="vuepress-theme-hope" />
一个自定义设置的 StackBlitz 项目
<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hideDevtools />
有关可用属性,请参阅 StackBlitz 页面。
VidStack
先安装
vidstack@1
。
视频播放器
<VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
有封面、章节、缩略图和音轨的播放器
<VidStack
src="https://media-files.vidstack.io/720p.mp4"
title="Agent 327 Operation Barber Shop"
poster="https://media-files.vidstack.io/poster-2.png"
:sourses="[
{
src: 'https://media-files.vidstack.io/720p.mp4',
type: 'video/mp4',
},
{
src: 'https://media-files.vidstack.io/720p.avi',
type: 'video/avi',
},
{
src: 'https://media-files.vidstack.io/720p.ogv',
type: 'video/ogg',
},
]"
:tracks="[
{
src: 'https://media-files.vidstack.io/subs/english.vtt',
label: 'English',
language: 'en-US',
kind: 'subtitles',
default: true,
},
{
src: 'https://media-files.vidstack.io/subs/spanish.vtt',
label: 'Spanish',
language: 'es-ES',
kind: 'subtitles',
},
// Chapters
{
src: 'https://media-files.vidstack.io/chapters.vtt',
kind: 'chapters',
language: 'en-US',
default: true,
},
]"
thumbnails="https://media-files.vidstack.io/thumbnails.vtt"
crossorigin
/>
一个音频播放器
<VidStack src="//theme-hope-assets.vuejs.press/files/sample.mp3" title="VidStack 示例音频" />
YouTube 播放器
<VidStack
src="youtube/_cMxraX_5RE"
title="VidStack YouTube Demo"
/>
有关可用属性,请参阅 VidStack 页面。
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 页面。