--- title: 新的文档渲染样式 description: 重新构建了渲染组件,优化了样式. date: 2025-08-10 img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811160513849.png navigation: icon: simple-icons:nuxtdotjs --- # 文档系统新样式 ## 重新对文档的样式进行了优化 - 周日在家闭关重写了十几个渲染组件。 - 纯古法手工敲代码,兼容 Markdown 语法.部分 css 样式由 GPT-5 生成. - 大部分组件对主题进行了响应式处理,会根据主题进行不同的样式渲染 ### 1. 标题：让你的内容层次分明 用 `#` 号来创建标题。标题从 `#` 开始，`#` 的数量表示标题的级别。 :::code-group ::::code-preview{icon="i-lucide-eye" label="预览效果"} :::::example-title # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ::::: :::: ```mdc [标题文本.md] # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ``` ::: ::tip 以上代码将渲染出一组层次分明的标题，使你的内容井井有条。并且可以根据标题进行快速导航! :: ### 2. 流程图与公式渲染： :::code-group :::code-preview{icon="i-lucide-eye" label="预览效果"} ```mermaid graph TD A[Local Coolify 实例] --> B[生产服务器] A --> D[编译服务器] B --> B1[生产环境] D --> B ``` ::: ```mermaid[流程图语句.md] ```mermaid[流程图语句.md] graph TD A[Local Coolify 实例] --> B[生产服务器] A --> D[编译服务器] B --> B1[生产环境] D --> B ``` ``` ::: :::code-group ::code-preview{icon="i-lucide-eye" label="预览效果"} ```mermaid pie title 为什么总是宅在家里？ "喜欢宅" : 45 "天气太热" : 70 "穷" : 500 "没人约" : 95 ``` :: ```mermaid[饼图语句.md] ```mermaid[饼图语句.md] pie title 为什么总是宅在家里？ "喜欢宅" : 45 "天气太热" : 70 "穷" : 500 "没人约" : 95 ``` ``` ::: :::code-group ::code-preview{icon="i-lucide-eye" label="预览效果"} - **单行公式**：用 `$` 包裹公式，如 $E = mc^2$ - **块级公式**：用 `$$` 包裹公式，如： $$ \begin{aligned} d_{i, j} &\leftarrow d_{i, j} + 1 \\ d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\ d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\ d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1 \end{aligned} $$ - 列表内块公式 $$ \chi^2 = \sum \frac{(|O - E| - 0.5)^2}{E} $$ :: ```mermaid[公式语句.md] - **单行公式**：用 `$` 包裹公式，如 $E = mc^2$ - **块级公式**：用 `$$` 包裹公式，如： $$ \begin{aligned} d_{i, j} &\leftarrow d_{i, j} + 1 \\ d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\ d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\ d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1 \end{aligned} $$ - 列表内块公式 $$ \chi^2 = \sum \frac{(|O - E| - 0.5)^2}{E} $$ ``` ::: ### 3. 代码块与代码树：展示你的代码 - **行内代码**：用反引号包裹，如 `code`。 - **代码块**：用三个反引号包裹，并指定语言，如： ```ts[hello.vue] console.log("Hello, Estel Docs!"); ``` - **代码树**：用 `::code-tree` 包裹，并指定默认值，如： ::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] ``` ```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] # Estel Docs 文档系统 Look at the [Estel Docs](https://lijue.net) to learn more. ## 安装 确保安装依赖: ```bash # npm npm install # pnpm pnpm install # yarn yarn install # bun bun install ``` ## 开发服务器 在 `http://localhost:3000` 启动开发服务器: ```bash # npm npm run dev # pnpm pnpm run dev # yarn yarn dev # bun bun run dev ``` ## 生产构建 构建生产应用: ```bash # npm npm run build # pnpm pnpm run build # yarn yarn build # bun bun run build ``` 本地预览生产构建: ```bash # npm npm run preview # pnpm pnpm run preview # yarn yarn preview # bun bun run preview ``` 查看 [部署文档](https://lijue.net/) 了解更多信息. ```` :: ::tip{icon="i-lucide-info"} 代码树可以用来展示简单的项目文件结构.但并不适合过于复杂的项目. :: ### 4. 字体样式：强调你的文字 - **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。 - _斜体_：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。 - ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。 这些简单的标记可以让你的内容更有层次感和重点突出。 ### 5. 列表：整洁有序 - **无序列表**：用 `-`、`*` 或 `+` 加空格开始一行。 - **有序列表**：使用数字加点号（`1.`、`2.`）开始一行。 在列表中嵌套其他内容？只需缩进即可实现嵌套效果。 - 无序列表项 1 1. 嵌套有序列表项 1 2. 嵌套有序列表项 2 - 无序列表项 2 1. 有序列表项 1 2. 有序列表项 2 ### 6. 链接与图片：丰富内容 - **链接**：用方括号和圆括号创建链接 `[显示文本](链接地址)`。 - **图片**：和链接类似，只需在前面加上 `!`，如 `![描述文本](图片链接)`。 [访问 Estel Docs](https://lijue.net) :::code-group ::code-preview{icon="i-lucide-eye" label="预览效果"} ![Estel Docs](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811123147804.png) :: ```md[图片语句.md] ![Estel Docs](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811123147804.png) ``` ::: ### 7. 引用：引用名言或引人深思的句子 使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。 > 这是一个引用 > > > 这是一个嵌套引用 这让你的引用更加富有层次感。 语法高亮让你的代码更易读。 ### 8. 分割线：分割内容 用三个或更多的 `-`、`*` 或 `_` 来创建分割线。 --- 为你的内容添加视觉分隔。 ### 9. 表格：清晰展示数据 Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。 :::code-group ::code-preview{icon="i-lucide-eye" label="预览效果"} | 项目名称 | 演示网址 | 仓库地址 | | ------------------------------------------- | ---------------------- | ------------ | | Estel Docs | [lijue.net](https://lijue.net) | [Github](https://github.com/estel-li/estel-docs) | | Estel Docs | [lijue.net](https://lijue.net) | [GitEE](https://gitee.com/estel-li/estel-docs) | | Estel Docs | [lijue.net](https://lijue.net) | [Gitee(国内)](https://gitee.com/estel-li/estel-docs) | :: ```md[表格语句.md] | 项目名称 | 演示网址 | 仓库地址 | | ------------------------------------------- | ---------------------- | ------------ | | Estel Docs | [lijue.net](https://lijue.net) | [Github](https://github.com/estel-li/estel-docs) | | Estel Docs | [lijue.net](https://lijue.net) | [GitEE](https://gitee.com/estel-li/estel-docs) | | Estel Docs | [lijue.net](https://lijue.net) | [Gitee(国内)](https://gitee.com/estel-li/estel-docs) | ``` ::: 这样的表格让数据展示更为清爽！ ## 结语 - 还有更多的组件等待你发现.