Astro Theme Pure

About

import { GithubCard } from 'astro-pure/advanced' import { Button, Aside } from 'astro-pure/user'

The astro-theme-pure theme is open source under the Apache 2.0 license. Please abide by this license for any further development.

Contribute Code

A big thank you to everyone who has contributed to the astro-theme-pure. The open-source community is amazing because of you.

All changes for astro-pure package should enable Customize Theme#Package Mode first. PR test will also run in that mode. This requests you test your changes locally using bun run yijiansilian command first.

And for contributing docs, you can simply click the "Edit on GitHub" link at the bottom of each doc page to change the docs content.

Sponsorship

We would like to express our gratitude to all the sponsors.

Open Source References

This theme uses/references/derives content from the following projects:

Framework:

astro
unocss

Content rendering:

Integrations:

Code block: Shiki
Image lightbox: Medium Zoom
Comment: Waline
Search: Pagefind

Others:

Compress: playform/compress
Image compress: sharp

Customize Theme

import { Aside, Spoiler, Steps } from 'astro-pure/user'

You Should Know

This theme is designed to "NPM Package" for the following reasons:

The code written in package may be frequently changed. If users change them at will, it will significantly increase the cost of subsequent updates and merging (various conflicts for code)
Roll back and switch between different versions easily, to maintain user stability
Reduce system coupling & increase reuse ability
The NPM Package mode can be used as a "Astro plugin" to append additional operations that enhance user experience during the build phase
Support some built-in commands like new, check, info, etc.
Use as component library for other Astro projects (yes, this project can be broken down into the UI component library): Package details.

Before you customize it, you should check site.config.ts to make sure there is no option that satisfy your need.

Swizzling

This theme chose an elegant method called 'Swizzling', which is inspired by the design from Docusaurus.

Use an IDE to quickly view the source code corresponding to a certain component (In VSCode, it is to click the component with Ctrl).
Copy to src/components/<your prefer directory>.
After modification, change the corresponding reference to your own file path.

Let's make an example to customize the Footer component:

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

Find it in theme source code:

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

Then you get the Footer component source code at node_modules/astro-theme-pure/components/basic/Footer.astro.

Copy the Footer.astro file to your project:

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

Solve the sub-dependencies problem:

---
import config from 'virtual:config'

import { Icon } from '../user' // [!code --]
import { Icon } from 'astro-pure/user' // [!code ++]
// ...
---

Change the reference in BaseLayout.astro:

 ---
 import { Footer, Header, ThemeProvider } from 'astro-pure/components/basic' // [!code --]
 import { Header, ThemeProvider } from 'astro-pure/components/basic' // [!code ++]
 import { Footer } from '@/components/custom/Footer.astro' // [!code ++]
 // ...
 ---

Then you've done a "localization" of the component.

Package Mode

If you want to make some breaking changes or just make a test, this method may follow "what you see is what you get".

Making sure you have the original theme code (./packages/pure). If yo've deleted it, download it from the Releases.
Link it to your project using your package manager (Example: Bun, NPM, PNPM).
Then change the theme code as it is a part of your code!

常见问题

路径

博客特定路径

将博客路由格式设置为 /blog/:year/:id

参见 4.0.2-beta如何使文章链接中包含年份。

内容

`heroImage` 支持网络图片

应配合 inferSize: true 使用以获取图片尺寸。示例：

heroImage:
  { src: 'https://img.tukuppt.com/ad_preview/00/15/09/5e715a320b68e.jpg!/fw/980', inferSize: true }

构建

Vite 请求被拦截

Blocked request. This host ("xxx")is not allowed.
To allow this host, add "xxx" to `preview.allowedHosts` in vite.config.js.

参见 option server.allowedHosts doesn't take into account "true"。

`BUN_LINK_PKG` 相关问题

参见 BUN_LINK_PKG 环境变量无法设置成功。

构建报错：No "Exports" Main Defined

07:39:23 [ERROR] [@astrojs/vercel] An unhandled error occurred while running the "astro:build:done" hook
No "exports" main defined in /vercel/path0/node_modules/estree-walker/package.json
  Stack trace:
    ...

尝试在不使用现有构建缓存的情况下重新部署您的项目。

详情：oven-sh/bun/issues: error No "exports" main defined in /vercel/path0/node_modules/estree-walker/package.json。

优化您的网站

import { Aside } from 'astro-pure/user'

集成

此主题已集成：

sharp: 图像优化
@playform/compress: HTML、CSS、JS、图像压缩（一段时间内存在问题；请参阅 GitHub Issue #55）

CDN

一些轻量级库正在使用 js 静态链接。您可以配置 CDN 链接来提高您的网站性能。

export const theme: ThemeUserConfig = {
  // ...
  npmCDN: 'https://cdn.jsdelivr.net/npm'
  // 推荐：
  // - https://cdn.jsdelivr.net/npm
  // - https://cdn.smartcis.cn/npm
  // - https://unkpg.com
  // - https://cdn.cbd.int
}

编码

在您的 .astro 文件中使用 "Typescript-like" 语法注释是一个好方法。它可以确保您的注释不会出现在最终的生产 HTML 文件中。

---
// 这里是放置注释的安全位置
import { AstroComponent } from '@/components'
---

<div>
  <!-- 这是一种不好的注释风格，它会出现在生产环境中 -->
  {/* 这是一种更好的注释风格 */}
  <AstroComponent>Hello, Astro!</AstroComponent>
</div>

图片

使用优化组件

使用 <Image /> 组件显示优化的图像：使用内置的 <Image /> Astro 组件来显示以下内容的优化版本：

位于 src/ 文件夹内的本地图像
来自授权来源的配置远程图像

<Image /> 可以转换本地或授权远程图像的尺寸、文件类型和质量，以控制您显示的图像。生成的 <img> 标签包含 alt、loading 和 decoding 属性，并推断图像尺寸以避免累积布局偏移 (CLS)。

您可以使用 loading="lazy" 为图像启用懒加载。

---
// 导入 Image 组件和图像
import { Image } from 'astro:assets'

import myImage from '../assets/my_image.png' // 图像尺寸为 1600x900
---

<!-- `alt` 在 Image 组件上是必需的 -->
<Image src={myImage} alt='我的图像描述' />

<!-- 输出 -->
<img
  src="/_astro/my_image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  class="my-class"
  alt=""
/>

