快速开始

安装#

有两种安装方式。“模板”方式轻量且简单，但难以更新；而“Fork”方式易于更新，但需要一定的 Git 技能。

使用模板安装#

1. 安装主题

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

   • bun
   • pnpm
   • yarn
   • npm

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

   shell

   默认情况下，此命令将使用模板仓库的 main 分支。要使用其他分支名称，请将其作为 --template 参数的一部分传递：cworld1/astro-theme-pure#<branch>。

2. 回答问题并按照 CLI 向导的说明进行操作。

3. 大功告成！

   您现在可以 启动 Astro 开发服务器 ↗ 并查看项目的实时预览，同时将其打造为您自己的风格！

使用 Fork 安装#

您只需 点击主题仓库中的 fork 按钮 ↗ 来创建您的项目；然后将 fork 后的仓库克隆到您的本地机器。

git clone https://github.com/<your-username>/astro-theme-pure.git

然后，您可以启动 Astro 开发服务器并查看项目的实时预览！

启动开发服务器#

进入您的项目目录：

cd ./<your-project>

bun dev

pnpm dev

yarn run dev

npm run dev

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

迁移到 Astro#

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

主题文件结构#

主题文件结构如下：

• public: 静态资源，将直接复制到根目录
• src:
  • assets: 静态资源（经过 Astro 处理）
  • components: 主题中使用的组件，也包括用户组件，如 Card, Collapse, Spoiler 等。
  • layouts: 网站基础布局
  • pages: 页面，如 404, about, blog, docs, index 等。
  • plugins: 主题中使用的扩展插件
  • types: Typescript 类型定义
  • utils: 工具函数
  • site.config.ts: 主题配置文件
• astro.config.ts: 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 = {
      // ...
      /** Configure the header of your site. */
      header: {
         menu: [
            { title: 'Blog', link: '/blog' },
            { title: 'Docs', link: '/docs' }, 
            // ...
         ],
      },
   }

   ts
   • 移除 src/content.config.ts 中 docs 的内容集合 (Content Collection)：
   src/content.config.ts

   const docs = defineCollection({ 
   loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }), 
   schema: ({ image }) =>
      z.object({ 
         ...
      }) 
   }) 
   export const collections = { blog, docs } 
   export const collections = { blog } 

   ts

2. 移除 packages 目录 (这将通过我们的 NPM 包导入)。

   并记得更改 package.json 中的 workspaces 字段：

   package.json

   {
     "name": "astro-theme-pure",
     "workspaces": [ 
       "packages/*"
     ], 
     // ...
   }

   json

3. 更改网站 favicon。

   将 public/favicon/* 文件替换为您自己的 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 语法，请先阅读 此处 ↗ 的相关内容。