初次提交旧的文档与blog
This commit is contained in:
237
docs/1.简单文档/1.index.md
Normal file
237
docs/1.简单文档/1.index.md
Normal file
@@ -0,0 +1,237 @@
|
||||
---
|
||||
title: 入门简介
|
||||
description: Estel Docs 是一个基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
|
||||
navigation:
|
||||
icon: lucide-house
|
||||
---
|
||||
|
||||
## 缘起
|
||||
|
||||
使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
|
||||
于是自己动手，丰衣足食.
|
||||
同时在 Markdown 语法的基础上增加了许多**魔法(自定义组件)**,比如:
|
||||
|
||||
|
||||
::code-group
|
||||
```mdc [index.md]
|
||||
在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
|
||||
::card
|
||||
这里是卡片里的内容
|
||||
::
|
||||
```
|
||||
|
||||
```html [Card.vue]
|
||||
<!-- Card组件: components/content/Card.vue -->
|
||||
<template>
|
||||
<div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::code-preview{icon="i-lucide-eye" label="Preview"}
|
||||
::::example-card
|
||||
这里是卡片里的内容
|
||||
::::
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
:::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}
|
||||
|
||||
::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:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## 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.
|
||||
````
|
||||
|
||||
::
|
||||
:::
|
||||
|
||||
::code-group
|
||||
```md [搜索.md]
|
||||
#### 此组件打开一个模态搜索框,进行搜索
|
||||
::::example-fulltext-content-search
|
||||
::::
|
||||
|
||||
#### 此组件建立一个mini搜索框,进行搜索
|
||||
::::example-fulltext-mini-search
|
||||
::::
|
||||
```
|
||||
|
||||
:::code-preview{label="预览模态组件" icon="i-lucide-eye"}
|
||||
::::example-fulltext-content-search
|
||||
::::
|
||||
:::
|
||||
:::code-preview{label="预览搜索框组件" icon="i-lucide-eye"}
|
||||
::::example-fulltext-mini-search
|
||||
::::
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
|
||||
::tip{icon="lucide-info" color="primary" class="text-black dark:text-white"}
|
||||
阅读更多关于 [`自定义组件`](/docs/简单文档/components/api) 的内容.
|
||||
::
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
- 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
|
||||
- 完美支持 Markdown 和 相关扩展。
|
||||
- 和 Vue 组件高度集成。
|
||||
- 支持搜索,由Content v3 赋能。
|
||||
- 支持多主题,使用Nuxt UI Pro。
|
||||
- 开源且免费。
|
||||
- 支持移动端。
|
||||
|
||||
## 致谢
|
||||
|
||||
- Nuxt Content：为 Vue 开发者简化内容管理。
|
||||
- Nuxt UI Pro ：文档系统 UI 组件。
|
||||
- Docus：获取灵感及一些文档组件源代码。
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user