跳转到正文
青云 Qingyun
返回

如何配置 AstroPaper 主题

更新于:
编辑此页

AstroPaper 可定制项非常多。本文聚焦最常用配置,帮助你快速完成站点级调整。

目录

配置 SITE

主要配置位于 src/config.ts 的 SITE 对象。生产环境请务必设置 SITE.website,便于 canonical URL、社交卡片与 SEO 正常工作。

常见字段包括:

调整页面宽度

全站宽度由 global.css 的 max-w-app 控制,默认 max-w-3xl。你可以升级到 max-w-4xl 或更大,获得更宽的阅读区域。

可选三种方式:

  1. 直接使用 SITE.title 文本
  2. 使用 Astro SVG 组件
  3. 使用 Astro Image 组件

如果需要根据亮暗模式切换不同 Logo,可参考 Header 组件里的主题图标逻辑。

配置社交链接

在 src/constants.ts 的 SOCIALS 中配置名称、链接、提示文案和图标。

配置分享链接

同样在 src/constants.ts 中调整 SHARE_LINKS,控制文章页可分享平台。

配置字体

AstroPaper 支持 Astro Fonts API。你可以在 astro.config.ts 中声明新字体,并在 Layout 与 global.css 中绑定变量。

总结

建议先完成 SITE、颜色与字体三件套,再逐步扩展 logo、分享和功能开关。这样能在最短时间内获得稳定、统一且可维护的站点体验。


编辑此页
分享这篇文章:

上一篇
中文排版示例:产品博客页面观感检查
下一篇
自定义 AstroPaper 的配色方案