Jerry's Blog

Back

快速开始

开始使用 Astro Theme Pure

安装#

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

使用模板安装#

  1. 安装主题

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

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

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

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

  3. 搞定！

    你现在可以 启动 Astro 开发服务器 ↗ 并看到项目的实时预览，同时开始个性化你的项目！

使用 Fork 安装#

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

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

然后，你就可以启动 Astro 开发服务器并看到项目的实时预览，同时开始个性化你的项目！

启动开发服务器#

进入你的项目目录：

cd ./<你的项目>
shell
bun dev
shell

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

迁移到 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.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 = {
   // ...
   /** 配置你网站的头部。 */
   header: {
      menu: [
         { title: '博客', link: '/blog' },
         { title: '文档', 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({ 
         ...
      }) 
}) 
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。

    用你自己的 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: '保持饥饿，保持愚蠢',
   // ...
}

export const integ: IntegrationUserConfig = { /* ... */ }
// ...
    ts

  6. TypeScript 语法

    配置文件 site.config.ts 使用 TypeScript 语法。如果你不熟悉 TS 语法，请先阅读 这里 ↗。