恋文 Astro Blog 主题文档

这个文档由AI从英文翻译而来，如果你有更好的翻译，请提交一个PR。

这是一个使用Astro构建的博客模板。它从最简单的官方Astro博客模板开始，但使用Koibumi设计系统进行样式设计。

这是一个简单的模板，您可以轻松自定义。对于高级用法，您可以查看Astro文档。

站点配置文件

您可以在src/consts.ts文件中配置站点概况。这里是默认配置：

export const SITE_TITLE = 'Koibumi Blog';

export const SITE_DESCRIPTION = 'A blog about SolidJS, Astro, and koibumi design.';

export const FAVICON_SRC = '/favicon.svg';

export const AVATAR_SRC = '/avatar.avif';

export const BIO = " Welcome to my website! I write about programming, technology, and other things that interest me."

export const GLOBAL_STYLE: 'quartz' | 'glass' | 'lightGlass' = 'glass'

export const COPYRIGHT_NAME = 'Koibumi Design';
属性描述
SITE_TITLE站点的标题。
SITE_DESCRIPTION站点的描述。
FAVICON_SRCfavicon的路径。
AVATAR_SRC头像的路径。
BIO作者的简介。
GLOBAL_STYLE站点的全局样式。您可以从quartz、glass和lightGlass中选择一种。
COPYRIGHT_NAME版权名称。

如何更改favicon和头像

您可以在/public文件夹中找到头像和favicon。您可以将它们替换为您自己的图片。

如果您更改了文件名，例如，favicon.svg到favicon.ico，您也需要在src/consts.ts文件中更改FAVICON_SRC或AVATAR_SRC。

如何设置语言

通过编辑const.ts来设置语言目前还不支持。您可以通过编辑以下文件中的html标签中的lang属性来设置语言：

  • src/layouts/BlogPost.astro
  • src/pages/index.astro
  • src/pages/blog/index.astro

如何设置您的联系信息

目前还不支持设置联系信息。您只能手动编辑src/pages/index.astro文件。

编辑此模式：


<div id="contact">
    <a class="icon-link" href="https://github.com/koibumi-design" target="_blank" aria-label="GitHub">
        <GitHubIcon/>
    </a>
</div>

要获取图标，您可以使用Simple Icons网站。

博客帖子的前言

您必须在markdown文件中设置博客帖子的前言。这里是一个例子：

---
title: 'Koibumi Astro Blog Document'
description: 'Introduce how to use Koibumi Astro Blog (English Version)'
pubDate: 'Mar 26 2023'
heroImage: '/117092881_p1.webp'
pinned: true
notCompleted: false
---
属性描述
title博客帖子的标题。
description博客帖子的描述。
pubDate博客帖子的发布日期。
heroImage（可选）博客帖子的封面。
pinned（可选，默认为false）固定博客帖子。
notCompleted（可选，默认为false）标记为未完成。未完成的帖子将不会显示在博客列表中。

如何添加新的博客帖子

只需在src/content/blog文件夹中创建一个.md文件。您可以复制现有文件

并编辑前言。

如果您不知道如何使用markdown，您应该查看Markdown指南。

如何添加新页面

在src/pages文件夹中创建一个新的.astro文件。您可以复制现有文件并编辑。

如果您想将页面或外部链接添加到导航栏，您可以编辑src/components/Header.astro文件。

如何更改新的背景

找到src/styles/global.scss文件并编辑body选择器中的background-image属性。

body {

  /* 编辑以下行 */
  background-image: url('/background.webp'), linear-gradient(to right, #ffcdb9, #FFC0CB);

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

如何在博客帖子中使用LaTex

使用KaTeX渲染数学公式。要加载它，请在markdown文件的第一行添加css标签。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">

如何托管我的博客

为了方便编辑，您可以将仓库导入到您的GitHub账户。然后，您可以将其部署到任何您喜欢的免费静态站点托管服务。

推荐免费托管服务：

使用这些服务需要一个域名。

借物表