feat: add video preview

dishait · Feb 26, 2023 · a2ba8fb · a2ba8fb
1 parent 6befcb1
commit a2ba8fb
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 0 deletions.
diff --git a/components/content/iframe-video.vue b/components/content/iframe-video.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { page = 1 } = defineProps<{
+    aid: string,
+    cid: string,
+    bvid: string,
+    page?: number,
+}>()
+</script>
+
+<template>
+    <iframe
+        :src="`//player.bilibili.com/player.html?aid=${aid}&bvid=${bvid}&cid=${cid}&page=${page}&high_quality=1&danmaku=1`"
+        allowfullscreen="true" width="100%" height="450" scrolling="no" frameborder="0"
+        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups"></iframe>
+</template>
diff --git a/content/nuxt3/1.start/2.install.md b/content/nuxt3/1.start/2.install.md
@@ -1,5 +1,7 @@
 # 安装
 
+:iframe-video{aid=212776610 bvid=BV18a41147YB cid=565548104}
+
 ## 基础
 
 1. 创建 `package.json`，并补充以下信息 👇

diff --git a/content/nuxt3/2.features/auto-imports.md → content/nuxt3/2.features/1.auto-imports.md b/content/nuxt3/2.features/auto-imports.md → content/nuxt3/2.features/1.auto-imports.md
@@ -4,6 +4,8 @@ sidebarDepth: 1
 
 # 自动引入
 
+:iframe-video{aid=595312990 bvid=BV1Hq4y1e7At cid=565576272}
+
 ## API
 
 在 `composables` 目录下模块的同名导出会被自动引入

diff --git a/content/nuxt3/2.features/file-routes.md → content/nuxt3/2.features/2.file-routes.md b/content/nuxt3/2.features/file-routes.md → content/nuxt3/2.features/2.file-routes.md
@@ -1,5 +1,8 @@
 # 文件路由
 
+:iframe-video{aid=510250425 bvid=BV1wu411i7pp cid=565578287}
+
+
 ## 基础
 
 1. 在 `app.vue` 中加入 `NuxtPage`

diff --git a/content/nuxt3/2.features/layout-system.md → content/nuxt3/2.features/3.layout-system.md b/content/nuxt3/2.features/layout-system.md → content/nuxt3/2.features/3.layout-system.md
@@ -5,6 +5,9 @@ sidebarDepth: 1
 # 布局系统
 
 
+:iframe-video{aid=255283868 bvid=BV1iY411J7b3 cid=565582553}
+
+
 ## 基础
 
 1. 在 `layouts` 下创建的布局都可以应用到页面上

diff --git a/content/nuxt3/2.features/shared-state.md → content/nuxt3/2.features/4.shared-state.md b/content/nuxt3/2.features/shared-state.md → content/nuxt3/2.features/4.shared-state.md
@@ -1,5 +1,8 @@
 # 状态共享
 
+:iframe-video{aid=937848939 bvid=BV1TT4y1v7BQ cid=565583657}
+
+
 ## 基础
 
 1. 使用 `useState` 可以定义简单的共享状态

diff --git a/content/nuxt3/2.features/data-fetch.md → content/nuxt3/2.features/5.data-fetch.md b/content/nuxt3/2.features/data-fetch.md → content/nuxt3/2.features/5.data-fetch.md
@@ -4,6 +4,9 @@ sidebarDepth: 1
 
 # 数据获取
 
+:iframe-video{aid=895373074 bvid=BV1hP4y1K7pN cid=565584536}
+
+
 
 ## 基础
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,8 @@ sidebarDepth: 1 @@
     # 自动引入
+    :iframe-video{aid=595312990 bvid=BV1Hq4y1e7At cid=565576272}
     ## API
     在 `composables` 目录下模块的同名导出会被自动引入
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,6 +4,9 @@ sidebarDepth: 1

		# 数据获取

		:iframe-video{aid=895373074 bvid=BV1hP4y1K7pN cid=565584536}



		## 基础

Expand Down