修改首页目录表格样式

app/components/IndexCard.vue

@@ -1,18 +1,28 @@
 <template>
     <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
         <!-- 响应式卡片网格 -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-8xl mx-auto">
+        <!-- 
+            这个div使用了Tailwind CSS的类来实现响应式的卡片网格布局：
+            - grid：将容器设置为网格布局。
+            - grid-cols-1：在小屏幕下每行显示1列。
+            - sm:grid-cols-2：在中等屏幕（sm及以上）每行显示2列。
+            - lg:grid-cols-3：在大屏幕（lg及以上）每行显示3列。
+            - gap-4：网格项之间有统一的间距。
+            - max-w-8xl：设置最大宽度为8xl，防止内容过宽。
+            - mx-auto：左右自动外边距，使网格居中显示。
+        -->
+        <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full mx-auto">
             <div v-for="item in firstLevelItems" :key="item.path"
                 class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
                 @click="navigateTo(item.path)">
                 
                 <!-- 卡片头部 -->
                 <div class="flex items-center justify-between mb-1">
-                    <h2 class="text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
+                    <h2 class="font-sans text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
                         {{ item.title }}
                     </h2>
                     <span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
-                        <sum class="text-primary mr-0.3">{{ getChildrenCount(item) }}</sum>篇
+                        <span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
                     </span>
                 </div>
 
@@ -26,10 +36,10 @@
                          border-b border-gray-200 dark:border-gray-700 pt-2">
                          
                         <div class="flex items-center flex-1 min-w-0 pl-1 ">
-                            <Icon :name="child.icon || 'i-lucide-file-text'" class="mr-2 text-gray-400" size="14" />
+                            <UIcon :name="(typeof child.icon === 'string' ? child.icon : 'i-lucide-file-text')" class="mr-2 text-gray-400" size="14" />
-                            <span class="text-base font-sans">{{ child.title }}</span>
+                            <span class="text-base font-medium font-sans">{{ child.title }}</span>
                         </div>
-                        <Icon name="i-lucide-chevron-right" class="text-gray-400 flex-shrink-0 ml-2" size="16" />
+                        <UIcon name="i-lucide-chevron-right" class="text-gray-400 flex-shrink-0 ml-2" size="16" />
                     </div>
                 </div>
             </div>

app/components/content/ButtonGroup.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="button-group">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// ButtonGroup 组件用于水平排列多个按钮
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* 确保按钮之间有合适的间距 */
+.button-group > * {
+  flex-shrink: 0;
+}
+</style> 

app/components/content/ButtonLink.vue

@@ -1,9 +1,13 @@
 <template>
   <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
-    <UButton :variant="variant" :size="size">
+    <UButton 
-      <Icon v-if="leftIcon" :name="leftIcon" class="mr-1" />
+      :variant="variant" 
-      <ContentSlot unwrap="p" />
+      :size="size"
-      <Icon v-if="rightIcon" :name="rightIcon" class="ml-1" />
+      class="button-link"
+    >
+      <SmartIcon v-if="leftIcon" :name="leftIcon" class="icon-left" />
+      <slot />
+      <SmartIcon v-if="rightIcon" :name="rightIcon" class="icon-right" />
     </UButton>
   </NuxtLink>
 </template>
@@ -20,3 +24,78 @@ defineProps<{
   blank?: boolean;
 }>();
 </script>
