feat(content): add block-course

components/content/block-course.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+interface Opener {
+	course: Array<{
+		title: string
+		cover: string
+		href: string
+		desc: string
+	}>
+}
+
+const { data } = useAsyncData(`/config/course`, () => {
+	return queryContent<Opener>('/config')
+		.only('course')
+		.findOne()
+})
+</script>
+
+<template>
+	<div
+		class="grid gap-5 grid-cols-1"
+		lg="grid-cols-4"
+		md="grid-cols-3"
+		sm="grid-cols-2">
+		<NuxtLink
+			v-for="v of data?.course"
+			:key="v.href"
+			:to="v.href"
+			target="__blank">
+			<article
+				hover="shadow-md"
+				dark="shadow-gray-900"
+				dark:hover="shadow-gray-500/50"
+				class="overflow-hidden rounded-lg cursor-pointer shadow transition-shadow">
+				<img
+					:alt="v.title"
+					:src="v.cover"
+					class="h-40 w-full object-cover" />
+
+				<div class="bg-white p-2 sm:p-6" dark="bg-dark!">
+					<h3
+						class="mt-0.5 text-lg text-gray-900"
+						dark="text-white">
+						{{ v.title }}
+					</h3>
+
+					<p
+						class="mt-2 text-sm leading-relaxed text-gray-500 line-clamp-3 dark:text-gray-400">
+						{{ v.desc }}
+					</p>
+				</div>
+			</article>
+		</NuxtLink>
+	</div>
+</template>

components/content/block-open.vue