使用此组件，它会将您的图像转换为 WebP 格式。.md 和 .mdx 文件默认启用此功能。

更改图像大小

尽管此主题已集成了一些已知的图像优化插件，但您可能仍需要为首页等关键页面优化图像。

一个简单的方法是使用 TinyPNG 等在线工具手动压缩您的图像。

适配外部图像

如果您使用的是外部图像，除了懒加载标签外，您还可以为其添加 Astro 预优化服务。这将把外部图像更改为本地优化的图像。

export default defineConfig({
  // ...
  image: {
    // ...
    domains: ['<特定站点域名>'] // [!code ++]
  }
})

文件大小分析

安装 npm 包 rollup-plugin-visualizer。然后将以下代码附加到您的 astro.config.ts 中：

export default defineConfig({
  // ...
  vite: {
    plugins: [
      visualizer({
        emitFile: true,
        filename: 'stats.html'
      })
    ]
  }
})

构建您的项目并打开生成的 stats.html 文件来分析您的包大小。完成后，您可以删除上述代码和包以保持项目清洁。

更新主题

import { Aside } from 'astro-pure/user'

破坏性变更

v4.1.2

将 src/pages/terms/list.astro 移动到 src/pages/terms/index.astro。

v4.1.1

将 shiki 自定义转换器移动到 src/plugins/shiki-custom-transformers.ts。
将 shiki 官方转换器移动到 src/plugins/shiki-offical/transformers.ts。
改进了配置文件，添加了新的顺序和注释。这将影响 src/site.config.ts 和 astro.config.ts 两个文件 (09dc44d)。
添加了默认的代码折叠功能 (7281077, 22b8847)
重构了调色板和边框半径样式。如果您使用了 --primary-foreground 这样的颜色，请将其更新为 --card。

v4.1.0

将自定义 CSS 文件 global.css 移动到 src/assets/styles/global.css。
将字体加载器更改为 Astro 内置字体加载器。

v4.0.9

支持缓存链接头像 (Arthals)

v4.0.8

无破坏性变更。

v4.0.7

将 Button 组件的 style 属性更改为 variant 属性。这可以帮助您添加自定义样式而不会产生冲突。您应该将代码修改如下：
```
<Button title='My Button' style='primary' /> // [!code --]
<Button title='My Button' variant='primary' /> // [!code ++]
```

更改了 src/site.config.ts 中的 ExternalLinks 配置。您应该将配置修改如下：

export const theme: ThemeUserConfig = {
  content: {
    externalLinksContent: ' ↗', // [!code --]
    /** External links configuration */ // [!code ++]
    externalLinks: { // [!code ++]
      content: ' ↗', // [!code ++]
      /** Properties for the external links element */ // [!code ++]
      properties: { // [!code ++]
        style: 'user-select:none' // [!code ++]
      } // [!code ++]
    }, // [!code ++]
    /** Blog page size for pagination (optional) */
    blogPageSize: 8,
    externalLinkArrow: true // show external link arrow // [!code --]
  }
}

将 Waline 文件移出了包！查看 Commit 5119694 了解如何更改您现有的页面和布局。不要忘记将 src/components/waline 目录下的文件复制到您的项目中。

v4.0.6

将项目卡片变量名从 project 更改为 projects。

v4.0.5

将 UnoCSS 预设从 Wind3 更改为 Mini。移除了一些功能，如 gradient、animation、container 等。

v4.0.3

将页脚注册配置更改为 links。这将为您提供更大的灵活性，可以添加更多链接或其他信息：

export const theme: ThemeUserConfig = {
  footer: {
    links: [ // [!code highlight:12]
      {
        title: 'Moe ICP 114514',
        link: 'https://icp.gov.moe/?keyword=114514',
        style: 'text-sm' // Uno/TW CSS class
      },
      {
        title: 'Site Policy',
        link: '/terms/list',
        pos: 2 // position set to 2 will be appended to copyright line
      }
    ]
  }
}

v4.0.2-beta

考虑将工具图标移动到新路径，如 src/assets/tools/；这可以帮助用户了解哪些图标与工具有关。

将链接的 applyTip 更改为自定义数组样式：

export const integ: IntegrationUserConfig = {
  links: {
    applyTip: [
      { name: 'Name', val: theme.title }, // [!code highlight:4]
      { name: 'Desc', val: theme.description || 'Null' },
      { name: 'Link', val: 'https://astro-pure.js.org/' },
      { name: 'Avatar', val: 'https://astro-pure.js.org/favicon/favicon.ico' }
      // You can also add more fields
    ]
  }
}

添加了环境变量 BUN_LINK_PKG。将其设置为 true 会自动引用 packages/pure 路径中的 astro-pure 包，而不是 node_modules/astro-pure。这可以帮助用户开发主题或自行修改代码（不建议用于生产环境）。
将 CSS 框架更改为 UnoCSS。这将影响 unocss.config.ts 和排版类名设置。

v4.0.1-beta

将 SVG 交付导入更改为自定义导入 SVG 元素。这将影响 ToolSelection 组件的使用。您应该进行如下更改：

（可选）将图标移动到新路径，如 src/assets/icons/

然后更改使用代码（默认为 src/pages/about/index.astro）

<ToolSection
  tools={[
    {
      name: 'Arch Linux',
      description: 'Linux Distribution',
      href: 'https://archlinux.org/',
      iconPath: 'archlinux' // [!code --]
      icon: import('@/assets/icons/archlinux.svg?raw') // [!code ++]
    }
  ]},
/>

此更改导入了一个新组件 Svg。有关用法，请参阅用户组件 #Svg 加载器。

v4.0.0-alpha

将所有可重用的组件、类型和工具函数移动到新的 npm 包 astro-pure 中。受影响的组件包括在其中。导入方法也已更改：
```
import { Button } from '@/components/user' // [!code --]
import { Button } from 'astro-pure/user' // [!code ++]
```

新格式的配置文件 src/site.config.ts。将有 zod 模式来验证配置文件，配置的使用方式也将更改为：

import { siteConfig } from '@/site-config' // [!code --]
import config from '@/site-config' // [!code ++]
// Or if you want to use the config that is after processed or transformed
import config from 'virtual:config' // [!code ++]

