自定义主题

你需要了解的事#

本主题设计为“NPM包”形式，原因如下：

1. 包中编写的代码可能会频繁变更。如果用户随意修改，会显著增加后续更新和合并的成本（代码会出现各种冲突）
2. 便于回滚和在不同版本间切换，保障用户使用稳定性
3. 降低系统耦合度，提高复用能力
4. NPM包模式可作为“Astro插件”使用，在构建阶段附加增强用户体验的额外操作
5. 支持一些内置命令，如new、check、info等
6. 可作为其他Astro项目的组件库使用（是的，本项目可拆分为UI组件库）：包详情 ↗。

在进行自定义之前，你应该先查看site.config.ts，确认是否有满足你需求的选项。

Swizzling#

本主题采用了一种名为“Swizzling”的优雅方式，其设计灵感来自Docusaurus ↗。

1. 使用IDE快速查看某个组件对应的源代码（在VSCode中，按住Ctrl点击组件即可）。
2. 复制到src/components/<你喜欢的目录>。
3. 修改后，将相应的引用改为你自己的文件路径。

下面以自定义Footer组件为例：

1. 在项目代码中搜索Footer：

   src/layout/BaseLayout.astro

   ---
   import { Footer, Header, ThemeProvider } from 'astro-pure/components/basic'
   import type { SiteMeta } from 'astro-pure/types'
   // ...
   ---

   astro

2. 在主题源代码中找到它：

   node_modules/astro-theme-pure/components/basic/index.ts

   export { default as Footer } from './Footer.astro'
   export { default as Header } from './Header.astro'
   export { default as ThemeProvider } from './ThemeProvider.astro'

   ts

   这样你就能在node_modules/astro-theme-pure/components/basic/Footer.astro找到Footer组件的源代码了。

3. 将Footer.astro文件复制到你的项目中：

   cp node_modules/astro-theme-pure/components/basic/Footer.astro src/components/custom/Footer.astro

   bash

4. 解决子依赖问题：

   src/components/custom/Footer.astro

   ---
   import config from 'virtual:config'
   
   import { Icon } from '../user'
   import { Icon } from 'astro-pure/user'
   // ...
   ---

   astro

5. 在BaseLayout.astro中修改引用：

   src/layout/BaseLayout.astro

    ---
    import { Footer, Header, ThemeProvider } from 'astro-pure/components/basic'
    import { Header, ThemeProvider } from 'astro-pure/components/basic'
    import { Footer } from '@/components/custom/Footer.astro'
    // ...
    ---

   astro

这样你就完成了组件的“本地化”。

包模式#

如果你想进行一些突破性的修改或只是做测试，这种方法可能更符合“所见即所得”的原则。

1. 确保你有主题的原始代码（./packages/pure）。如果已删除，可以从发布页 ↗下载。
2. 使用包管理器将其链接到你的项目。
3. 然后就可以像修改自己代码的一部分一样修改主题代码了！