# 介绍

原神地图文档 项目创立于 2021 年六一儿童节，至今已上线 620 天。

初衷是为了支持原神地图及其子项目的文档需求。

# 仓库地址

• GitHub在新窗口中打开（主仓库）
• Gitee在新窗口中打开（GitHub 的镜像仓库，非实时同步）

# 开发配置

开发要求：

• Node.js在新窗口中打开 version 12+
• Yarn v1 classic在新窗口中打开 或者 pnpm在新窗口中打开

克隆代码仓库，并安装依赖：

yarn
# pnpm install

监听源文件修改：

yarn dev
# pnpm dev

打开另一个终端，开始开发项目文档网站：

yarn docs:dev
# pnpm docs:dev

本项目开发使用的一些主要工具：

• TypeScript在新窗口中打开 作为开发语言
• Jest在新窗口中打开 用于单元测试
• ESLint在新窗口中打开 + Prettier在新窗口中打开 用于代码检查和格式化

# 注意事项

# 阅读

本指南假设你已了解关于 Markdown、HTML、Sass、Vue3 的中级知识。如果你还不了解这些那么将阅读本指南作为第一步可能不是最好的主意。

# 已废弃的 HTML 标签

已废弃的 HTML 标签默认不允许在本项目中使用，比如 <center>在新窗口中打开 和 <font>在新窗口中打开 等。

这些标签不会被 Vue 模板编译器识别成原生 HTML 标签。相反，Vue 会尝试将这些标签解析为 Vue 组件，而显然这些组件通常是不存在的。

# 快速上手

/developer/documentation/guide/getting-started.html

# 开发计划

/developer/documentation/roadmap.html

# 常用开发脚本

# yarn build

build 命令会使用 tsc 将 TS 源文件编译为 JS 文件。

# yarn docs:*

docs: 前缀表明，这些命令是针对文档 (documentation) 进行操作的，即 docs 目录。

# yarn docs:build

编译文档来生成文档网站的输出文件。

# yarn docs:dev

在本地启动文档网站开放服务器，支持 docs 目录的热更新。

# yarn docs:serve

在本地启动文档网站服务器。

你需要先运行 yarn docs:build2 来生成文档网站的输出文件，然后再通过该命令来启动文档网站。

# yarn test

test 命令使用 Jest 来运行单元测试。

# yarn commit

commit 命令使用 git-cz 来规范提交

# yarn preview, yarn preview-https

preview 命令使用 vite 来打包后的本地预览, 仅用于开发

preview-https 命令使用 https-localhost 生成 localhost 的 ssl 证书为提供本地做 ssl 预览, 仅用于开发

# 文档

地图的文档主题是由自己驱动的，是由该仓库中的源码构建而来。

所有的 Markdown 源文件都放置在 docs 目录下。我们维护了两种翻译：

• 中文 (zh-CN) 在 / 路径下
• 英语 (en-US) 在 /en/ 路径下
• 日语 (ja-JP) 在 /ja/ 路径下

我们部署了两套站点：

• 在 yuanshen.site在新窗口中打开 部署的 Release 版本。该站点是从最新发布的版本中构建而来，因此用户不会看到未发布的改动。域名为 https://yuanshen.site/docs/在新窗口中打开。
• 在 GitHub Pages在新窗口中打开 部署的 Developer 版本。该站点是从最新的提交中构建而来，因此开发者可以预览最新的改动。域名为 https://jiazengp.github.io/genshinmap-docs。

# 目录

• 用法类
  • VuePress2在新窗口中打开
    • Frontmatter 配置在新窗口中打开
    • 内置组件在新窗口中打开
  • TypeScript在新窗口中打开
  • Jest在新窗口中打开
  • ESlint在新窗口中打开
  • TextLint在新窗口中打开
  • Prettier在新窗口中打开
  • Sass在新窗口中打开
  • ElementPlus在新窗口中打开
  • VueUse在新窗口中打开
  • Markdown在新窗口中打开
    • 将当前页的目录添加到 Markdown 的内容在新窗口中打开
    • Markdown 中引用静态资源在新窗口中打开
    • Markdown 中的链接在新窗口中打开
    • Markdown 中的代码块/导入代码块在新窗口中打开
    • Markdown 中使用 Emoji在新窗口中打开
    • Markdown 中使用 Vue3在新窗口中打开
    • Markdown 中使用 TeX
    • Markdown 中使用 Presentation
    • Markdown 中使用 Mermaid
    • Markdown 中使用 Task list，Footnote，Custom alignment，Custom Containers，Superscript and Subscript，Markup
  • Vue3在新窗口中打开
• 图标
  • ElementPlus在新窗口中打开
  • Iconfont在新窗口中打开
• 原理类
  • VuePress2在新窗口中打开
    • 本文档是如何工作的在新窗口中打开
    • 核心架构在新窗口中打开

# 其他项目