支持内置的 astro 配置。astro-pure 包将自动配置一些集成，如 unocss/astro、@astrojs/mdx、@astrojs/sitemap，以及一些 rehypePlugins 和 remarkPlugins。
将搜索引擎更改为 pagefind，主要是因为 Astro v5 不允许直接从客户端获取集合数据（这是 Fuse.js 搜索引擎的核心工作模式）。
将一些 BaseHead 标签配置更改为 src/site.config.ts。

v3.1.4

将配置 siteConfig.content.typographyProse 移动到 src/site.config.ts 中的 integrationConfig.typography.class。

将高级组件移动到 src/components/advanced。受影响的组件包含在高级组件中。导入方法也已更改：

import LinkPreview from '@/components/LinkPreview.astro' // [!code --]
import { LinkPreview } from 'astro-pure/advanced' // [!code ++]

<LinkPreview href='https://www.cloudflare.com/' />

将 Substats 配置移动到相关页面 src/pages/about/index.astro。
将 Github 卡片组件更改为 src/components/advanced 中的 GithubCard。有关用法，请参阅高级组件 #Github 卡片。
将 Links Logbook 移动到 src/site.config.ts。有关详细信息，请参阅友链 #基本配置。

v3.1.3

将用户组件移动到 src/components/user。受影响的组件包含在用户组件中。导入方法也已更改：
```
import Button from '@/components/Button' // [!code --]
import { Button } from 'astro-pure/user' // [!code ++]
```
将 remark-github-blockquote-alert 插件替换为组件 Aside。有关如何迁移，请查看用户组件 #Aside。

v3.1.2 (pre-release)

将一些配置项如 telegram、walineServerURL 移动到 src/site.config.ts 中的新结构。

v3.1.1

将 src/utils 中的内部部分移动到 src/plugins。
将配置文件 astro.config.ts 修改为 astro.config.mjs。
将 ESLint 更新到最新版本，并将配置文件 .eslintrc.js 迁移到 eslint.config.mjs。
将 prettier.config.js 修改为 prettier.config.mjs。

v3.1.0 (pre-release)

将通用内容 markdown 格式化器 coverImage 更改为 heroImage。您需要修改所有 markdown 文件，将 coverImage 替换为 heroImage。

v3.0.9

一个稳定版本。

待更新...

更新方法

变基 (Rebase)

如果您使用 fork 创建了一个新项目，您可以直接将主题仓库变基到最新版本。

手动合并

由于 git 历史不同，您可能需要手动将主题仓库合并到您的项目中。

对于 Windows 用户，一个实用的方法是使用工具 WinMerge。

过滤列表可能会有所帮助：

## 这是 WinMerge 的目录/文件过滤模板
name: Astro Theme Pure
desc: 博客与 Astro Theme Pure 的差异比较

## 选择过滤器是包含性还是排除性
## 包含性（宽松）过滤器允许通过所有不匹配规则的项目
## 排除性过滤器仅允许通过匹配规则的项目
## include 或 exclude
def: include

## 文件名过滤器以 f: 开头
## 目录过滤器以 d: 开头
## 要排除一些匹配 f: 模式的文件，请指定 f!:
## 要排除一些匹配 d: 模式的文件夹，请指定 d!:
## （内联注释以 " ##" 开头，并延伸到行尾）

### Front-end files ###
d: \\\.git$
d: \\node_modules$

# Astro cache
d: \\\.vercel
d: \\\.astro

### Theme dev ###
d: ^\\packages$
d: ^\\preset$
d: ^\\test$
f: ^LICENSE$
f: ^README\.md$
f: ^README-zh-CN\.md$
f: ^CODE_OF_CONDUCT\.md$

# Project
f: ^bun\.lockb$
f: \.code-workspace$
f: ^ignore\.md$

### Astro theme pure ###
# Static
d: ^\\public\\favicon$
f: ^public\\links\.json$
f: ^public\\images\\social-card\.png$

# Assets
f: ^src\\assets\\avatar\.png$
d: ^\\src\\assets\\projects$
d: ^\\src\\assets\\tools$

# Content
d: ^\\src\\content\\blog$
d: ^\\src\\content\\docs$
d: ^\\src\\pages\\docs$
f: ^src\\pages\\terms\\.*\.md$

### Blog ###
# Your own files

高级组件 (Advanced Components)

import { MdxRepl } from 'astro-pure/user'

Web 内容渲染 (Web Content Render)

引用 (Quote)

Quote 组件是一个简单的组件，用于显示随机引用。

配置:

export const integ: IntegrationUserConfig = {
  // 在页脚添加随机引用（默认在首页页脚）
  quote: {
    // https://github.com/lukePeavey/quotable
    server: 'https://api.quotable.io/quotes/random?maxLength=60', // [!code highlight:2]
    target: `(data) => data[0].content || 'Error'`
  }
}

Quotable 是一个提供随机英文引用的开源 API。

对于中文引用，您可以使用 Hitokoto。

export const integ: IntegrationUserConfig = {
  quote: {
    // https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80
    server: 'https://v1.hitokoto.cn/?c=i', // [!code highlight:2]
    target: `(data) => data.hitokoto || 'Error'`
  }
}

GitHub 卡片 (GitHub Card)

GithubCard 组件是一个简单的组件，用于显示 GitHub 用户卡片。

链接预览 (Link Preview)

预览内容中插入的任何链接。

数据转换器 (Data Transformer)

二维码 (QRCode)

// // default to render current page link

</Fragment>
</MdxRepl>

### Toast

<MdxRepl>
import { Button } from 'astro-pure/user'

<Button
  title='Click Me'
  onClick={`document.dispatchEvent(
    new CustomEvent('toast', {
      detail: {
        message: 'Hello from toast!',
        time: 5000
      }
    })
  )`} /> 
