如何配置AstroPaper主题

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

Open Table of contents

配置SITE
配置区域设置
Configuring logo or title
Configuring social links
Conclusion

配置SITE

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

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

// file: src/config.ts
export const SITE = {
  website: "https://astro-paper.pages.dev/",
  author: "Sat Naing",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerPage: 3,
  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
};

以下是站点配置选项

选项	描述
`website`	您部署的网站链接
`author`	作者
`desc`	您的网站描述。对SEO和社交媒体共享很有用。
`title`	您的网站名称
`ogImage`	您的站点默认OG图像。对社交媒体共享很有用。OG图像可以是外部图像url，也可以放在“/public”目录下。
`lightAndDarkMode`	为网站启用或禁用“明暗模式”。如果禁用，将使用原色方案。此选项在默认情况下处于启用状态。
`postPerPage`	您可以指定在每个帖子页面中显示的帖子数量。（例如：如果将`SITE.postPerPage`设置为3，则每页仅显示3篇文章）
`scheduledPostMargin`	在生产模式下，未来为`pubDatetime`的帖子将不可见。但是，如果帖子的`pubDatetime`在接下来的15分钟内，它将是可见的。如果您不喜欢默认的15分钟边距，可以设置`scheduledPostMargin`。

配置区域设置

您可以配置用于构建的默认区域设置（例如，帖子页面中的日期格式）和浏览器中的呈现（例如，搜索页面中的日期格式）

// file: src/config.ts
export const LOCALE = {
  lang: "en", // html lang code. Set this empty and default will be "en"
  langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
} as const;

LOCALE.lang will be used as HTML ISO Language code in <html lang="en">. If you don’t specify this, default fallback will be set to en. LOCALE.langTag is used as datetime locale. For this, you can specify an array of locales for fallback languages. Leave LOCALE.langTag empty [] to use the environment default at build- and run-time.

Configuring logo or title

You can specify site’s title or logo image in src/config.ts file.

// file: src/config.ts
export const LOGO_IMAGE = {
  enable: false,
  svg: true,
  width: 216,
  height: 46,
};

If you specify LOGO_IMAGE.enable => false, AstroPaper will automatically convert SITE.title to the main site text logo.

If you specify LOGO_IMAGE.enable => true, AstroPaper will use the logo image as the site’s main logo.

You have to specify logo.png or logo.svg under /public/assets directory. Currently, only svg and png image file formats are supported. (Important! logo name has to be logo.png or logo.svg)

If your logo image is png file format, you have to set LOGO_IMAGE.svg => false.

It is recommended that you specify width and height of your logo image. You can do that by setting LOGO_IMAGE.width and LOGO_IMAGE.height

You can configure your own social links along with its icons.

An arrow pointing at social link icons

Currently 20 social icons are supported. (Github, LinkedIn, Facebook etc.)

You can specify and enable certain social links in hero section and footer. To do this, go to /src/config.ts and then you’ll find SOCIALS array of object.

// file: src/config.ts
export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: ` ${SITE.title} on Github`,
    active: true,
  },
  {
    name: "Facebook",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: `${SITE.title} on Facebook`,
    active: true,
  },
  {
    name: "Instagram",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: `${SITE.title} on Instagram`,
    active: true,
  },
  ...
]

You have to set specific social link to active: true in order to appear your social links in hero and footer section. Then, you also have to specify your social link in href property.

For instance, if I want to make my Github appear, I’ll make it like this.

export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing", // update account link
    linkTitle: `${SITE.title} on Github`, // this text will appear on hover and VoiceOver
    active: true, // makre sure to set active to true
  }
  ...
]

Another thing to note is that you can specify the linkTitle in the object. This text will display when hovering on the social icon link. Besides, this will improve accessibility and SEO. AstroPaper provides default link title values; but you can replace them with your own texts.

For example,

linkTitle: `${SITE.title} on Twitter`,

linkTitle: `Follow ${SITE.title} on Twitter`;

Conclusion

This is the brief specification of how you can customize this theme. You can customize more if you know some coding. For customizing styles, please read this article. Thanks for reading.✌🏻

如何配置AstroPaper主题

Table of contents

配置SITE

配置区域设置

Configuring logo or title

Configuring social links

Conclusion