pagefind_dcd{"url":"/posts/how-to-configure-astropaper-theme/","content":"如何配置 AstroPaper 主题 Updated: 10 Jan, 2026 | Edit page AstroPaper 是一个高度可定制的 Astro 博客主题。使用 AstroPaper，你可以根据个人品味自定义一切。本文将解释如何通过配置文件轻松进行一些自定义设置。目录. 配置 SITE. 重要的配置位于 src/config.ts 文件中。在该文件中，你会看到 SITE 对象，你可以在其中指定网站的主要配置。在开发过程中，将 SITE.website 留空是可以的。但在生产模式下，你应该在 SITE.website 选项中指定你的部署 URL，因为这将被用于规范 URL、社交卡片 URL 等，这些对 SEO 很重要。 export const SITE = { website: \"https://astro-paper.pages.dev/\", // 替换为你的部署域名 author: \"Sat Naing\", profile: \"https://satnaing.dev/\", desc: \"一个简约、响应式且 SEO 友好的 Astro 博客主题。\", title: \"AstroPaper\", ogImage: \"astropaper-og.jpg\", lightAndDarkMode: true, postPerIndex: 4, postPerPage: 4, scheduledPostMargin: 15 * 60 * 1000, // 15 分钟 showArchives: true, showBackButton: true, // 在文章详情中显示返回按钮 editPost: { enabled: true, text: \"建议修改\", url: \"https://github.com/satnaing/astro-paper/edit/main/\", }, dynamicOgImage: true, // 启用自动动态 OG 图片生成 dir: \"ltr\", // \"rtl\" | \"auto\" lang: \"en\", // html lang 代码。设为空则默认为 \"en\" timezone: \"Asia/Bangkok\", // 默认全局时区（IANA 格式）https://en.wikipedia.org/wiki/List_of_tz_database_time_zones } as const;src/config.ts 以下是 SITE 配置选项：选项描述 website. 你的已部署网站 URL. author. 你的名字. profile. 你的个人/作品集网站 URL，用于更好的 SEO。如果没有，设为 null 或空字符串 \"\"。 desc. 你的网站描述。对 SEO 和社交媒体分享有用。 title. 你的网站名称. ogImage. 网站的默认 OG 图片。对社交媒体分享有用。OG 图片可以是外部图片 URL，也可以放在 /public 目录下。 lightAndDarkMode. 启用或禁用网站的浅色与深色模式。如果禁用，将使用主色方案。此选项默认启用。 postPerIndex. 首页最近部分显示的文章数量。 postPerPage. 你可以指定每页显示多少篇文章。（例如：如果你将 SITE.postPerPage 设为 3，每页只显示 3 篇文章） scheduledPostMargin. 在生产模式下，pubDatetime 为未来时间的文章将不可见。但是，如果文章的 pubDatetime 在接下来的 15 分钟内，它将可见。如果你不喜欢默认的 15 分钟间隔，可以设置 scheduledPostMargin。 showArchives. 决定是否在网站上显示归档菜单（位于关于和搜索菜单之间）及其对应页面。此选项默认为 true。 showBackButton. 决定是否在每篇博客文章中显示返回按钮。 editPost. 此选项允许用户通过提供编辑链接来建议对博客文章的修改。可以通过将 SITE.editPost.enabled 设为 false 来禁用此功能。 dynamicOgImage. 此选项控制是否在博客文章前置元数据中未指定 ogImage 时生成动态 OG 图片。如果你有很多博客文章，你可能想禁用此功能。详见权衡。 dir. 指定整个博客的文本方向。用作 HTML dir 属性，如。支持的值：ltr | rtl | auto. lang. 用作 HTML ISO 语言代码，如。默认为 en。 timezone. 此选项允许你使用 IANA 格式指定时区。设置此项可确保本地主机和已部署站点的时间戳一致，消除时差。更新布局宽度. 整个博客的默认 max-width 是 768px（max-w-3xl）。如果你想更改，可以在 global.css 中轻松更新 max-w-app 工具类。例如： @utility max-w-app { @apply max-w-3xl; @apply max-w-4xl xl:max-w-5xl; }src/styles/global.css 你可以在 Tailwind CSS 文档中探索更多 max-width 值。配置 Logo 或标题. 在 AstroPaper v5 之前，你可以在 src/config.ts 文件中的 LOGO_IMAGE 对象中更新网站名称/logo。但是，在 AstroPaper v5 中，此选项已被移除，转而使用 Astro 内置的 SVG 和 Image 组件。你有 3 种选择：选项 1：SITE 标题文本. 这是最简单的选项。你只需更新 src/config.ts 文件中的 SITE.title。选项 2：Astro 的 SVG 组件. 如果你想使用 SVG logo，可以使用此选项。首先在 src/assets 目录中添加 SVG。（例如：src/assets/dummy-logo.svg）然后在 Header.astro 中导入该 SVG。 --- // ... import DummyLogo from \"@/assets/dummy-logo.svg\"; ---src/components/Header.astro 最后，将 {SITE.title} 替换为导入的 logo。这种方法最大的好处是你可以根据需要自定义 SVG 样式。在上面的示例中，你可以看到 SVG logo 颜色如何在深色模式下反转。选项 3：Astro 的 Image 组件. 如果你的 logo 是图片但不是 SVG，你可以使用 Astro 的 Image 组件。将你的 logo 添加到 src/assets 目录中。（例如：src/assets/dummy-logo.png）在 Header.astro 中导入 Image 和你的 logo。 --- // ... import { Image } from \"astro:assets\"; import dummyLogo from \"@/assets/dummy-logo.png\"; ---src/components/Header.astro 然后，将 {SITE.title} 替换为导入的 logo。 $\"示例博客\"$ 使用这种方法，你仍然可以通过 CSS 类来调整图片的外观。但这可能并不总是符合你的需求。如果你需要根据浅色或深色模式显示不同的 logo 图片，请查看 Header.astro 组件中如何处理浅色/深色图标。配置社交链接. 你可以在 constants.ts 中的 SOCIALS 对象中配置社交链接。 export const SOCIALS = [ { name: \"GitHub\", href: \"https://github.com/satnaing/astro-paper\", linkTitle: ` ${SITE.title} 在 GitHub 上`, icon: IconGitHub, }, { name: \"X\", href: \"https://x.com/username\", linkTitle: `${SITE.title} 在 X 上`, icon: IconBrandX, }, { name: \"LinkedIn\", href: \"https://www.linkedin.com/in/username/\", linkTitle: `${SITE.title} 在 LinkedIn 上`, icon: IconLinkedin, }, { name: \"邮箱\", href: \"mailto:yourmail@gmail.com\", linkTitle: `发送邮件给 ${SITE.title}`, icon: IconMail, }, ] as const;src/constants.ts 配置分享链接. 你可以在 src/constants.ts 中的 SHARE_LINKS 对象中配置分享链接。配置字体. AstroPaper 使用 Astro 的实验性字体 API，默认字体为 Google Sans Code。这提供了跨所有平台的一致排版，并具有自动字体优化功能，包括预加载和缓存。使用默认字体. 字体会在 astro.config.ts 中自动配置，并在 Layout.astro 中加载。使用默认的 Google Sans Code 字体不需要额外配置。自定义字体. 要使用不同的字体，你需要更新三个地方：更新 astro.config.ts 中的字体配置： import { defineConfig, fontProviders } from \"astro/config\"; export default defineConfig({ // ... experimental: { fonts: [ { name: \"你的字体名称\", cssVariable: \"--font-your-font\", provider: fontProviders.google(), fallbacks: [\"monospace\"], weights: [300, 400, 500, 600, 700], styles: [\"normal\", \"italic\"], }, ], }, });astro.config.ts 更新 Layout.astro 中的 Font 组件： --- import { Font } from \"astro:assets\"; // ... --- src/layouts/Layout.astro 更新 global.css 中的 CSS 变量映射： @theme inline { --font-app: var(--font-your-font); --color-background: var(--background); --color-foreground: var(--foreground); --color-accent: var(--accent); --color-muted: var(--muted); --color-border: var(--border); }src/styles/global.css --font-app 变量通过 font-app Tailwind 工具类在整个主题中使用，因此更新这个单一变量将在所有地方应用你的自定义字体。注意：确保字体名称与 Google Fonts 上的名称完全一致。对于其他字体提供商或本地字体，请参考 Astro 实验性字体 API 文档。结论. 以上就是如何自定义该主题的简要说明。如果你了解一些编码知识，你可以进行更多的自定义。有关自定义样式的信息，请阅读这篇文章。感谢阅读。✌🏻 Edit page configuration docs Back To Top Share this post on: Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email","word_count":626,"filters":{},"meta":{"image":"https://res.cloudinary.com/noezectz/v1663911318/astro-paper/AstroPaper-logo-config_goff5l.png","image_alt":"指向网站 logo 的箭头","title":"如何配置 AstroPaper 主题"},"anchors":[{"element":"article","id":"article","text":"","location":10},{"element":"h2","id":"目录","text":"目录","location":15},{"element":"h2","id":"配置-site","text":"配置 SITE","location":16},{"element":"h2","id":"更新布局宽度","text":"更新布局宽度","location":206},{"element":"h2","id":"配置-logo-或标题","text":"配置 Logo 或标题","location":230},{"element":"h3","id":"选项-1site-标题文本","text":"选项 1：SITE 标题文本","location":253},{"element":"h3","id":"选项-2astro-的-svg-组件","text":"选项 2：Astro 的 SVG 组件","location":260},{"element":"h3","id":"选项-3astro-的-image-组件","text":"选项 3：Astro 的 Image 组件","location":313},{"element":"h2","id":"配置社交链接","text":"配置社交链接","location":382},{"element":"h2","id":"配置分享链接","text":"配置分享链接","location":447},{"element":"h2","id":"配置字体","text":"配置字体","location":453},{"element":"h3","id":"使用默认字体","text":"使用默认字体","location":462},{"element":"h3","id":"自定义字体","text":"自定义字体","location":472},{"element":"h2","id":"结论","text":"结论","location":583},{"element":"div","id":"btt-btn-container","text":"Back To Top","location":589},{"element":"span","id":"progress-indicator","text":"","location":589}]}