<Fragment slot='desc'>
```jsx
import { Button } from 'astro-pure/basic'

<Button
  title='Click Me'
  onClick={`document.dispatchEvent(
    new CustomEvent('toast', {
      detail: {
        message: 'Hello from toast!',
        time: 5000
      }
    })
  )`} />

Medium Zoom

Try click the following image.

See Other Integrations#medium-zoom.

评论系统

import { Aside } from 'astro-pure/user'

Waline 评论系统

主题的评论、阅读统计、点赞等功能均由 Waline 提供。

移除

如果您有一些原因需要移除评论系统，或者只是想了解如何更换为其他评论系统，本节可能会对您有所帮助。但如果您想了解如何配置它，可以跳过本节。

通过以下步骤移除它：

在 src/site.config.ts 中将 enable 设置为 false。

export const integ: IntegrationUserConfig = {
  // ...
  waline: {
    enable: false // [!code highlight]
  }
}

移除依赖 @waline/client：
```
bun remove @waline/client
```
移除文件夹 src/components/waline。
移除这些布局中的相关代码：
- src/layouts/CommonPage.astro
- src/layouts/BlogPost.astro
移除这些文件中为之前编辑的布局配置的相关配置，如 comment 或 view：
- src/pages/about/index.astro
- src/pages/links/index.astro
- src/pages/projects/index.astro
- 其他存在的博客文章 frontmatter 配置

部署

您可以参考其文档进行配置，建议使用 Vercel + Supabase 组合。

配置

然后，您可以在 integrationConfig.server 中配置 Waline 评论系统。

export const integ: IntegrationUserConfig = {
  // ...
  waline: {
    enable: true,
    // Server service link
    server: 'https://astro-theme-pure-waline.arthals.ink/', // [!code highlight]
    // Refer https://waline.js.org/en/guide/features/emoji.html
    emoji: ['bmoji', 'weibo'],
    // Refer https://waline.js.org/en/reference/client/props.html
    additionalConfigs: {
      pageview: true,
      comment: true
      // ...
    }
  }
}

使用

您可以在 .astro 或 .mdx 文件中手动调用它。

import { Comment } from '@/components/waline'

// prettier-ignore
<Comment />

渲染效果：

import { Comment } from '@/components/waline'

用户组件

import { Aside, Tabs, TabItem, MdxRepl } from 'astro-pure/user'

组件让您可以轻松且一致地重用一部分 UI 或样式。您不仅可以在 .astro 文件中使用它们，也可以在 .mdx 文件中使用。

对于 .astro 文件，您可以直接导入并使用组件。第一节中将展示一个示例。

容器 (Containers)

卡片 (Card)

<Card as='a' href='#card' heading='标题示例' subheading='这是一个卡片副标题，用于描述卡片内容。' date='2021年8月'

您甚至可以在这里包含一个列表

<Card as='a' href='#card' heading='标题示例' subheading='这是一个卡片副标题，用于描述卡片内容。' date='2021年8月'

您甚至可以在这里包含一个列表

</TabItem>
<TabItem label='Astro'>
```astro
---
import { Card } from 'astro-pure/user'
---
<!-- ... -->
<Card
  as='a'
  href='#card'
  heading='标题示例'
  subheading='这是一个卡片副标题，用于描述卡片内容。'
  date='2021年8月'
>
  您甚至可以在这里包含一个列表
</Card>

折叠框 (Collapse)

这是一个折叠框的内容示例。

侧边栏提示 (Aside)

// 例如，一段代码。

// js // 例如，一段代码。 //

该组件还有一个 remark 插件支持版本（可以直接在 .md 中使用），但尚未集成到本主题中。您可以参考 packages/starlight/integrations/asides.ts 获取参考代码。

:::tip
本主题的作者是个好人。
:::

选项卡 (Tabs)

MDX Repl

// Width 是可选的；使用 width 参数来设置 // MDX Repl 组件内的所有元素。 // (slot desc 不包含此参数)

您可以将任何其他组件组合到 desc 插槽中。<Fragment> 不会被渲染为父级 HTML 容器标签。

列表 (List)

卡片列表 (CardList)

</Fragment>
</MdxRepl>

### 时间线 (Timeline)

<MdxRepl>
import { Timeline } from 'astro-pure/user'

<Timeline events={
[
  { date: '2021年8月', content: '你好' },
  { date: '2022年8月', content: '<i>世界！</i>' },
]
} />

<Fragment slot='desc'>
```jsx
import { Timeline } from 'astro-pure/user'

<Timeline events={
  [
    { date: '2021年8月', content: '你好' },
    { date: '2022年8月', content: '<i>世界！</i>' },
  ]
} />

步骤条 (Steps)

如何一键三连：

有时也可以点个关注。

如何一键三连：

 有时也可以点个关注。

简单文本渲染 (Simple Text Render)

按钮 (Button)

剧透 (Spoiler)

没有人能找到我。但我就暴露在这里。

</Fragment>
</MdxRepl>

### 格式化日期 (Formatted Date)

<MdxRepl>
import { FormattedDate } from 'astro-pure/user'

<FormattedDate date={new Date('2077-01-01')} dateTimeOptions={{ month: 'short' }} />

<Fragment slot='desc'>
```jsx
import { FormattedDate } from 'astro-pure/user'

<FormattedDate date={new Date('2077-01-01')} dateTimeOptions={{ month: 'short' }} />

标签 (Label)

SVG 加载器 (SVG Loader)

</Fragment>
</MdxRepl>

## 资源 (Resources)

### 图标 (Icon)

<MdxRepl width='100%'>
<div>
import { Icon } from 'astro-pure/user'

单次使用：<Icon name='rss' class='inline' />

预览所有可用图标（点击按钮复制名称）：

import { Icons as allIcons } from 'astro-pure/libs'

<div class='flex flex-wrap gap-2'>
{
Object.keys(allIcons).map(icon => {
  const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'已将 "${icon}" 复制到剪贴板！'}}))`
  return (
    <Button as='button' type='button' class='cursor-pointer' onClick={script}>
      <Icon slot='before' name={icon} />
      <span>{icon}</span>
    </Button>
  )
})
}
</div>
</div>

<Fragment slot='desc'>
```jsx
import { Icon } from 'astro-pure/user'

单次使用：<Icon name='rss' class='inline' />

预览所有可用图标（点击按钮复制名称）：

import { Icons as allIcons } from 'astro-pure/libs'
import { Button } from 'astro-pure/user'

<div class='flex flex-wrap gap-2'>
{
  Object.keys(allIcons).map(icon => {
    const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'已将 "${icon}" 复制到剪贴板！'}}))`
    return (
      <Button as='button' type='button' class='cursor-pointer' onclick={script}>
        <Icon slot='before' name={icon} />
        <span>{icon}</span>
      </Button>
    )
  })
}
</div>

还有一些高级组件，可能适合您。希望您喜欢使用这些组件！

内容展示

import { MdxRepl } from 'astro-pure/user'

Shiki 代码

您可以在配置文件 astro.config.ts 中的 defineConfig.markdown.shikiConfig 处更改转换器。

基本用法

对于 .astro 文件：

---
import { Code } from 'astro:components'
---

<Code lang='shell' code={`git log --oneline`} />

对于 .mdx 和 .md 文件：

```shell
git log --oneline
```

添加标题

bun check & bun dev


<Fragment slot='desc'>
````markdown
```shell title="start.sh"
#!/bin/bash

