---
title: 新的文档渲染样式
description: 重新构建了渲染组件,优化了样式.
date: 2025-08-10
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811100000000.png
navigation:
  icon: simple-icons:nuxtdotjs
---

# 文档系统新样式

## 重新对文档的样式进行了优化
- 周日媳妇回娘家，晚上爆肝到12点。重写了十几个组件，将大部分组件重写。
- 纯古法手工敲代码,部分css样式由 GPT-5 生成.
- 大部分组件对主题进行了响应式处理,会根据主题进行不同的样式渲染

### 1. 标题：让你的内容层次分明

用 `#` 号来创建标题。标题从 `#` 开始，`#` 的数量表示标题的级别。

:::code-group
  ```mdc [标题文本.md]
    # 一级标题
    ## 二级标题
    ### 三级标题
    #### 四级标题
    ##### 五级标题
    ###### 六级标题  
  ```

    ::::code-preview{icon="i-lucide-eye" label="预览效果"}
      :::::example-title
      # 一级标题
      ## 二级标题
      ### 三级标题
      #### 四级标题
      ##### 五级标题
      ###### 六级标题
      :::::
    ::::
:::

以上代码将渲染出一组层次分明的标题，使你的内容井井有条。

### 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, Doocs!");
```
- **代码树**：用 `::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]
<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]
# 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)

![Estel Docs](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250811123147804.png)



### 7. 引用：引用名言或引人深思的句子

使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。

> 这是一个引用
>
> > 这是一个嵌套引用

这让你的引用更加富有层次感。

语法高亮让你的代码更易读。

### 8. 分割线：分割内容

用三个或更多的 `-`、`*` 或 `_` 来创建分割线。

---

为你的内容添加视觉分隔。

### 9. 表格：清晰展示数据

Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。

| 项目名称                                   | 演示网址                   | 仓库地址   |
| ------------------------------------------- | ---------------------- | ------------ |
| 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)      |

这样的表格让数据展示更为清爽！


## 结语

- 还有更多的组件等待你发现.
