主题初始设置
- 开始之前,先用
npm install或pnpm install安装全部依赖包,然后运行一次初始构建,用npm run build或pnpm build确认整套环境可以正常工作。 - 把 Pagefind 的构建产物(用于站内搜索)复制到开发环境可以访问的位置。具体做法因操作系统而异,这里预置了几条命令来简化这一步。
- Windows 上运行
npm run winsearch - macOS 或 Linux 上运行
npm run osxsearch
- Windows 上运行
- 接下来配置站点的 i18n 方案(单语言或多语言都可以)。运行
npm run docs:config-i18n,按照脚本给出的提示一步步完成配置即可。 - 至此基础配置就完成了,你可以按照自己的需要继续定制整个站点。
代码导览
这里准备了几段代码导览,帮助你快速熟悉整个代码库。要在 VSCode 或其他 IDE 中查看,需要先安装 Code Tour 扩展。
代码结构
绝大部分代码都放在 src/docs 目录下。这样的组织方式便于把整个文件夹直接拷贝到已有项目中,几分钟内就能为项目加上完整的文档功能。
配置选项
站点的整体配置集中在 src/docs/config/ 文件夹中。大多数设置按语言拆分,分别放在各自的语言文件夹里,这样处理翻译时会更方便。
站点设置
src/docs/config/siteSettings.json.ts 文件用于配置站点级别的设置,例如是否启用视图过渡、是否启用动画,以及是否在文档标题旁显示复制链接按钮。
站点数据
src/docs/config/[language]/siteData.json.ts 文件用于配置站点数据,例如站点标题、站点描述、社交链接以及默认图片。
导航数据
顶部导航栏的导航数据在 src/docs/config/[language]/navData.json.ts 文件中配置。
侧边栏布局
文档各个章节的排列顺序在 src/docs/config/[language]/sidebarNavData.json.ts 文件中配置。
Robots
为了让 Google 等爬虫抓取到正确的站点地图,需要编辑 public/robots.txt 文件,把其中的域名换成你自己的网站域名。
更多资源
Astro 通用说明
Astro 会在 src/pages/ 目录中查找 .astro 或 .md 文件,每个页面都会按照文件名映射为一条路由。
src/components/ 本身没有任何特殊之处,只是我们习惯把 Astro/React/Vue/Svelte/Preact 组件放在这里。
图片等静态资源可以放在 public/ 目录中。如果要用 Astro assets 做图片优化,也可以把图片放在 src/assets,这也是常用的做法。
命令
所有命令都在项目根目录下的终端中运行:
| 命令 | 作用 |
|---|---|
npm install | 安装项目依赖 |
npm run dev | 在 localhost:4321 启动本地开发服务器 |
npm run build | 把生产站点构建到 ./dist/ |
npm run preview | 部署前在本地预览构建结果 |
npm run astro ... | 运行 astro add、astro check 等 CLI 命令 |
npm run astro -- --help | 查看 Astro CLI 的使用帮助 |
想了解更多?
可以查阅 官方文档,或者加入 Discord 服务器。