bun check &
bun dev

</Fragment>
</MdxRepl>

### 显示差异

支持添加和删除行。

<MdxRepl width='80%'>
```shell title="deploy.sh"
#!/bin/bash

bun check
bun lint
bun format # [!code ++]
# 不需要 vercel 或其他 ci/cd
bun run build # [!code --]
git push
```

<Fragment slot='desc'>
````markdown
```shell title="deploy.sh"
#!/bin/bash

bun check
bun lint
bun format # [\!code ++]
# 不需要 vercel 或其他 ci/cd
bun run build # [\!code --]
git push
```

显示高亮

内容过时警告

如果文章足够旧，添加警告消息。

---
// ...
---
  <Hero {data} {remarkPluginFrontmatter} slot='header'>
    <Fragment slot='description'>
      {!isDraft && enableComment && <PageInfo comment class='mt-1' />}
      { // [!code ++]
        Math.floor((Date.now() - new Date(articleDate).getTime()) / 86400000) > 365 && ( // [!code ++]
          <p class='mt-1 text-sm italic text-primary' style='--primary:41 90% 50%'> <!-- [!code ++] -->
            本文最后更新已超过一年，部分信息可能已过时。 <!-- [!code ++] -->
          </p> /* [!code ++] */
        ) // [!code ++]
      } <!-- [!code ++] -->
    </Fragment>
  </Hero>

它将渲染如下：

{

友链

import { Steps } from 'astro-pure/user'

移除友链页面

友链页面是用于显示您朋友博客链接的页面，默认启用。

如果您出于任何原因想要移除友链页面，请按照本节中的步骤操作。否则，您可以跳过本节继续阅读下一章。

在 src/site.config.ts 中将 links.enable 设置为 false：

export const integ: IntegrationUserConfig = {
  // ...
  links: {
    enable: false // [!code highlight]
  }
}

此外，请记得删除以下文件夹和文件：

src/components/links/
src/pages/links/
public/links.json

基本配置

友链的基本配置位于 src/site.config.ts 中。您可以添加朋友的日志或自己的链接信息。

export const integ: IntegrationUserConfig = {
  links: {
    // 朋友日志
    logbook: [
      { date: '2025-03-16', content: '有泄漏吗？' },
      { date: '2025-03-16', content: '什么泄漏？' },
      { date: '2025-03-16', content: '我的座位上全是水，像，全是水！' },
      { date: '2025-03-16', content: '一定是水。' },
      { date: '2025-03-16', content: '让我们把它添加到智慧的话语中。' },
    ],
    // 您自己的链接信息
    applyTip: {
      name: theme.title,
      desc: theme.description || 'Null',
      url: 'https://astro-pure.js.org/',
      avatar: 'https://astro-pure.js.org/favicon/favicon.ico'
    }
  },
}

友链配置

友链配置位于 public/links.json 文件中。

{
  "friends": [
    {
      "id_name": "cf-links",
      "desc": "朋友圈中包含的常见链接",
      "link_list": [
        { // [!code highlight:6]
          "name": "Elysia",
          "intro": "嗨，你想我了吗？无论何时何地，Elysia 都会回报你所有的期待。",
          "link": "https://honkaiimpact3.fandom.com/wiki/Elysia",
          "avatar": "https://0.gravatar.com/avatar/"
          // 在这里你也可以留下一些其他字段作为备注
        },
      ]
    },
    {
      "id_name": "inactive-links",
      "desc": "不活跃或违规的朋友",
      "link_list": [] // 你可以暂时把一些不好的链接留在这里
    },
    {
      "id_name": "special-links",
      "desc": "其他特殊链接",
      "link_list": [] // 不是你朋友的特殊链接
    }
  ]
}

与 `Friend-Circle-Lite` 集成

Friend-Circle-Lite 是一个精简版的友链应用，没有后端，仅使用 github action 运行。

它需要：

一个启用了 github action 的 github 仓库。
一个静态站点服务器，如 Vercel、Netlify、GitHub Pages 等。

此主题尚未集成它，将来也不会提供支持。但请放心，本文档将指导您集成它。

Fork Friend-Circle-Lite。

修改您 fork 的仓库中的 config.yaml：

spider_settings:
   enable: true
   json_url: "<your-site>/links.json" # [!code highlight]
   article_count: 4

转到 "Actions" 页面并手动运行工作流 "Friend Circle Lite" 以检查它是否正常工作。这也会在 "page" 分支中生成服务器文件。
查看文档将服务器文件部署到您的静态站点服务器。
将获取脚本文件 friendCircle.ts 添加到您项目的 src/plugins 路径中。
将样式文件 fc.css 添加到您项目的 src/assets/styles 路径中。

在 src/components/pages/links/index.astro 中添加初始化代码：

---
const headings = [
   // ...
   { depth: 2, slug: 'small-circle', text: '小圈子' }, // [!code highlight]
]
---

<PageLayout>
   {/* ... */}
   <!-- [!code highlight:16] -->
   <h2 id='small-circle'>小圈子</h2>
   <div id='friend-circle-lite-root' class='not-prose'>加载中...</div>
   <script>
      import '@/assets/styles/fc.css'

      import { FriendCircle } from '@/plugins/friendCircle'

      const fc = new FriendCircle()
      fc.init({
         private_api_url: '<your-fc-lite-server>',
         page_turning_number: 10,
         error_img: 'https://cravatar.cn/avatar/57d8260dfb55501c37dde588e7c3852c'
      })
      fc.load()
   </script>
</PageLayout>

其他集成

import { Aside, Tabs, TabItem, Steps } from 'astro-pure/user'

`medium-zoom`

查看 medium-zoom 了解更多。

export const integ: IntegrationUserConfig = {
  // ...
  // 一个可以添加缩放效果的灯箱库
  mediumZoom: {
    enable: true, // 禁用它将不会加载整个库
    selector: '.prose .zoomable',
    options: {
      className: 'zoomable'
    }
  }
}

此主题默认已在 BlogPost.astro 中集成了它，这意味着 src/content/blog 中的任何内容都不需要导入。如果您想在任何其他布局或页面中使用它，可以使用以下代码：

// .zoomable 类将通过 remark 插件自动添加

`@playform/compress`

查看 playform/compress 了解更多。

Friend-Circle-Lite

请参阅友链 #与 Friend-Circle-Lite 集成。

LateX 支持

如果将来此主题移除了对 LateX 的默认支持，这里有一个教程可以帮助您添加支持。

在 Astro.js 中渲染 LaTeX 可以丰富您的 markdown 文件，添加数学表达式，使您的内容既吸引人又信息丰富。以下步骤概述了将 LaTeX 集成到 Astro.js 中的必要步骤，并解决了可能出现的问题及其解决方案。

安装必要的包

首先安装 remark-math 和 rehype-katex。这些包分别用于解析和渲染 LaTeX。使用以下安装命令：
```
bun install remark-math rehype-katex
```

配置 Astro

修改您的 Astro 配置以使用这些插件。在 astro.config.ts 中的 markdown 配置部分添加这些插件：

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
   // ...
   markdown: {
      remarkPlugins: [remarkMath],
      rehypePlugins: [rehypeKatex],
   },
});

