Компоненты
Используя vuepress-plugin-components
, вы можете импортировать и использовать некоторые компоненты в ваших файлах Markdown.
Доступные компоненты:
- ArtPlayer
- AudioPlayer
- Badge
- BiliBili
- CodePen
- FontIcon
- Replit
- SiteInfo
- StackBlitz
- VideoPlayer
- YouTube
По умолчанию <Badge />
и <FontIcon />
включены.
Чтобы включить компоненты, вы должны установить plugin.components.components
с массивом имен компонентов.
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
plugins: {
components: {
// components you want
components: [
"AudioPlayer",
"Badge",
"BiliBili",
"CodePen",
"PDF",
"Replit",
"StackBlitz",
"VideoPlayer",
"YouTube",
],
},
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
components: {
// components you want
components: [
"AudioPlayer",
"Badge",
"BiliBili",
"CodePen",
"PDF",
"Replit",
"StackBlitz",
"VideoPlayer",
"YouTube",
],
},
},
}),
};
ArtPlayer
Видеоплеер:
<ArtPlayer src="https://mse-demo.u2sb.com/caminandes_03_llamigos_720p.mp4" />
Видеоплеер с постером:
<ArtPlayer
src="https://mse-demo.u2sb.com/caminandes_03_llamigos_720p.mp4"
poster="/poster.svg"
/>
Видеоплеер с пользовательскими настройками:
<ArtPlayer
src="https://mse-demo.u2sb.com/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.
AudioPlayer
Аудиоплеер:
<AudioPlayer src="/assets/assets/sample.mp3" />
Аудиоплеер с постером и названием:
<AudioPlayer
src="/assets/assets/sample.mp3"
title="A Sample Audio"
poster="https://theme-hope-assets.vuejs.press/logo.svg"
/>
Доступные свойства смотрите на странице AudioPlayer.
Значок
Компонент значка.
- tip
- warning
- danger
- info
- note
Доступные свойства смотрите на странице Значок.
BiliBili
Встраивайте видео BiliBili в файлы Markdown.
Видео bilibili:
<BiliBili bvid="BV1kt411o7C3" />
Видео bilibili со временем начала и страницей:
<BiliBili bvid="BV1kt411o7C3" ratio="16:9" time="60" page="2" />
Смотрите страницу BiliBili для доступных свойств.
CodePen
Компонент, который позволяет встраивать демо-версию CodePen.
Демонстрация с пользователем и слаг-хешем:
<CodePen
user="kowlor"
slug-hash="ZYYQoy"
title="Solar System animation - Pure CSS"
:default-tab="['css','result']"
:theme="$isDarkmode? 'dark': 'light'"
/>
Демо со ссылкой:
<CodePen
link="https://codepen.io/kowlor/pen/ZYYQoy"
title="Solar System animation - Pure CSS"
:default-tab="['css','result']"
:theme="$isDarkmode? 'dark': 'light'"
/>
Нажмите, чтобы запустить демонстрацию:
<CodePen
link="https://codepen.io/kowlor/pen/ZYYQoy"
title="Envelope w/ Hearts"
status="clicktorun"
:default-tab="['css','result']"
:theme="$isDarkmode? 'dark': 'light'"
/>
Доступные свойства смотрите на странице CodePen.
FontIcon
Компонент, который позволяет отображать иконки шрифтов.
- Иконка «Главная»:
- Большая зеленая иконка «Поделиться»:
- Иконка «Главная»: <FontIcon icon="home" />
- Большая зеленая иконка «Поделиться»: <FontIcon icon="share" color="#3eaf7c" size="32" />
Доступные свойства смотрите на странице FontIcon.
Компонент просмотра PDF.
Средство просмотра PDF по умолчанию:
<PDF url="/assets/sample.pdf" />
Просмотрщик PDF без панели инструментов, Просмотрщик PDF с начальной страницей 2:
<PDF url="/assets/sample.pdf" page="2" no-toolbar />
Доступные свойства смотрите на странице PDF.
Replit
Встроенный ответ:
<Replit user="FuckDoctors" repl="Java-Test" />
Встроенный repl с открытием файла:
<Replit user="FuckDoctors" repl="Java-Test" file="Main.java" />
Ссылка на repl:
<Replit user="FuckDoctors" repl="Java-Test" plain />
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
Встраивайте демонстрацию StackBlitz в файлы разметки.
Проект StackBlitz:
<StackBlitz id="vuepress-theme-hope" />
Проект StackBlitz с пользовательскими настройками:
<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hideDevtools />
Доступные свойства смотрите на странице StackBlitz.
VideoPlayer
Встраивание видео в файлы Markdown.
Видеоплеер:
<VideoPlayer src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm" />
Видеоплеер с треками и постером:
<VideoPlayer
src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
poster="/assets/poster.svg"
:tracks="[
{
default: true,
src: '/assets/subtitles/en.vtt',
kind: 'subtitles',
label: 'English',
srcLang: 'en',
},
{
src: '/assets/subtitles/fr.vtt',
kind: 'subtitles',
label: 'French',
srcLang: 'fr',
},
]"
/>
Смотрите страницу VideoPlayer для доступных свойств.
YouTube
Встраивайте видео с YouTube в файлы разметки.
Видео YouTube:
<YouTube id="0JJPfz5dg20" />
Видео YouTube с пользовательскими настройками:
<YouTube id="0JJPfz5dg20" disable-fullscreen />
Плейлист на YouTube:
<YouTube list-type="playlist" list="PLJNLwTPak6dhCRzVelZIs2-DfBp01NX_1" />
Доступные свойства смотрите на странице YouTube.