Back

个人定制化指南个人定制化指南

站点配置

avatar

theme-astro-pure

21 Astro

A simple, clean but powerful blog theme build by astro.

客制化本主题需要调整较多的源代码。

我们已经尽力将配置项集中在 src/site.config.ts 文件中,以方便用户进行修改,并集成了较多常见的社交媒体/工具 icon,如果你想要添加新的 icon,你需要自行修改源代码。

你可以在全局搜索如下关键字来找到需要替换的文本:

  • Lorem ipsum
  • astro-theme-pure
  • cworld

接下来我们逐一展开介绍。

主配置文件 src/site.config.ts

请根据现有 src/site.config.ts 模板修改对应配置。

一些特殊配置项的说明如下:

Waline 评论系统

NOTE

对应 src/site.config.ts 中的 siteConfig.walineServerUrl 配置项。

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

你可以参照其文档进行配置,推荐使用 Vercel + Supabase 的组合。

本主题只需要在 src/site.config.ts 中的 siteConfig.walineServerUrl 提供最终的后端域名即可。

NOTE

对应 src/site.config.ts 中的 socialLinks 配置项。

目前支持的社交媒体包括:

  • coolapk
  • telegram
  • github
  • bilibili
  • twitter
  • zhihu
  • steam
  • netease_music

如果你想要添加新的社交媒体,你需要修改如下文件:

  • src/types.ts:添加新的 SocialLink.name 枚举值以及 SocialMediaIconId 的 icon 映射关系

  • public/icons/social.svg:遵循现有格式,以 symbol 方式添加新的 icon

    推荐在如下网站寻找社交媒体的 icon,以保持一致性:

其他需要替换的文件

  • public/favicon:网站的 favicon,你可以在 favicon.io 生成 favicon
  • public/images/social-card.png:网站的社交卡片
  • src/assets/:此目录下包含客户端渲染的头像、赞助二维码等图片,请替换为你自己的图片

其他页面

About

目前支持的 icon 可在 src/icons 目录下找到。

如果你想要添加新的 Tools 图标,你需要在 src/icons 目录下添加新的 icon。

推荐在如下网站寻找新的 icon,以保持一致性:

部署模式

NOTE

对应 astro.config.ts 中的 export default defineConfig 配置项。

如果你采用 Vercel 部署,你无需修改。

如果你采用 Node.js 本地部署,你需要依照 astro.config.ts 中的注释,修改

import vercel from '@astrojs/vercel/serverless'
...
export default defineConfig({
  adapter: vercel({
    webAnalytics: {
      enabled: true
    }
  }),
  ...
})

import node from '@astrojs/node'
...
export default defineConfig({
  adapter: node({
    mode: 'standalone'
  }),
  ...
})
个人定制化指南
https://theme-astro-pure.vercel.app/blog/customize-zh
Author CWorld / Arthals
Update date July 27, 2024
Copyright CC BY-NC-SA 4.0
Comment seems to stuck. Try to refresh?✨