如何配置AstroPaper主题（译）

原文章：How to configure AstroPaper theme

AstroPaper是一个高度可定制的Astro博客主题。使用AstroPaper，你可以根据个人品味自定义一切。本文将解释如何在配置文件中轻松进行一些自定义。

Table of contents

配置SITE

重要的配置项位于 src/config.ts 文件中。在该文件中，你会看到 SITE 对象，在这里你可以指定你网站的主要配置。

在开发过程中，SITE.website 可以留空。但是在生产模式下，你应该在 SITE.website 选项中指定你的部署网址，因为这将用于规范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: "Suggest Changes",
    url: "https://github.com/satnaing/astro-paper/edit/main/",
  },
  dynamicOgImage: true, // 启用自动动态og-image生成
  dir: "ltr", // "rtl" | "auto"
  lang: "en", // html语言代码。留空则默认是"en"
  timezone: "Asia/Bangkok", // 默认全球时区（IANA格式）
} as const;
src/config.ts

以下是SITE配置选项：

更新布局宽度

整个博客的默认 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 值。

配置徽标或标题

在 AstroPaper v5 之前，你可以在 src/config.ts 文件中的 LOGO_IMAGE 对象中更新你的网站名称/徽标。然而，在 AstroPaper v5 中，此选项已被移除，取而代之的是Astro内置的SVG和图像组件

你可以选择以下3种选项：

选项1：SITE标题文本

这是最简单的选项。你只需在 src/config.ts 文件中更新 SITE.title。

选项2：Astro的SVG组件

如果你想使用SVG徽标，可以选择此选项。

• 首先在 src/assets 目录中添加一个SVG文件。（例如：src/assets/dummy-logo.svg）

• 然后在 Header.astro 中导入该SVG

  ---
  // ...
  import DummyLogo from "@/assets/dummy-logo.svg";
  ---src/components/Header.astro

• 最后，用导入的徽标替换 {SITE.title}

  <a
    href="/"
    class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
  >
    <DummyLogo class="scale-75 dark:invert" />
    <!-- {SITE.title} -->
  </a>

这种方法的最佳之处在于，你可以根据需要自定义SVG样式。在上面的示例中，你可以看到如何在黑暗模式下反转SVG徽标的颜色

选项3: Astro的图像组件

如果你的徽标是图像但不是SVG，可以使用Astro的图像组件。

• 在 src/assets 目录中添加你的徽标。（例如：src/assets/dummy-logo.png）

• 在 Header.astro 中导入 Image 和你的徽标

  ---
  // ...
  import { Image } from "astro:assets";
  import dummyLogo from "@/assets/dummy-logo.png";
  ---src/components/Header.astro

• 然后，用导入的徽标替换 {SITE.title}

  <a
    href="/"
    class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
  >
    <image src="{dummyLogo}" alt="Dummy Blog" class="dark:invert" />
    <!-- {SITE.title} -->
  </a>

通过这种方法，你仍然可以使用CSS类调整图像的外观。然而，这可能并不总是符合你的需求。如果你需要根据光明或黑暗模式显示不同的徽标图像，请查看 Header.astro 组件中如何处理光明/黑暗图标。

配置社交链接

你可以在 constants.ts 文件中的 SOCIALS 对象中配置社交链接

export const SOCIALS = [
  {
    name: "GitHub",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: ` ${SITE.title} on GitHub`,
    icon: IconGitHub,
  },
  {
    name: "X",
    href: "https://x.com/username",
    linkTitle: `${SITE.title} on X`,
    icon: IconBrandX,
  },
  {
    name: "LinkedIn",
    href: "https://www.linkedin.com/in/username/",
    linkTitle: `${SITE.title} on LinkedIn`,
    icon: IconLinkedin,
  },
  {
    name: "Mail",
    href: "mailto:yourmail@gmail.com",
    linkTitle: `Send an email to ${SITE.title}`,
    icon: IconMail,
  },
] as const;src/constants.ts

配置分享链接

你可以在 constants.ts 文件中的 SHARE_LINKS 对象中配置分享链接。

总结

这是关于如何自定义此主题的简要说明。如果你了解一些编码，可以进行更多自定义。有关样式自定义，请阅读这篇文章。感谢你的阅读。✌🏻

（完）

如果这篇文章刚好帮到了你，欢迎请我喝杯咖啡！