---
title: 入门简介
description: Estel Docs 是一个基于 Nuxt 4、Nuxt Content v3、Nuxt UI 构建的中文文档与博客系统。
navigation:
  icon: lucide-house
---

# Estel Docs

Estel Docs 是一个以 Markdown 为内容源的中文文档与博客系统。项目使用 Nuxt 4、Vue 3、Nuxt Content v3 和 Nuxt UI，支持文档阅读、博客发布、内容搜索、主题设置、原始 Markdown 查看以及 Nuxt Studio 编辑。

## 内容入口

- **文档**：`content/docs/`，公开访问路径为 `/docs/**`，适合使用指南、组件文档和项目资料。
- **博客**：`content/blog/`，公开访问路径为 `/blog/**`，支持封面图、日期、分类、标签和分页。
- **原始 Markdown**：`/raw/<路径>.md`，在浏览器中查看、复制页面源文档。当前返回的是客户端页面，不是直接返回 Markdown 文本的 HTTP 接口。
- **内容编辑**：`/_studio`，开发环境可用，生产默认关闭。需要启用时，按部署说明配置 OAuth 和运行时会话密钥，并使用 SSR/Docker 部署。

## 已实现能力

### 写作与阅读

- MDC、GitHub Flavored Markdown、Mermaid、MathJax 和 Shiki 代码高亮。
- 28 个公共自定义 MDC 组件，覆盖卡片、标签页、文件树、文章摘要、时间线、检查清单、图库、接口参数、数据表和阅读自测等场景。
- 文档侧边栏、右侧目录、面包屑、上一页/下一页、编辑链接和问题反馈入口。
- 博客日期倒序、分页、分类/标签筛选和文章元信息展示。
- 全站搜索覆盖 docs 与 blog。

### 在文章里使用组件

文档和博客使用同一套组件，直接写在 Markdown 中即可。例如，用 `ArticleSummary` 给一篇较长的操作说明加上阅读提示：

::article-summary{title="读这篇说明之前"}
- 先确认工具版本和运行环境。
- 命令中的地址、文件名需要按自己的环境修改。
- 完成操作后，按文末清单核对结果。
::

```mdc
::article-summary{title="读这篇说明之前"}
- 先确认工具版本和运行环境。
- 命令中的地址、文件名需要按自己的环境修改。
- 完成操作后，按文末清单核对结果。
::
```

其他内容可以按用途选择：

| 要写的内容 | 可用组件 | 说明与示例 |
| --- | --- | --- |
| 摘要、补充说明、引用、更新过程 | `ArticleSummary`、`ExpandBox`、`QuoteBlock`、`DocTimeline` | [文章内容组件](/docs/简单文档/components/content-blocks) |
| 文档入口、数字概览、操作清单、图片 | `LinkCard`、`StatGrid`、`TaskChecklist`、`ImageGallery` | [内容组件演示](/docs/简单文档/components/mdc-showcase) |
| API 和配置项说明 | `ApiEndpoint`、`ParameterTable` | [接口与参数](/docs/简单文档/components/interactive-blocks) |
| 可搜索的数据、图片对比、术语、自测、下载 | `DataTable`、`ImageCompare`、`GlossaryTerm`、`ContentQuiz`、`DownloadCard` | [进阶组件演示](/docs/简单文档/components/interactive-showcase) |

第一次使用，可以从 [在文章中使用组件](/docs/简单文档/writing/mdc-content) 开始，边看效果边复制代码。完整清单见 [常用组件](/docs/简单文档/components/api)，嵌套和插槽写法见 [MDC 语法与注册](/docs/简单文档/components/mdc-guide)。

### 主题、SEO 与分享

- 浅色、深色和跟随系统的颜色模式。
- 字体、字号、主题色、代码主题、代码行号和图片图注等设置，调整后影响页面渲染，并在浏览器中持久化。
- 页面 SEO 元信息、Open Graph 图片、Twitter Card、sitemap、robots.txt、RSS 和 Atom Feed。
- `nuxt-llms` 内容入口，当前主要面向 docs 集合。
- 页面链接复制、查看 Markdown、在 ChatGPT/Claude 中打开，以及可选的微信分享。

### 工程与部署

- 当前生产使用 Nginx 静态托管，微信后台独立运行 Go；Dockerfile 保留用于可选 SSR。
- `pnpm generate` 用于当前生产发布；`pnpm build` 用于 SSR 验证。
- GitHub Actions 检查代码和内容，生成静态文件并通过 Nginx 执行浏览器测试；main 检查成功后经 SSH 增量上传、切换版本，检查失败自动回滚。
- CSP、HSTS、X-Frame-Options、X-Content-Type-Options、Referrer-Policy 和 Permissions-Policy 等安全响应头。
- `wechat-sign-server/` 提供独立的 Go 微信 JS-SDK 签名服务。

## 快速预览

```bash
pnpm install
pnpm dev
```

开发服务器默认地址：`http://localhost:3000`。

继续阅读：

- [安装与开发](/docs/简单文档/installation)
- [Markdown 写作指南](/docs/简单文档/writing/markdown)
- [在文章中使用组件](/docs/简单文档/writing/mdc-content)
- [页面 frontmatter](/docs/简单文档/writing/pages)
- [部署服务](/docs/简单文档/deployment)
- [功能与路线图](/docs/简单文档/功能与路线图)