+
+<style scoped>
+.button-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  padding: 0.3rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  transition: all 0.2s ease;
+  text-decoration: none;
+
+}
+
+.button-link:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.button-link:active {
+  transform: translateY(0);
+}
+
+/* 实心按钮样式（蓝色按钮） */
+:deep(.u-button--solid) {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+:deep(.u-button--solid:hover) {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+/* 边框按钮样式（GitHub按钮） */
+:deep(.u-button--outline) {
+  background-color: white;
+  color: #3b82f6;
+  border-color: #3b82f6;
+}
+
+:deep(.u-button--outline:hover) {
+  background-color: #eff6ff;
+  border-color:var(--primary);
+}
+
+/* 图标按钮样式（Ghost图标） */
+:deep(.u-button--ghost) {
+  background-color: transparent;
+  color: #3b82f6;
+  border-color: transparent;
+  padding: 0.5rem;
+}
+
+:deep(.u-button--ghost:hover) {
+  background-color: #eff6ff;
+  color: #2563eb;
+}
+
+.icon-left {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.icon-right {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+</style>

app/components/content/SmartIcon.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- Iconify Icons -->
-  <Icon v-if="isIconName(name)" :name="name" :size="size" />
+  <Icon v-if="checkIcon(name)" :name :size />
   <!-- Emojis -->
   <span
-    v-else-if="isEmoji(name)"
+    v-else-if="/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name)"
     :style="`font-size: ${size}px;`"
   >{{ name }}</span>
   <!-- Link -->
@@ -16,23 +16,17 @@
 </template>
 
 <script setup lang="ts">
+import { stringToIcon, validateIconName } from '@iconify/utils';
+
 const { size = 16 } = defineProps<{
   name: string;
   size?: number;
 }>();
 
-function isIconName(name: string): boolean {
+function checkIcon(name: string): boolean {
   if (name.includes('http'))
     return false;
 
-  // 简单的图标名称检查，以 i- 开头或包含常见图标集
+  return validateIconName(stringToIcon(name));
-  return name.startsWith('i-') || 
-         name.includes('lucide') || 
-         name.includes('heroicons') ||
-         name.includes('simple-icons');
-}
-
-function isEmoji(name: string): boolean {
-  return /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name);
 }
 </script>

content/1.简单文档/1.index.md

@@ -9,6 +9,16 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h
 
 There are already many websites based on this template:
 
+::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+  Get Started
+::
+::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  GitHub
+::
+::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+  Ghost
+::
+
 ::FileTree
 ---
 tree:

content/4.无人自助系统/.navigation.yml

@@ -0,0 +1,3 @@
+title: 无人自助系统
+description: 一个简约但功能强大的开源文档系统
+icon: i-lucide-rocket

content/4.无人自助系统/1.index.md

@@ -0,0 +1,126 @@
+---
+title: 入门指南
+description: 欢迎使用简单文档
+navigation:
+  icon: i-lucide-house
+---
+
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+
+There are already many websites based on this template:
+
+::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+  Get Started
+::
+::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  GitHub
+::
+::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+  Ghost
+::
+
+::FileTree
+---
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^ # This is highlighted
+  - docs:
+    - index.md
+---
+::
+
+::steps{level="4"}
+  #### Start a fresh new project
+  
+  ```bash [Terminal]
+  npx nuxi init -t github:nuxt-ui-pro/docus
+  ```
+  
+  #### Run docus CLI to run your dev server
+  
+  ```bash [Terminal]
+  docus dev
+  ```
+::
+
+
+::card-group
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt
+  to: https://nuxt.com
+  ---
+  The Nuxt website
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt UI
+  to: https://ui.nuxt.com
+  ---
+  The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Image
+  to: https://image.nuxt.com
+  ---
+  The documentation of `@nuxt/image`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Content
+  to: https://content.nuxt.com
+  ---
+  The documentation of `@nuxt/content`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Devtools
+  to: https://devtools.nuxt.com
+  ---
+  The documentation of `@nuxt/devtools`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Hub
+  to: https://hub.nuxt.com
+  ---
+  The best place to manage your projects, environments and variables.
+  :::
+::
+
+## Key Features
+
+This template includes a range of features designed to streamline documentation management:
+
+- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
+- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
+- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
+- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing.
+- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
+- **Full-Text Search**: Includes built-in search functionality for content discovery.
+- **Optimized Typography**: Features refined typography for enhanced readability.
+- **Dark Mode**: Offers dark mode support for user preference.
+- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.

content/4.无人自助系统/2.installation.md

@@ -0,0 +1,29 @@
+---
+title: Installation
+description: Get started with Nuxt UI Pro documentation template.
+navigation:
+  icon: i-lucide-download
+---
+
+::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}
+Use this template on Nuxt Studio and start your documentation in seconds.
+::
+
+## Quick Start
+
+You can start a fresh new project with:
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/docs
+```
+
+or create a new repository from GitHub:
+
+1. Open <https://github.com/nuxt-ui-pro/docs>
+2. Click on `Use this template` button
+3. Enter repository name and click on `Create repository from template` button
+4. Clone your new repository
+5. Install dependencies with your favorite package manager
+6. Start development server
+
+That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀

content/4.无人自助系统/3.usage.md

@@ -0,0 +1,35 @@
+---
+title: 进行测试
+description: Learn how to write and customize your documentation.
+navigation:
+  icon: i-lucide-sliders
+---
+
+
+# 这是一个H1标签
+
+## 这是一个H2标签
+
+### 这是一个H3标签
+
+#### 这是一个H4标签
+
+##### 这是一个H5标签
+
+###### 这是一个H6标签
+
+
+
+
+
+
+
+
+
+::field{name="Field" type="string" defaultValue="'default'" required}
+The _description_ can be set as prop or in the default slot with full **markdown** support.
+::
+
+
+
+

content/5.智慧物业系统/.navigation.yml

@@ -0,0 +1,3 @@
+title: 智慧物业系统
+description: 一个简约但功能强大的开源文档系统
+icon: i-lucide-rocket

content/5.智慧物业系统/1.index.md

@@ -0,0 +1,126 @@
+---
+title: 入门指南
+description: 欢迎使用简单文档
+navigation:
+  icon: i-lucide-house
+---
+
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+
+There are already many websites based on this template:
+
+::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+  Get Started
+::
+::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  GitHub
+::
+::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+  Ghost
+::
+
+::FileTree
+---
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^ # This is highlighted
+  - docs:
+    - index.md
+---
+::
+
+::steps{level="4"}
+  #### Start a fresh new project
+  
+  ```bash [Terminal]
+  npx nuxi init -t github:nuxt-ui-pro/docus
+  ```
+  
+  #### Run docus CLI to run your dev server
+  
+  ```bash [Terminal]
+  docus dev
+  ```
+::
+
+
+::card-group
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt
+  to: https://nuxt.com
+  ---
+  The Nuxt website
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt UI
+  to: https://ui.nuxt.com
+  ---
+  The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Image
+  to: https://image.nuxt.com
+  ---
+  The documentation of `@nuxt/image`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Content
+  to: https://content.nuxt.com
+  ---
+  The documentation of `@nuxt/content`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Devtools
+  to: https://devtools.nuxt.com
+  ---
+  The documentation of `@nuxt/devtools`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Hub
+  to: https://hub.nuxt.com
+  ---
+  The best place to manage your projects, environments and variables.
+  :::
+::
+
+## Key Features
+
+This template includes a range of features designed to streamline documentation management:
+
+- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
+- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
+- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
+- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing.
+- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
+- **Full-Text Search**: Includes built-in search functionality for content discovery.
+- **Optimized Typography**: Features refined typography for enhanced readability.
+- **Dark Mode**: Offers dark mode support for user preference.
+- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.

content/5.智慧物业系统/2.installation.md

@@ -0,0 +1,29 @@
+---
+title: Installation
+description: Get started with Nuxt UI Pro documentation template.
+navigation:
+  icon: i-lucide-download
+---
+
+::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}
+Use this template on Nuxt Studio and start your documentation in seconds.
+::
+
+## Quick Start
+
+You can start a fresh new project with:
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/docs
+```
+
+or create a new repository from GitHub:
+
+1. Open <https://github.com/nuxt-ui-pro/docs>
+2. Click on `Use this template` button
+3. Enter repository name and click on `Create repository from template` button
+4. Clone your new repository
+5. Install dependencies with your favorite package manager
+6. Start development server
+
+That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀

content/5.智慧物业系统/3.usage.md

@@ -0,0 +1,35 @@
+---
+title: 进行测试
+description: Learn how to write and customize your documentation.
+navigation:
+  icon: i-lucide-sliders
+---
+
+
+# 这是一个H1标签
+
+## 这是一个H2标签
+
+### 这是一个H3标签
+
+#### 这是一个H4标签
+
+##### 这是一个H5标签
+
+###### 这是一个H6标签
+
+
+
+
+
+
+
+
+
+::field{name="Field" type="string" defaultValue="'default'" required}
+The _description_ can be set as prop or in the default slot with full **markdown** support.
+::
+
+
+
+

content/6.简约博客/.navigation.yml

@@ -0,0 +1,3 @@
+title: 简约博客
+description: 一个简约但功能强大的开源文档系统
+icon: i-lucide-rocket

content/6.简约博客/1.index.md

@@ -0,0 +1,126 @@
+---
+title: 入门指南
+description: 欢迎使用简单文档
+navigation:
+  icon: i-lucide-house
+---
+
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+
+There are already many websites based on this template:
+
+::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+  Get Started
+::
+::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  GitHub
+::
+::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+  Ghost
+::
+
+::FileTree
+---
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^ # This is highlighted
+  - docs:
+    - index.md
+---
+::
+
+::steps{level="4"}
+  #### Start a fresh new project
+  
+  ```bash [Terminal]
+  npx nuxi init -t github:nuxt-ui-pro/docus
+  ```
+  
+  #### Run docus CLI to run your dev server
+  
+  ```bash [Terminal]
+  docus dev
+  ```
+::
+
+
+::card-group
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt
+  to: https://nuxt.com
+  ---
+  The Nuxt website
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt UI
+  to: https://ui.nuxt.com
+  ---
+  The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Image
+  to: https://image.nuxt.com
+  ---
+  The documentation of `@nuxt/image`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Content
+  to: https://content.nuxt.com
+  ---
+  The documentation of `@nuxt/content`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Devtools
+  to: https://devtools.nuxt.com
+  ---
+  The documentation of `@nuxt/devtools`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Hub
+  to: https://hub.nuxt.com
+  ---
+  The best place to manage your projects, environments and variables.
+  :::
+::
+
+## Key Features
+
+This template includes a range of features designed to streamline documentation management:
+
+- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
+- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
+- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
+- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing.
+- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
+- **Full-Text Search**: Includes built-in search functionality for content discovery.
+- **Optimized Typography**: Features refined typography for enhanced readability.
+- **Dark Mode**: Offers dark mode support for user preference.
+- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.

content/6.简约博客/2.installation.md

@@ -0,0 +1,29 @@
+---
+title: Installation
+description: Get started with Nuxt UI Pro documentation template.
+navigation:
+  icon: i-lucide-download
+---
+
+::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}
+Use this template on Nuxt Studio and start your documentation in seconds.
+::
+
+## Quick Start
+
+You can start a fresh new project with:
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/docs
+```
+
+or create a new repository from GitHub:
+
+1. Open <https://github.com/nuxt-ui-pro/docs>
+2. Click on `Use this template` button
+3. Enter repository name and click on `Create repository from template` button
+4. Clone your new repository
+5. Install dependencies with your favorite package manager
+6. Start development server
+
+That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀

content/6.简约博客/3.usage.md

@@ -0,0 +1,35 @@
+---
+title: 进行测试
+description: Learn how to write and customize your documentation.
+navigation:
+  icon: i-lucide-sliders
+---
+
+
+# 这是一个H1标签
+
+## 这是一个H2标签
+
+### 这是一个H3标签
+
+#### 这是一个H4标签
+
+##### 这是一个H5标签
+
+###### 这是一个H6标签
+
+
+
+
+
+
+
+
+
+::field{name="Field" type="string" defaultValue="'default'" required}
+The _description_ can be set as prop or in the default slot with full **markdown** support.
+::
+
+
+
+

package.json

@@ -15,6 +15,7 @@
     "@iconify-json/lucide": "^1.2.57",
     "@iconify-json/simple-icons": "^1.2.43",
     "@iconify-json/vscode-icons": "^1.2.23",
+    "@iconify/utils": "^2.3.0",
     "@nuxt/content": "^3.6.3",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui-pro": "^3.2.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@iconify-json/vscode-icons':
         specifier: ^1.2.23
         version: 1.2.23
+      '@iconify/utils':
+        specifier: ^2.3.0
+        version: 2.3.0
       '@nuxt/content':
         specifier: ^3.6.3
         version: 3.6.3(better-sqlite3@12.2.0)(magicast@0.3.5)(vue-component-type-helpers@2.2.10)