如何配置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>

With this approach, you can still adjust your image’s appearance using CSS classes. However, this might not always fit what you want. If you need to display different logo images based on light or dark mode, check how light/dark icons are handled inside the Header.astro component.

通过这种方法，你仍然可以使用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 对象中配置分享链接。

总结

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