@@ -41,11 +41,9 @@ function filterIcons(icons?: string[]) {
 
 <template>
 	<div
-		class="grid grid-rows-12 grid-flow-col gap-10"
-		xs="grid-rows-8"
-		sm="grid-rows-6"
-		md="grid-rows-6"
-		lg="grid-rows-4">
+		class="grid gap-5 grid-cols-1"
+		lg="grid-cols-3"
+		md="grid-cols-2">
 		<NuxtLink
 			v-for="v of data?.open"
 			:key="v.href"

content/1.course.md

@@ -4,7 +4,7 @@ layout: page
 icon: logos:inferno
 ---
 
-<br />
+:space
 
 ::card-grid
 #title

content/2.ecosystem.md

@@ -14,13 +14,14 @@ icon: logos:ionic-icon
    - [网易云课堂](https://study.163.com/provider/480000001892585/index.htm?share=2&shareId=480000001892585)
 ::
 
-<br />
-<br />
+:space
+
+## 实战课程
 
-<!-- ## 实战课程 -->
+:block-course
 
-<!-- <br />
-<br /> -->
+
+:space
 
 ## 开源仓库
 

content/config.json

@@ -1,4 +1,90 @@
 {
+	"course": [
+		{
+			"title": "Nuxt3+Vue3实战在线教育",
+			"cover": "/course/1.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1212899803&_trace_c_p_k2_=a4cce3c7536b40b583f35f6602260186",
+			"desc": "基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用，其中包括Nuxt3的使用，Vue3全新的 <script setup> 语法，windicss，使用NaiveUI库、课程包括：图文，音频，视频，电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块，微信扫码支付以及性能优化和部署服务器上线等知识等。"
+		},
+		{
+			"title": "Vue3实战商城后台管理系统",
+			"cover": "/course/2.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1212775807&_trace_c_p_k2_=7e5b2c5cd6774267ab68560a63e970b3",
+			"desc": "基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，其中包括Vite的使用，Vue3全新的 <script setup> 语法，vuex4、Vue-router4、使用ElementPlus 库、多权限管理、商品多规格实现、订单发货、导出订单、图库模块、分销模块、分享海报以及部署服务器上线知识等。"
+		},
+		{
+			"title": "uniCloud社区交友入门实战",
+			"cover": "/course/3.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1211988801&_trace_c_p_k2_=83a00ee1e73743ab89f457460d898b93",
+			"desc": "以uniCloud社区交友安卓app和H5开发实战为大家系统的讲解uniCloud，讲解包括但不限于DBschema，clientDB，uni-id等插件，云函数等等"
+		},
+		{
+			"title": "uni-app实战在线教育",
+			"cover": "/course/4.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1211586802&_trace_c_p_k2_=53707aa9af7140b1a152a16c602d22c8",
+			"desc": "基于uni-app实战开发在线教育类app和小程序，课程包括：图文，音频，视频，电子书、会员、直播、问答、考试、拼团秒杀、优惠券。一次开发，同时搞定Android、iOS、微信小程序、H5端。"
+		},
+		{
+			"title": "VueCli 实战在线教育后台系统",
+			"cover": "/course/5.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1210894808&_trace_c_p_k2_=0730fac5644b447dab0d7d7411e87497",
+			"desc": "基于vue-element-admin实战开发在线教育后台系统，课程包括：图文，音频，视频，电子书、会员、直播、问答、题库、拼团秒杀、优惠券、可视化拖拽管理多端（PC端 + 移动端）。课程涉及vue + vuex + vue-router + vue-cli + axios + element-ui + Mock.js等内容"
+		},
+		{
+			"title": "uni-app实战直播",
+			"cover": "/course/6.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1210217810&_trace_c_p_k2_=dcd263f929384f9eb516ffdf29807b0e",
+			"desc": "uni-app + egg.js 实战直播app、小程序全栈开发，课程涉及：node.js直播服务器搭建，socket.io实时送礼物、实时弹幕功能等。一次开发，同时搞定Android、iOS、小程序端。"
+		},
+		{
+			"title": "uni-app实战仿微信",
+			"cover": "/course/7.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209487898&_trace_c_p_k2_=c742c4b0ab8a44afbde67b29496d8b72",
+			"desc": "uni-app + egg.js 实战仿微信app和小程序全栈开发，开启纯nvue原生渲染，大大提高性能。一次开发，同时搞定Android、iOS和小程序端等"
+		},
+		{
+			"title": "VueCli 实战商城后台管理系统",
+			"cover": "/course/8.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209431911&_trace_c_p_k2_=c2f07ff267f14dd6ae51ef12d86cdf6e",
+			"desc": "基于Vuecli + elementUI实战开发商城后台管理系统完整视频教程，其中包括vuex模块化管理、Vue-router二次封装、使用element-ui库、支付模块、多权限管理、商品多规格实现、对象存储、以及部署服务器上线等知识等。"
+		},
+		{
+			"title": "uni-app实战视频点播",
+			"cover": "/course/9.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209644880&_trace_c_p_k2_=a7a0fbab4d6c428ab77024ae6f9f4b00",
+			"desc": "uni-app + egg.js 实战视频点播类app、小程序和H5全栈开发，另外还会结合subNVue实现自定义播放器组件，vuex管理项目状态，腾讯云点播 VOD转码处理和分发加速等。一次开发，同时搞定Android、iOS、小程序和H5端等"
+		},
+		{
+			"title": "uni-app多端企业网盘",
+			"cover": "/course/10.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209649875&_trace_c_p_k2_=e5aac5a0ced64940825793e4e9af3ee4",
+			"desc": "uni-app + egg.js实战多端企业网盘全栈开发，另外还会结合vuecli + iview + bootstrap4实现PC端企业网盘，vuex管理项目状态，OSS对象存储分发加速等。本项目会兼容Android、iOS、小程序、H5端和PC端等"
+		},
+		{
+			"title": "uni-app实战社区交友",
+			"cover": "/course/11.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209188809&_trace_c_p_k2_=4f1d590774804f9786b8ae4455b27489",
+			"desc": "uni-app实战项目第一季度，实战开发社区交友类app，其中会包括发布到安卓端app，iOS端app、微信小程序和支付宝小程序。"
+		},
+		{
+			"title": "uni-app实战商城",
+			"cover": "/course/12.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209401825&_trace_c_p_k2_=e3b3238fc7064d93904686ec7e4e2b0b",
+			"desc": "uni-app实战项目第2季度，将实战商城类app和小程序，其中会包括发布到安卓端app，iOS端app、微信小程序，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等"
+		},
+		{
+			"title": "uni-app实战音频小说",
+			"cover": "/course/13.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1209670803&_trace_c_p_k2_=8984f716cb8544c7be76814c7c7b4417",
+			"desc": "uni-app 实战音频与小说阅读器app、小程序和H5开发，另外还会结合vuex管理项目状态。一次开发，同时搞定Android、小程序和H5端等"
+		},
+		{
+			"title": "vue3+antd+koa实战博客",
+			"cover": "/course/14.png",
+			"href": "https://study.163.com/course/introduction.htm?courseId=1211208805&_trace_c_p_k2_=33db04c7038a4d1b9a7a6c6134c8a45f",
+			"desc": "vuecli4下创建的vue3 + antd + koa2博客项目的开发，composition-api，同时会讲解该开发过程中的实践优化与注意点"
+		}
+	],
 	"open": [
 		{
 			"title": "tov-template",

content/nuxt3/1.start/1.introduce.md

@@ -5,8 +5,7 @@
 
 开源的高性能混合型 [Vue](https://staging-cn.vuejs.org/) 框架。  
 
-<br />
-<br />
+:space
 
 ## Featues
 

content/nuxt3/1.start/2.install.md

@@ -50,8 +50,7 @@ npm run build
 npm run start
 ```
 
-<br />
-<br />
+:space
 
 ## 类型声明
 
@@ -77,8 +76,7 @@ export default defineNuxtConfig({
 })
 ```
 
-<br />
-<br />
+:space
 
 ## 插件推荐
 

content/nuxt3/2.features/auto-imports.md

@@ -22,7 +22,7 @@ console.log(useFoo)
 </script>
 ```
 
-<br />
+:space
 
 ### 嵌套
 
@@ -42,7 +42,7 @@ console.log(useDark)
 </script>
 ```
 
-<br />
+:space
 
 ### 内置
 
@@ -56,8 +56,7 @@ const counter = ref(1)
 ```
 
 
-<br />
-<br />
+:space
 
 
 ## 组件
@@ -91,7 +90,7 @@ const counter = ref(1)
 </template>
 ```
 
-<br />
+:space
 
 ### 嵌套
 

content/nuxt3/2.features/data-fetch.md

@@ -52,7 +52,7 @@ const { data, error } = await useFetch('http://...') // 你的请求地址
 
 `useFetch` 会在内部自动使用 `$fetch` 作为请求方法，所以没有 `useAsyncData` 灵活。
 
-<br />
+:space
 
 ### lazy
 
@@ -95,8 +95,7 @@ const { data } = await useLazyFetch('http://localhost:4000')
 </template>
 ```
 
-<br />
-<br />
+:space
 
 
 ## 注意

content/nuxt3/2.features/file-routes.md

@@ -37,8 +37,7 @@
 ```
 
 
-<br />
-<br />
+:space
 
 ## 嵌套
 
@@ -62,8 +61,7 @@
 </template>
 ```
 
-<br />
-<br />
+:space
 
 ## 动态
 
@@ -95,8 +93,7 @@
 </template>
 ```
 
-<br />
-<br />
+:space
 
 ## 导航
 
@@ -120,8 +117,7 @@
 </template>
 ```
 
-<br />
-<br />
+:space
 
 ## 元信息
 

content/nuxt3/2.features/layout-system.md

@@ -33,8 +33,7 @@ sidebarDepth: 1
 </template>
 ```
 
-<br />
-<br />
+:space
 
 
 ## 全局
@@ -76,7 +75,7 @@ sidebarDepth: 1
 <template> about </template>
 ```
 
-<br />
+:space
 
 ### 注意事项
 

content/nuxt3/2.features/shared-state.md

@@ -45,8 +45,7 @@ export const useCounter = () => useState('counter', () => 100)
 
 你会发现两个页面的状态是共享的 👍
 
-<br />
-<br />
+:space
 
 
 ## 注意

content/vite/1.plugins/2.use-modules.md

@@ -4,8 +4,7 @@
 
 模块自动加载插件 `npm` 包已实现，具体可见该仓库 👉 [vite-plugin-use-modules](https://github.com/dishait/vite-plugin-use-modules)。
 
-<br />
-<br />
+:space
 
 ## 原理
 
@@ -25,8 +24,7 @@ console.log(modules) // 将以对象的方式输出到前端控制台
 
 ![Glob 导入](/img/globEager.gif)
 
-<br />
-<br />
+:space
 
 ### 自动注册
 
@@ -128,8 +126,7 @@ export const useCounterStore = defineStore('counter', {
 
 ![自动注册](/img/autoUse.gif)
 
-<br />
-<br />
+:space
 
 ### [虚拟模块](https://cn.vitejs.dev/guide/api-plugin.html#importing-a-virtual-file)
 
@@ -185,9 +182,7 @@ console.log(msg) // 将在前端控制台输出 100
 
 ![虚拟模块](/img/virtualModule.gif)
 
-<br />
-<br />
-<br />
+:space
 
 ## 实现