快速开始

安装#

有两种安装方式。“模板”方式轻量简单，但难以更新；而“Fork”方式便于更新，但需要一些Git操作技巧。

通过模板安装#

1. 安装主题

   在你的用户目录下执行以下命令以安装主题：

   • bun
   • pnpm
   • yarn
   • npm

   bun create astro@latest --template cworld1/astro-theme-pure

   shell

   默认情况下，该命令会使用模板仓库的main分支。若要使用其他分支，可在--template参数中指定分支名：cworld1/astro-theme-pure#<branch>（将<branch>替换为目标分支名）。

2. 回答CLI向导的问题并遵循其指示操作。

3. 完成！

   现在你可以启动Astro开发服务器 ↗，在自定义项目时查看实时预览效果了！

通过Fork安装#

你只需点击主题仓库的Fork按钮 ↗创建自己的项目，然后将Fork后的仓库克隆到本地机器即可。

git clone https://github.com/<你的用户名>/astro-theme-pure.git

之后，你就可以启动Astro开发服务器，在自定义项目时查看实时预览效果了！

启动开发服务器#

进入你的项目目录：

cd ./<你的项目名>

bun dev

pnpm dev

yarn run dev

npm run dev

接下来，请先阅读配置说明，再继续配置主题。

迁移到Astro#

参见Astro：将现有项目迁移到Astro ↗。

主题文件结构#

主题的文件结构如下：

• public：将被复制到根目录的静态资源
• src：
  • assets：静态资源（如图片、字体等）
  • components：主题中使用的组件，也包含用户常用组件（如Card、Collapse、Spoiler等）
  • layouts：网站基础布局组件
  • pages：页面文件（如404、about、blog、docs、index等页面）
  • plugins：主题中使用的扩展插件
  • types：TypeScript类型定义文件
  • utils：工具函数
  • site.config.ts：主题核心配置文件
• astro.config.mjs：Astro框架配置文件
• eslint.config.mjs：ESLint代码检查配置文件
• prettier.config.mjs：Prettier代码格式化配置文件
• uno.config.ts：UnoCSS样式框架配置文件
• tsconfig.json：TypeScript编译配置文件
• package.json：项目包信息（依赖、脚本等）

简单配置#

1. 删除文档文件

   • 删除src/pages/docs目录
   • 删除src/site.config.ts中的文档菜单声明：
   src/site.config.ts

   export const theme: ThemeUserConfig = {
      // ...
      /** 配置网站头部 */
      header: {
         menu: [
            { title: 'Blog', link: '/blog' },
            { title: 'Docs', link: '/docs' }, 
            // ...
         ],
      },
   }

   ts
   • 删除src/content.config.ts中文档相关的内容集合配置：
   src/content.config.ts

   const docs = defineCollection({ 
   loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }), 
   schema: ({ image }) =>
      z.object({ 
         ... // [!code --]（此处省略原有属性）
      }) 
   }) 
   export const collections = { blog, docs } 
   export const collections = { blog } 

   ts

2. 删除packages目录（该目录将通过NPM包自动导入）

3. 修改网站图标（Favicon）

   将public/favicon/*目录下的文件替换为你自己的图标文件。

4. 替换头像图片

   将src/assets/avatar.png文件替换为你自己的头像图片。

5. 配置网站信息

   你可以在src/site.config.ts配置文件中自定义项目信息：

   src/site.config.ts

   export const theme: ThemeUserConfig = {
      author: 'CWorld', // 作者名
      title: 'Astro Theme Pure', // 网站标题
      site: 'https://astro-pure.js.org', // 网站域名
      description: 'Stay hungry, stay foolish', // 网站描述
      // ...（其他配置项）
   }
   
   export const integ: IntegrationUserConfig = { /* ...（集成工具配置） */ }
   // ...

   ts

6. TypeScript语法说明

   配置文件site.config.ts使用TypeScript语法。若你不熟悉TS语法，建议先点击这里 ↗了解相关基础内容。