estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式与简单文档md
Some checks failed
CI / lint (push) Failing after 12m16s
Details
CI / typecheck (push) Failing after 15s
Details
CI / build (ubuntu-latest) (push) Failing after 15s
Details

Browse Source
This commit is contained in:
estel
2025-07-30 16:09:15 +08:00
parent f9a46fa9c6
commit af7c50ecf4
23 changed files with 418 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/FUNDING.yml vendored
View File

@@ -1 +0,0 @@
ko_fi: ztl_uwu

5
.github/ISSUE_TEMPLATE/bug-report.yml vendored
View File

@@ -10,13 +10,12 @@ body:
This form is only for submitting bug reports. If you have a usage question
or are unsure if this is really a bug, make sure to:
- Read the [docs](https://shadcn-docs-nuxt.vercel.app/)
- Ask on [GitHub Discussions](https://github.com/ZTL-UwU/shadcn-docs-nuxt/discussions)
- Read the [docs](https://docs.jiwei.xin/)
- type: textarea
id: bug-env
attributes:
label: Environment
description: Output of `npx envinfo --system --npmPackages vue,@vueuse/core,shadcn-docs-nuxt,reka-ui,nuxt,shadcn-vue,shadcn-nuxt --binaries --browsers`
description: Output of ``
placeholder: Environment
validations:
required: true

4
.github/ISSUE_TEMPLATE/feature-request.yml vendored
View File

@@ -1,5 +1,5 @@
name: 🚀 Feature request
description: Suggest a feature that will improve shadcn-docs-nuxt
description: Suggest a feature that will improve Estel-Docs
labels: [✨ feature]
title: 'feat: '
body:
@@ -7,7 +7,7 @@ body:
id: feature-description
attributes:
label: Describe the feature
description: A clear and concise description of what you think would be a helpful addition to shadcn-docs-nuxt, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
description: A clear and concise description of what you think would be a helpful addition to Estel-Docs, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
placeholder: Feature description
validations:
required: true

10
app/assets/css/main.css
View File

@@ -4,7 +4,7 @@
@source "../../../content/**/*";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--font-sans: 'Roboto', sans-serif;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
@@ -23,17 +23,17 @@
--ui-header-height: --spacing(16);
}
/* 主题字体样式 */
/* 主题字体样式 - 使用Nuxt Font字体 */
.font-sans-serif {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.font-serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-family: 'Merriweather', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.font-monospace {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}
/* 字号样式 - 针对文档页面 */

1
app/components/AppSidebar.vue
View File

@@ -58,6 +58,7 @@
color="primary"
type="single"
variant="pill"
trailingIcon="lucide:chevron-right"
/>
</div>
</div>

4
app/components/content/ETabs.vue
View File

@@ -47,4 +47,8 @@ function getSlotContent(item: TabsItem) {
if (!item.slot) return null
return slotContents.value[item.slot]
}
defineSlots<{
default: () => any
}>()
</script>

2
app/components/content/ProseH2.vue
View File

@@ -1,7 +1,7 @@
<template>
<h2
:id
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10"
class="scroll-m-20 border-b border-gray-200 dark:border-gray-700 pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2"
>
<NuxtLink
v-if="id && generate"

2
app/components/content/ProseH3.vue
View File

@@ -1,7 +1,7 @@
<template>
<h3
:id
class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8"
class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8 mb-3"
>
<NuxtLink
v-if="id && generate"

2
app/components/content/ProseH4.vue
View File

@@ -1,7 +1,7 @@
<template>
<h4
:id
class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6"
class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6 mb-2"
>
<NuxtLink
v-if="id && generate"

23
app/components/content/Stack.vue
View File

@@ -1,23 +1,20 @@
<template>
<UPageCard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4 dark:divide-gray-700 shadow-sm ">
<!--
这是 Stack 组件的外层容器，使用 UPageCard 组件实现。
主要作用是将插槽内容以卡片形式垂直堆叠，每个内容块之间有分割线。
该容器带有圆角、阴影效果，并支持暗色模式下的分割线颜色。
常用于将多个内容分组展示，提升页面的层次感和可读性。
-->
<ECard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4 dark:divide-gray-700 shadow-sm ">
<div
v-for="(slot, i) in slotItems"
v-for="(slot, i) in $slots.default?.() ?? []"
:key="i"
class=""
>
<component :is="slot" />
<component :is="slot" :in-stack="true" />
</div>
</UPageCard>
</ECard>
</template>
<script setup lang="ts">
const slots = useSlots()
// Process slots to create stack items
const slotItems = computed(() => {
const defaultSlots = slots.default?.() || []
return defaultSlots.filter(slot => slot)
})
defineSlots()
</script>

6
app/composables/useTheme.ts
View File

@@ -169,9 +169,9 @@ export function useTheme() {
// 字体设置保持不变
const fontMapping = {
'sans-serif': 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
'serif': 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
'monospace': 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
'sans-serif': 'Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif',
'serif': 'Merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
'monospace': 'JetBrains Mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
}
root.style.setProperty('--font-family', fontMapping[selectedFont.value as keyof typeof fontMapping])

238
content/1.简单文档/1.index.md
View File

@@ -1,229 +1,33 @@
---
title: 入门指南
description: 欢迎使用简单文档
title: 入门简介
description: Estel Docs 是一个基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
navigation:
icon: lucide-house
---
## Motivations 动机
::::code-group
使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
于是自己动手，丰衣足食。
```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```
## Features 特性
```bash [yarn]
yarn add @nuxt/ui-pro@next
```
- 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
- 完美支持 Markdown 和 相关扩展。
- 和 Vue 组件高度集成。
- 支持搜索,由Content v3 赋能。
- 支持多主题,使用Nuxt UI Pro。
- 开源且免费。
- 支持移动端。
```bash [npm]
npm install @nuxt/ui-pro@next
```
## Credits 致谢
```bash [bun]
bun add @nuxt/ui-pro@next
```
::::
- Nuxt Content：为 Vue 开发者简化内容管理。
- shadcn-ui：用于美观的组件和文档设计。
- shadcn-vue: 用于 shadcn-ui 的 vue 版本及部分文档组件源码。
- Docus：获取灵感及一些文档组件源代码。
- Nuxt UI Pro 文档：获取灵感。
## License 许可证
## Usage
::note
You can pass any property from the HTML `<img>` element such as `alt`, `loading`, etc.
::
::stack
::div{class="p-4 space-x-2"}
:icon{name="lucide:box" class="size-6"}
:icon{name="vscode-icons:file-type-js-official" class="size-6"}
:icon{name="vscode-icons:file-type-vue" class="size-6"}
:icon{name="vscode-icons:file-type-nuxt" class="size-6"}
::
```mdc
:icon{name="lucide:box"}
:icon{name="vscode-icons:file-type-js-official"}
:icon{name="vscode-icons:file-type-vue"}
:icon{name="vscode-icons:file-type-nuxt" :size="30"}
```
::
::ETabs
::div{label="PostgreSQL" icon="lucide:database"}
### PostgreSQL column types
```ts
import { integer, pgTable } from 'drizzle-orm/pg-core';
export const table = pgTable('table', {
int: integer('int')
});
```
::
::div{label="MySQL"}
### MySQL column types
```ts
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
const table = mysqlTable('table', {
int: int('int')
});
```
::
::div{label="SQLite"}
### SQLite column types
```ts
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
const table = sqliteTable('table', {
id: integer('id')
});
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer('id', { mode: 'number' });
integer('id', { mode: 'boolean' });
integer('id', { mode: 'timestamp_ms' });
integer('id', { mode: 'timestamp' }); // Date
```
::
::
::ECard
---
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png
icon: simple-icons-tailwindcss
spotlight: true
title: Image Card
description: Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
---
#content
wow
::
::button-link{icon="lucide:arrow-up-right" variant="outline" to="/ target="_blank" size="md"}
Get Started
::
::button-link{trailing-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
GitHub
::
::button-link{icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
Ghost
::
::FileTree
---
title: File Tree
icon: lucide:folder-tree
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: simple-icons-nuxtdotjs
target: _blank
title: Nuxt
to: https://nuxt.com
---
The Nuxt website
:::
:::card
---
icon: simple-icons-nuxtdotjs
target: _blank
title: Nuxt UI
to: https://ui.nuxt.com
---
The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
:::
:::card
---
icon: simple-icons-nuxtdotjs
target: _blank
title: Nuxt Image
to: https://image.nuxt.com
---
The documentation of `@nuxt/image`
:::
:::card
---
icon: simple-icons-nuxtdotjs
target: _blank
title: Nuxt Content
to: https://content.nuxt.com
---
The documentation of `@nuxt/content`
:::
:::card
---
icon: simple-icons-nuxtdotjs
target: _blank
title: Nuxt Devtools
to: https://devtools.nuxt.com
---
The documentation of `@nuxt/devtools`
:::
:::card
---
icon: 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.
MIT

255
content/1.简单文档/2.installation.md
View File

@@ -1,230 +1,61 @@
---
title: Installation
description: Get started with Nuxt UI Pro documentation template.
title: 安装指南
description: 安装 Estel Docs
navigation:
icon: lucide-download
icon: lucide-play
---
::ProseImg{src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png"}
::
::stack
::div{class="p-6 text-3xl font-bold"}
✨ shadcn-docs-nuxt
::
```mdc
---
title: Installation
description: How to install shadcn-docs-nuxt in your app.
icon: lucide:play
---
## Using the starter template
```
## 安装与使用
:read-more{title="Installation" to="/"}
::card
---
title: Components
icon: lucide:box
---
See MDC components provided by **shadcn-docs-nuxt**.
::
::
::field-group
::field{name="withDefault" type="boolean" defaultValue="true"}
A field with a default value.
::
::field{name="requiredField" type="boolean" required}
A required field.
::
::field{name="clear (path?: string)" type="void"}
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
::
::field{name="getErrors (path?: string)" type="FormError[]"}
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
::
::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
Sets form errors for a given path. If no path is provided, overrides all errors.
::
::field{name="errors" type="Ref<FormError[]>"}
A reference to the array containing validation errors. Use this to access or manipulate the error information.
::
::
::code-tree{defaultValue="nuxt.config.ts"}
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"typecheck": "nuxt typecheck"
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "3.0.0-alpha.10",
"nuxt": "^3.15.1"
},
"devDependencies": {
"typescript": "^5.7.2",
"vue-tsc": "^2.2.0"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
:::steps
### 1. 获取项目
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
git clone https://github.com/estle-li/estel_docs.git
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````
::tip
或者，您也可以从 [GitHub 仓库](https://github.com/estle-li/estel_docs) 克隆或下载该模板。
::
### 导航到项目目录
::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
```bash
cd [project-name]
```
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
::::code-group
That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀
```bash [pnpm]
pnpm i && pnpm dev
```
```bash [yarn]
yarn install && yarn dev
```
```bash [npm]
npm install && npm run dev
```
```bash [bun]
bun install && bun dev
```
::::
::tip
做得好！浏览器窗口应会自动打开，访问 http://localhost:3000。
::
### 配置系统
选择主题或根据个人喜好调整其他设置。
:read-more{to="/"}
:::

43
content/1.简单文档/3.usage.md
View File

@@ -1,43 +0,0 @@
---
title: 进行测试
description: Learn how to write and customize your documentation.
navigation:
icon: lucide-sliders
---
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
# 这是一个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.
::

2
content/1.简单文档/3.writing/.navigation.yml Normal file
View File

@@ -0,0 +1,2 @@
title: 开始写作
icon: lucide:edit

83
content/1.简单文档/3.writing/1.markdown.md Normal file
View File

@@ -0,0 +1,83 @@
---
title: Markdown
description: 如何使用MDC语法编写文档。
navigation:
icon: lucide:arrow-big-down
---
::card-group
::card
---
title: MDC语法
to: https://content.nuxt.com/docs/files/markdown#mdc-syntax
target: _blank
icon: lucide:arrow-big-down
---
在**Nuxt Content**文档中阅读详细的MDC使用指南。
::
::card
---
title: 组件
to: /components/prose
icon: lucide:box
---
查看**shadcn-docs-nuxt**提供的MDC组件。
::
::
## VS Code集成
### MDC扩展
[Nuxt MDC](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc)是一个VS Code扩展，为MDC语法提供语法高亮和自动完成功能。
启动VS Code快速打开 :shortcut{value="Ctrl"} + :shortcut{value="P"}，粘贴以下命令，然后按回车。
```bash [shell]
ext install Nuxt.mdc
```
### 启用组件元数据自动完成
::alert
需要 `Nuxt.mdc >= 0.3.1`
::
::steps{:level="4"}
#### VSCode设置
```json [.vscode/settings.json] line-numbers
{
"mdc.enableComponentMetadataCompletions": true // [!code ++]
}
```
#### 安装 `nuxt-component-meta` 模块
将nuxt-component-meta依赖添加到您的项目中：
:pm-install{name="nuxt-component-meta"}
将nuxt-component-meta添加到nuxt.config.ts的modules部分，并可选择配置模块：
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['nuxt-component-meta'],
});
```
一旦您的项目构建完成或在开发服务器上运行，扩展将自动扫描您的项目以获取组件元数据，并根据发现的组件提供建议，无需额外配置。
::
## 技巧
### 从目录中隐藏标题
:badge[0.4.7]{variant="outline"}
将标题的 `id` 设置为 `hide-toc` 将从目录中隐藏该标题。
```mdc
:h2[脚注]{id="hide-toc"}
```

109
content/1.简单文档/3.writing/2.pages.md Normal file
View File

@@ -0,0 +1,109 @@
---
title: 页面
description: Estel Docs 中使用的front matter属性。
navigation:
icon: lucide:file-text
---
```md
---
title: Front Matter
description: Estel Dsoc中使用的front matter属性。
icon: lucide:book-type
navBadges:
- value: New
type: lime
authors:
- name: Tony Zhang
username: ZTL-UwU
avatar: https://www.github.com/ZTL-UwU.png
to: https://github.com/ZTL-UwU
target: _blank
---
```
## 展示
:::tabs{variant="line"}
::stack{label="badges"}
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250730134423381.png)
```yml
badges:
- value: 0.8.10
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
target: _blank
```
::
::stack{label="authors"}
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250730134509935.png)
```yml
authors:
- name: Tony Zhang
username: ZTL-UwU
avatar: https://www.github.com/ZTL-UwU.png
to: https://github.com/ZTL-UwU
target: _blank
```
::
::stack{label="navBadges"}
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250730134549353.png)
```yml
navBadges:
- value: New
type: lime
```
::
:::
## 参数
::field-group
::field{name="title" type="string"}
页面标题。默认为文件名。
::
::field{name="description" type="string"}
页面描述。默认为页面的第一个 `<p>`{lang="html"}。
::
::field{name="navigation" type="boolean" default-value="true"}
定义页面是否包含在侧边栏中。在 `index.md` 中设置为 `false`。
::
::field{name="icon" type="string"}
在侧边栏中为页面显示的图标。
::
::field{name="navBadges" type="[]"}
附加到侧边栏链接末尾的徽章列表。
::
::field{name="navTruncate" type="boolean" default-value="true"}
是否截断侧边栏标题。
::
::field{name="badges" type="[]"}
显示在页面标题底部的徽章列表。
::
::field{name="authors" type="[]"}
显示在页面标题底部的作者列表。
::
::field{name="toc" type="boolean" default-value="true"}
是否为此页面显示目录部分。
::
::field{name="aside" type="boolean" default-value="true"}
是否为此页面显示侧边栏部分。
::
::field{name="editLink" type="boolean" default-value="true"}
是否为此页面显示编辑链接。
::
::field{name="prevNext" type="boolean" default-value="true"}
是否显示上一页和下一页按钮。
::
::field{name="breadcrumb" type="boolean" default-value="true"}
是否显示面包屑导航。
::
::field{name="fullpage" type="boolean" default-value="false"}
是否使用像主页一样的全页面布局。[示例](/简单文档/writing/full-page-example)。
::
::

57
content/1.简单文档/3.writing/3.folders.md Normal file
View File

@@ -0,0 +1,57 @@
---
title: 目录
description: 通过 YML 文件配置目录节点。
navigation:
icon: lucide:folder
---
You can customize folders by creating a `_dir.yml` file in the folder.
::code-group
```yml [_dir.yml]
title: Folder
icon: lucide:folder
navigation.redirect: /frameworks/vue
navBadges:
- value: New
type: lime
sidebar:
style: group
collapse: false
```
```[Directory structure]
content/
1.frameworks/
_dir.yml
1.vue.md
2.nuxt.md
```
::
## Parameters
::field-group
::field{name="title" type="string"}
Title of the page. Defaults to the filename.
::
::field{name="icon" type="string"}
The icon shown in the sidebar for the page.
::
::field{name="navBadges" type="[]"}
A list of badges appended to the end of the sidebar link.
::
::field{name="collapse" type="boolean"}
Whether the folder should be collapsed by default.
::
::field{name="sidebar" type="object"}
::collapsible{title="Details" default-open}
::field{name="style" type="'default' | 'tree' | 'group'" default-value="default"}
The style used for the folder. The default value can be configured in the [appConfig](/api/configuration/shadcn-docs#aside).
| `default` | `tree` | `group` |
| :-------------------------------------------------: | :-------------------------------------------: | :---------------------------------------------: |
| ![sidebar-default](/sidebar-default.png){width=400} | ![sidebar-tree](/sidebar-tree.png){width=400} | ![sidebar-group](/sidebar-group.png){width=400} |
::
::
::
::

9
content/1.简单文档/3.writing/4.full-page-example.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: 单页面示例
description: 全页面示例
fullpage: true
navigation:
icon: lucide:layout-template
---
写作ing...

49
content/1.简单文档/4.deployment.md Normal file
View File

@@ -0,0 +1,49 @@
---
title: 部署服务
description: 部署你的 Estel Docs 应用。
navigation:
icon: lucide:cloud
---
## 静态托管
::steps{:level="4"}
#### 在 `nuxt.config.ts` 或 `.env` 中配置 `site.url`
OG Images 必须使用绝对 URL 提供服务，您需要提供一个站点 URL。
::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({
site: {
url: 'https://example.com',
},
});
```
```dotenv [.env]
NUXT_SITE_URL=https://example.com
```
::
#### 运行生成命令
:pm-run{script="generate"}
::alert{icon="lucide:triangle"}
在 Vercel 上，在**构建和开发设置**中将**构建命令**设置为 `nuxt generate`。
::
#### 部署
您现在可以将 `.output/public` 目录部署到任何静态托管服务，或使用 `npx serve .output/public` 在本地预览。
::
## SSR 服务器
::steps{:level="4"}
#### 运行构建命令
:pm-run{script="build"}
#### 部署
```shell
node .output/server/index.mjs
```
::

2
content/1.简单文档/5.components/.navigation.yml Normal file
View File

@@ -0,0 +1,2 @@
title: 组件特性
icon: lucide:box

7
content/1.简单文档/5.components/1.v1.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Upgrade to v1
description: Changes and upgrade guide for v1.0.
navigation:
icon: lucide:circle-arrow-up
---

7
nuxt.config.ts
View File

@@ -7,13 +7,18 @@ export default defineNuxtConfig({
'@nuxt/ui-pro',
'@nuxt/content',
'nuxt-og-image',
'@nuxt/fonts',
'nuxt-llms'
],
devtools: {
enabled: true
},
fonts: {
defaults: {
weights: ['300 800'],
}
},
css: ['~/assets/css/main.css'],
content: {