包含 KaTeX CSS

为了确保 LaTeX 公式样式正确，在您的 HTML 布局中包含 KaTeX CSS（在此主题中，它将位于 BlogPost.astro 文件中）。添加以下 CSS 资源：
```
---
import 'katex/dist/katex.min.css'
---
```
或者使用 CDN 以提高速度：
```
---
import config from '@/site-config'
---
<link rel="stylesheet" href={`${config.npmCDN}/katex@0.16.15/dist/katex.min.css`}>
```

建议添加一些 CSS 代码：

为了确保 LaTeX 公式显示更好，您可能需要将以下代码添加到 public/styles/global.css 中：

span.katex-display {
  overflow-y: scroll;
  padding: 0.5rem;
}
.katex-html {
  overflow: auto hidden;
  padding: 3px;
}
.katex-html .base {
  margin-block: 0;
  margin-inline: auto;
}
.katex-html .tag {
  position: relative !important;
  display: inline-block;
  padding-inline-start: 0.5rem;
}

常见问题和解决方案：

CSS 样式问题

问题：如果未加载 KaTeX CSS，LaTeX 公式可能无法使用正确的样式渲染。

解决方案：确认 KaTeX 样式表链接正确放置在 HTML 头部，并且加载没有问题。检查是否有网络错误或限制导致 CSS 无法加载。
构建错误

问题：处理 LaTeX 语法时构建时出错。

解决方案：确保您的 LaTeX 格式正确，并且您的 markdown 文件中没有语法错误。LaTeX 语法错误会破坏解析器并导致构建失败。

UnoCSS 与样式

UnoCSS 更改外观

您可以通过修改 src/assets/styles/app.css 中的 CSS 文件来自定义主题默认的 UnoCSS 调色板。例如，如果您想更改默认主题颜色，可以修改以下代码：

:root {
  /* ... */
  --primary: 200 29% 45%; /* [!code --] */
  --primary: <使用原始 hsl 的您喜欢的颜色>; /* [!code ++] */
}

同样，要更改默认字体系列，您可以修改以下代码：

:root {
  /* ... */
  font-family: 'Satoshi'; /* [!code --] */
  src: url('/fonts/Satoshi-Variable.ttf'); /* [!code --] */
  font-family: '<您喜欢的字体系列>'; /* [!code ++] */
  src: url('/fonts/<您喜欢的字体>.ttf'); /* [!code ++] */
}

请确保将您的自定义字体文件放在 public/fonts 目录中。

UnoCSS 配置

文件：uno.config.ts

了解更多：

`@unocss/preset-typography`

排版配置可以在 uno.config.ts 中修改：

const typographyConfig = {
  // prettier-ignore
  cssExtend: { // [!code highlight:3]
    // ...
  }
}

但如果您想通过 UnoCSS 自定义排版，或者只是更改预设排版主题，您可以在 src/site.config.ts 中进行：

export const integ: IntegrationUserConfig = {
  // ...
  typography: {
    class: 'prose text-base text-muted-foreground' // [!code highlight]
  }
}

查看 Typography 预设了解更多。

撰写内容

import { Aside } from 'astro-pure/user'

Astro 帮助您编写并展示您的内容。您可以使用 Markdown/MDX 在 Astro 中直接撰写博客文章，或者从 headless CMS 获取内容。Astro 允许您围绕内容构建网站：您可以为页面添加布局、创建文章索引，并设置 RSS 订阅。

编写内容

在 Astro 中，您可以通过多种方式编写内容：

在 Markdown 文件（.md 或其他扩展名）中编写，旨在轻松编写富文本内容。
在 MDX (.mdx) 或 Markdoc (.mdoc) 文件中通过官方集成编写，可以在文档中包含组件和动态表达式。
使用第三方内容管理系统 (CMS)，然后将内容拉取到 .astro 页面中。
其他选项（较少用于内容密集型页面）包括 .astro 文件和 .html 文件。

对于本主题，默认支持 .md 和 .mdx。

Markdown 编写

Markdown 是一种方便的语法，用于编写具有基本格式和常见元素（如标题、列表和图像）的富文本。Astro 内置了对项目中 Markdown 文件的支持。

在您的代码编辑器中创建并编写一个新的 .md 文件，或者导入在您喜欢的 Markdown 编辑器中编写的现有文件。一些在线 Markdown 编辑器（如 StackEdit 和 Dillinger）甚至允许您编辑并同步您的工作到存储在 GitHub 上的 Astro 仓库。

下面是在 Astro 中编写 Markdown 内容的示例：

---
title: '第一篇文章' # (必填，最多 60 字符)
description: '我喜欢写文章。' # (必填，10 到 160 字符)
publishDate: '2024-11-30 00:08:00' # (必填，日期格式)
tags:
  - Markdown # (也可以像下一行那样写格式)
heroImage: { src: './thumbnail.jpg', alt: '文章封面图', color: '#B4C6DA' }
# thumbnail.jpg 应与文章位于同一文件夹中
draft: false # (设置为 true 将仅在开发环境中显示)
language: '中文' # (可以根据需要填写字符串)
comment: true # (设置为 false 将禁用评论，即使在 site-config 中已启用)
---

## 这是一个标题

这是一个段落。

如果您有很多资源，可以为标题创建一个文件夹，例如 src/content/blog/first-article/，并将所有资源放在那里。当然，您的内容文件应重命名为 index.md 或 index.mdx 并包含在此文件夹中。

