向野而深的博客
Go back

如何配置 AstroPaper 主题

Updated:
目录

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

配置 SITE

重要的配置位于 src/config.ts 文件中。在该文件中，您将看到 SITE 对象，您可以在其中指定网站的主要配置。

在开发过程中，可以将 SITE.website 留空。但在生产模式下，您应该在 SITE.website 选项中指定已部署的 URL，因为这将用于规范 URL、社交卡片 URL 等，这对 SEO 很重要。

export const SITE = {
  website: "https://blog.liorawild.com/", // 替换为您部署的域名
  author: "Sat Naing",
  profile: "https://satnaing.dev/",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  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 格式) 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此选项控制如果博客文章 frontmatter 中未指定 ogImage，是否生成动态 og-image。如果您有很多博客文章，您可能希望禁用此功能。有关更多详细信息，请参阅权衡。
dir指定整个博客的文本方向。用作 <html dir="ltr"> 中的 HTML dir 属性。支持的值：ltr | rtl | auto
lang用作 <html lang"en"> 中的 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 组件。

指向网站 Logo 的箭头

您有 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

  • 最后，用导入的 Logo 替换 {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 Logo 颜色如何在暗模式下反转。

选项 3：Astro 的 Image 组件

如果您的 Logo 是图像而不是 SVG，则可以使用 Astro 的 Image 组件。

  • 在 src/assets 目录中添加您的 Logo。（例如：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

  • 然后，用导入的 Logo 替换 {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 类调整图像的外观。但是，这可能并不总是符合您的需求。如果您需要根据亮色或暗色模式显示不同的 Logo 图像，请查看 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

配置分享链接

您可以在 src/constants.ts 中的 SHARE_LINKS 对象中配置分享链接。

指向分享链接图标的箭头

配置字体

AstroPaper 使用 Astro 的 实验性字体 API，默认字体为 Google Sans Code。这提供了跨所有平台的一致排版，并具有包括预加载和缓存的自动字体优化功能。

使用默认字体

字体在 astro.config.ts 中自动配置，并在 Layout.astro 中加载。无需额外配置即可使用默认的 Google Sans Code 字体。

自定义字体

要使用不同的字体，您需要更新三个地方：

  1. 更新 astro.config.ts 中的字体配置：
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  // ...
  experimental: {
    fonts: [
      {
        name: "Your Font Name",
        cssVariable: "--font-your-font",
        provider: fontProviders.google(),
        fallbacks: ["monospace"],
        weights: [300, 400, 500, 600, 700],
        styles: ["normal", "italic"],
      },
    ],
  },
});astro.config.ts
  1. 更新 Layout.astro 中的 Font 组件：
---
import { Font } from "astro:assets";
// ...
---

<head>
  <!-- ... -->
  <Font
    cssVariable="--font-your-font"
    preload={[{ subset: "latin", weight: 400, style: "normal" }]}
  />
  <!-- ... -->
</head>src/layouts/Layout.astro
  1. 更新 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 文档。

结论

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

Share this post on:
Share this post on X Share this post via email
Previous Post
如何在 Astro 博客文章中添加 LaTeX 公式
Next Post
如何自定义 AstroPaper 主题配色方案