Astro Doge 主题 - 快速开始

下载仓库

通过 git，或直接在 GitHub 上下载仓库到本地。

git repo clone https://github.com/dogxii/astro-doge.git

下载后，在终端执行 npm install / bun install 安装依赖，更推荐 Bun 作为包管理器。

修改常量

有以下几处需要更改，

astro.config.mjs，将其修改为以后的部署域名：

export default defineConfig({
  site: 'https://dogxi.me/',
  integrations: [
    astroExpressiveCode({
      themes: ['github-dark'],
    }),
    mdx(),
    sitemap(),
    tailwind(),
  ],
  markdown: {
    remarkPlugins: [
      remarkGithubAlerts,
      remarkDemoteH1ToH2,
      [remarkExternalLinks, { allowHostnames: ['dogxi.me'] }],
    ],
  },
})

src/consts.ts，根据需要进行修改：

export const SITE: Site = {
  NAME: 'Dogxi 的狗窝',
  EMAIL: 'hi@dogxi.me',
  DESCRIPTION: 'Dogxi 的个人博客，因为热爱所以热爱',
  NUM_POSTS_ON_HOMEPAGE: 4,
  NUM_THOUGHTS_ON_HOMEPAGE: 2,
  NUM_RELATED_POSTS_ON_POST: 5,
}

export const HOME: Metadata = {
  TITLE: '主页',
  DESCRIPTION: 'Dogxi 的个人博客，因为热爱所以热爱',
}

// ...

src/components/Header.astro，定义了网站顶部导航栏：

<nav class="flex items-center gap-2">
  <Link href="/posts"> 文章 </Link>
  <span>
    {`/`}
  </span>
  <Link href="/thoughts"> 碎碎念 </Link>
  <span>
    {`/`}
  </span>
  <Link href="/about"> 关于 </Link>
  <div class="ml-1">
    <ThemeToggle />
  </div>
</nav>

src/components/Footer.astro，定义了网站底部内容：

<footer class="animate">
  <Container>
    <hr />
    <div class="mt-6 flex items-center justify-between">
      <div>&copy; 2025-PRESENT Dogxi.</div>
      <div class="flex gap-4">
        <Link href="https://github.com/dogxii" external>Github↗</Link>
        <Link href="https://dogxi.me/rss.xml" external>RSS↗</Link>
      </div>
    </div>
  </Container>
</footer>

创建文章与碎碎念

文章

[!NOTE] 手输字段很麻烦，所以主题提供了快速创建的命令：

bun new:blog my-blog，下面会有详细讲解

在 src/content/posts 目录下存放的就是博客文章，只需要新建 Markdown 文件，就可以进行写作。

如不知道 Markdown 是什么，或不熟练如何编写见 Markdown 速通

如果手动创建 Markdown 文件并运行后，终端会发生报错。因为空的文件中没有必要的 frontmatter 元数据，你需要在开头填入它，比如这篇文章的 frontmatter 为：

---
title: Astro Doge 主题 - 快速开始
description: 快速上手指南 🧭
date: 2025-12-01T12:30:02+08:00
slug: blog-theme-start
draft: false
---

字段	值类型	作用
title	字符串	文章标题
description	字符串	文章描述
date	ISO 8601 格式	发布时间
slug?	字符串	文章标识
draft	true / false	是否发布

其中 date 需要为 ISO 8601 格式：在 2025-12-01T12:30:02+08:00 中 T 用于分割日期和时间，末尾的 +08:00 表示时间偏移正八小时，即中国标准时间。
slug 为可选参数，用于文章链接，不填入则为文件名。推荐手动设置，能缩短链接，如这篇文章链接为 /blog-theme-start。

手动输入这些需要花费时间，所以主题提供了 bun new:blog <slug> 命令，用于快速创建新博客。它执行了 scripts/new-blog.ts 这个脚本，会获取 slug 参数作为 title、description 以及 slug 的值。

扩展

自定义博客页面及主题：

src/components/Head.astro，最底部定义了 Meting API

<!-- Meting APlayer -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/dogxi-meting@latest/APlayer.min.css"
/>
<script
  transition:persist="aplayer"
  src="https://cdn.jsdelivr.net/npm/dogxi-meting@latest/APlayer.min.js"
></script>

<script is:inline>
  window.meting_api =
    'https://meting.dogxi.me/api?server=:server&type=:type&id=:id&auth=:auth&r=:r'
</script>

<script
  transition:persist="meting"
  src="https://cdn.jsdelivr.net/npm/dogxi-meting@latest/Meting.min.js"></script>

Astro Doge 主题 - 快速开始

下载仓库

修改常量

创建文章与碎碎念

文章

扩展

评论