如果您想为 heroImage 使用远程图像，请在 heroImage 对象中添加 inferSize: true 或指定 width 和 height。示例：

heroImage:
  { src: 'https://img.tukuppt.com/ad_preview/00/15/09/5e715a320b68e.jpg!/fw/980', inferSize: true }
# 或者指定宽度和高度
heroImage:
  { src: 'https://img.tukuppt.com/ad_preview/00/15/09/5e715a320b68e.jpg!/fw/980', width: 980, height: 551 }

太复杂了？简单示例只需要这些：

---
title: 简单文章
description: 只是另一篇简单的文章。
publishDate: 2024-07-26
---

我喜欢写简单的文章。

MDX 编写

这允许您在文本内容中包含 UI 元素，例如横幅或交互式轮播。

在您的代码编辑器中直接编写和编辑 .mdx 文件，就像处理项目文件一样。MDX 文件是 Astro 中支持的页面文件类型，也可以用作内容集合条目。

关于集成的组件，请查看用户组件和高级组件。

连接 CMS

参见 Astro: 在 Astro 中使用 CMS

页面

Astro 使用 基于文件的路由，根据项目 src/pages/ 目录的文件布局来生成您的构建 URL。

路由

src/pages/ 目录中的 .astro 页面组件以及 Markdown 和 MDX 文件 (.md, .mdx) 会自动成为您网站上的页面。每个页面的路由与其在 src/pages/ 目录中的路径和文件名相对应。

# 示例：静态路由
src/pages/index.astro        -> mysite.com/
src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about
src/pages/about/me.astro     -> mysite.com/about/me
src/pages/posts/1.md         -> mysite.com/posts/1

在 Astro 项目中无需维护单独的“路由配置”！当您在 src/pages/ 目录中添加文件时，系统会自动为您创建一个新路由。在静态构建中，您可以使用 build.format 配置选项来自定义文件输出格式。

Astro 页面

Astro 页面使用 .astro 文件扩展名，并支持与 Astro 组件相同的功能。

---

---

<html lang='zh-CN'>
  <head>
    <title>我的首页</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
  </body>
</html>

页面必须生成完整的 HTML 文档。如果未明确包含，Astro 默认会为 src/pages/ 目录下的任何 .astro 组件添加必要的 <!DOCTYPE html> 声明和 <head> 内容。您可以通过将页面标记为局部页面 (partial) 来按组件选择退出此行为。

为了避免在每个页面上重复相同的 HTML 元素，您可以将通用的 <head> 和 <body> 元素移入您自己的布局组件。您可以根据需要使用任意数量的布局组件。

在本主题中，幸运的是您可以使用 BaseLayout.astro 作为您的布局组件。

---
import PageLayout from '@/layouts/BaseLayout.astro' // [!code highlight]

const meta = {
  title: '我的页面',
  description: '我最喜欢的页面'
}
const highlightColor = '#44AEF6' // 可选
---

<PageLayout {meta} {highlightColor}>
  <!-- [!code highlight] -->
  <p>我的页面内容，包裹在布局中！</p>
</PageLayout>
<!-- [!code highlight] -->

Markdown/MDX 页面

虽然 .astro 页面具有一些灵活的功能，并且对内联/模块脚本更友好，但 .md 和 .mdx 页面更适合以内容为中心的页面。

Astro 还将 src/pages/ 内的任何 Markdown (.md) 文件视为最终网站中的页面。如果您安装了 MDX 集成，它也会以相同的方式处理 MDX (.mdx) 文件。

对于共享相似结构的目录（如博客文章或产品项目），请考虑创建内容集合 (content collections) 而不是直接在 pages 下创建文件。

Markdown 文件可以使用特殊的 layout frontmatter 属性来指定一个布局组件，该组件会将 Markdown 内容包裹在完整的 <html>...</html> 页面文档中。

本主题为 .md 和 .mdx 文件提供了一个优秀的布局：

---
layout: '@/layouts/IndividualPage.astro'

title: '隐私政策'
description: '生效日期: 2024-11-26'
language: '中文' # 可选
back: '/terms/list' # 可选，默认为 '/'
heroImage: { src: './thumbnail.jpg' } # 将用于社交分享图
---

## 隐私政策 1

这是隐私政策的第一部分。

HTML 页面

扩展名为 .html 的文件可以放在 src/pages/ 目录中，并直接用作您网站上的页面。请注意，HTML 组件不支持某些核心 Astro 功能。

配置

主题配置

文件: src/site.config.ts

等待更新...

Astro 配置

文件: astro.config.ts

您可以配置它来更改部署方法、添加 rehype 和 remark 插件等。

阅读更多关于 Astro 配置的内容，请点击此处。

ESLint 配置

文件: eslint.config.mjs

您可以配置 ESLint 以更改规则和安全检查。

阅读更多关于 ESLint 配置的内容，请点击此处。

Prettier 配置

文件: prettier.config.mjs

您可以配置 Prettier 以更改代码格式化规则，这可以改变您使用包管理器命令 format 以及您喜欢的 IDE 扩展支持的体验。

选项可在此处查看。

UnoCSS 配置

文件: uno.config.ts

它是一个实用优先的 CSS 框架，用于构建自定义设计。主题还使用了它的 typography 预设来进行排版设置。

查看 UnoCSS 与样式了解更多信息。

Typescript 配置

文件: tsconfig.json

部署

import { Aside, Steps } from 'astro-pure/user'

包模式 (Package Mode)

本主题自 v4.0.0 版本起集成了 NPM 包模式。推荐的方式是移除本地包文件，并从 NPM 安装主题集成。如果由于某些原因您想修改包内容，则应将本地包链接到您的主题模板。主题已集成 bun 方法，您需要：

添加环境变量 BUN_LINK_PKG=true。
运行 bun pure check 自动链接包。

此方法也适用于部署到其他平台（如 Vercel）。您只需在平台的构建选项设置中添加该环境变量即可。构建命令 astro-pure check && astro check && astro build 将会自动链接包。

部署模式

Astro 对部署提供了非常出色的支持。查看部署您的 Astro 网站了解更多信息。

Vercel

本主题默认支持 Vercel：

将代码推送到您的在线 Git 仓库（GitHub, GitLab, BitBucket）。
将项目导入 Vercel。
Vercel 将自动检测 Astro 并配置正确的设置。
您的应用程序已部署！（例如：astro.vercel.app）

Vercel 也支持静态方法：

import vercelServerless from '@astrojs/vercel/serverless' // [!code --]
import vercelStatic from '@astrojs/vercel/static'; // [!code ++]

export default defineConfig({
  //   ...
  adapter: vercelServerless() // [!code --]
  adapter: vercelStatic(), // [!code ++]
})

Node 服务器

如果您是在本地使用 Node.js 部署，首先需要安装 @astrojs/node：

bun add '@astrojs/node'

然后按照 astro.config.ts 中的注释进行如下修改：

import node from '@astrojs/node' // [!code ++]
import vercelServerless from '@astrojs/vercel/serverless' // [!code --]

export default defineConfig({
  //   ...
  adapter: vercelServerless(), // [!code --]
  adapter: node({ mode: 'standalone' }), // [!code ++]

  integrations: [
    // prettier-ignore
    outputCopier({ // [!code --]
      integ: ['sitemap', 'pagefind'] // [!code --]
    }) // [!code --]
  ]
})

Bun 服务器

Bun 也支持静态方法。

查看 @nurodev/astro-bun 了解更多信息。

静态部署

移除 astro.config.ts 中所有的服务器适配器配置：

import vercelServerless from '@astrojs/vercel/serverless' // [!code --]

export default defineConfig({
  //   ...
  adapter: vercelServerless(), // [!code --]
  output: 'server' // [!code --]
})

GitHub Pages

参见 Astro: 为 GitHub Pages 配置 Astro。

对于需要在具有基础路径（base path）的 GitHub Pages 上部署的用户（例如 username.github.io/repo-name），请仔细阅读部署#具有基础路径的平台。

具有基础路径的平台

Astro 提供了对基础路径的基本支持 —— 参见配置参考中的 "base" 选项：Astro: base。
本主题不建议使用基础路径，因为它会严重破坏远程开发的体验。一般来说，不建议在具有基础路径的情况下部署模板，因为首页集成了列表、简历元素和其他依赖于模板源结构的功能。
如果您按照指南修改代码，可以使用基础路径进行部署，但您不能同时使用同一个项目副本在有和没有基础路径的情况下部署。请自行承担风险；除非您计划为文档改进做出贡献，否则请勿为此开设 Issue。

在 astro.config.ts 中将 base 选项设置为您的基础路径，例如：

export default defineConfig({
  //   ...
  base: '/repo-name/' // 替换为您的仓库名称
})

更新动态脚本文件中的所有内部链接：
- src/components/BaseHead.astro
- src/pages/docs/DocsContent.astro
- src/pages/rss.xml.ts
- packages/pure/components/pages/PostPreview.astro (需要自定义主题才能进行更改)
更新所有静态资源路径：
- 在 src/site.config.ts 中添加基础路径。特别是菜单配置。
- 在 src/plugins/shiki-transformers.ts 中为所有的 /icons/code.svg 添加基础路径。
- 在 src/assets/styles/app.css 中为 @font-face 属性中的所有 URL 添加基础路径。

快速开始

import { Steps, Aside, Tabs, TabItem } from 'astro-pure/user'

安装

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

使用模板安装

安装主题

在您的用户目录下执行以下命令以安装主题：
```
[install]
registry = "<npm mirror site>"
```
关于其他包管理器的镜像配置详情，您可能需要查看它们的官方文档。

默认情况下，此命令将使用模板仓库的 main 分支。要使用其他分支名称，请将其作为 --template 参数的一部分传递：cworld1/astro-theme-pure#<branch>。
回答问题并按照 CLI 向导的说明进行操作。
大功告成！

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

使用 Fork 安装

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

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

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

启动开发服务器

进入您的项目目录：

cd ./<your-project>

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

迁移到 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: 项目信息

简单设置

移除文档文件

移除 src/pages/docs 目录
移除 src/site.config.ts 中的菜单声明：

export const theme: ThemeUserConfig = {
   // ...
   /** Configure the header of your site. */
   header: {
      menu: [
         { title: 'Blog', link: '/blog' },
         { title: 'Docs', link: '/docs' }, // [!code --]
         // ...
      ],
   },
}

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

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

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

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

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

更改网站 favicon。

将 public/favicon/* 文件替换为您自己的 favicon。
替换头像图片。

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

配置网站

您可以在 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 = { /* ... */ }
// ...

Typescript 语法

配置文件 site.config.ts 使用 Typescript 语法。如果您不熟悉 TS 语法，请先阅读此处的相关内容。

Astro Theme Pure

About

Contribute Code

Sponsorship

Open Source References

Customize Theme

You Should Know

Swizzling

Package Mode

常见问题

路径

博客特定路径

内容

heroImage 支持网络图片

构建

Vite 请求被拦截

BUN_LINK_PKG 相关问题

构建报错：No "Exports" Main Defined

优化您的网站

集成

CDN

编码

图片

使用优化组件

更改图像大小

适配外部图像

文件大小分析

更新主题

破坏性变更

v4.1.2

v4.1.1

v4.1.0

v4.0.9

v4.0.8

v4.0.7

v4.0.6

v4.0.5

v4.0.3

v4.0.2-beta

v4.0.1-beta

v4.0.0-alpha

v3.1.4

v3.1.3

v3.1.2 (pre-release)

v3.1.1

v3.1.0 (pre-release)

v3.0.9

更新方法

变基 (Rebase)

手动合并

高级组件 (Advanced Components)

Web 内容渲染 (Web Content Render)

引用 (Quote)

GitHub 卡片 (GitHub Card)

链接预览 (Link Preview)

数据转换器 (Data Transformer)

二维码 (QRCode)

Medium Zoom

评论系统

Waline 评论系统

移除

部署

配置

使用

用户组件

容器 (Containers)

卡片 (Card)

折叠框 (Collapse)

侧边栏提示 (Aside)

选项卡 (Tabs)

MDX Repl

列表 (List)

卡片列表 (CardList)

步骤条 (Steps)

简单文本渲染 (Simple Text Render)

按钮 (Button)

剧透 (Spoiler)

标签 (Label)

SVG 加载器 (SVG Loader)

内容展示

`heroImage` 支持网络图片

`BUN_LINK_PKG` 相关问题

与 `Friend-Circle-Lite` 集成

`medium-zoom`

`@playform/compress`

`@unocss/preset-typography`