引子#

之前一直想要将博客的根目录改为主页，最近研究了一下，下面是简单的实现方法：

NOTE
请在操作前做好原项目备份

操作步骤#

1.更改页面路径#

将src/pages/[...page].astro移至新建目录src/pages/blog/[...page].astro
并新建文件src/pages/index.astro

1
---
2
import ContentCard from '../components/ContentCard.astro'
3
import MainGridLayout from '../layouts/MainGridLayout.astro'
4
---
5

6
<MainGridLayout>
7
    <ContentCard
8
        class="onload-animation"
9
        style="animation-delay: var(--content-delay)"
10
    />
11
</MainGridLayout>

2.配置主页内容#

新建文件src/components/ContentCard.astro

1
---
2
interface Props {
3
  class?: string
4
  style?: string
5
}
6

7
const { class: className, style } = Astro.props
8
---
9
//将主页内容至于此处，以下是示例：
10
<div class="card-base p-6 mb-4">
11

12
        <div class="card-base p-1 mb-0.1">
13
            <script is:inline></script>
14
            <div class="flex items-center gap-2"> </div>
15
            <h1 class="text-2xl font-bold text-black/90 dark:text-white/90">Welcome to my blog,👋</h1>
16
        </div>

IMPORTANT

在此处引用src/assets里的图片需要在文件头加上：

1
---
2
import { Image } from 'astro:assets'
3
import ExampletImage from '../assets/images/example.png'
4

5
interface Props {
6
  class?: string
7
  style?: string
8
}
9
// ...existing code...
10

11
// 使用方式如下：
12
<Image src={BackImage} alt="示例图片" class="rounded-xl w-full mb-4"/>
13

14
// ...existing code...

3.修改依赖文件路径#

由于src/pages/[...page].astro被移至/blog目录，因此在import时需要再返回一级目录

1
---
2
import type { GetStaticPaths } from 'astro'
3
import ContentCard from '../components/ContentCard.astro'
4
import PostPage from '../components/PostPage.astro'
5
import Pagination from '../components/control/Pagination.astro'
6
import { PAGE_SIZE } from '../constants/constants'
7
import MainGridLayout from '../layouts/MainGridLayout.astro'
8
import { getSortedPosts } from '../utils/content-utils'
9
import ContentCard from '../../components/ContentCard.astro'
10
import PostPage from '../../components/PostPage.astro'
11
import Pagination from '../../components/control/Pagination.astro'
12
import { PAGE_SIZE } from '../../constants/constants'
13
import MainGridLayout from '../../layouts/MainGridLayout.astro'
14
import { getSortedPosts } from '../../utils/content-utils'
15
---
16
export const getStaticPaths = (async ({ paginate }) => {
17
  const allBlogPosts = await getSortedPosts()
18
  // ...existing code...

4.在导航栏增加博客选项#

在导航栏的主页后添加博客，并配置路径和i18n

41
export const navBarConfig: NavBarConfig = {
42
  links: [
43
    LinkPreset.Home,
44
    LinkPreset.Blog,
45
    LinkPreset.Archive,
46
    LinkPreset.Series,
47
    LinkPreset.About,
48
    LinkPreset.Friends,
49

50
    // ...existing code...

38
export enum LinkPreset {
39
  Home = 0,
40
  Blog = 1,
41
  Archive = 2,
42
  Series = 3,
43
  About = 4,
44
  Friends = 5,
45
}
46
// ...existing code...

18
  [LinkPreset.Friends]: {
19
    name: i18n(I18nKey.friends),
20
    url: '/friends/',
21
  },
22
  [LinkPreset.Series]: {
23
    name: i18n(I18nKey.series),
24
    url: '/series/',
25
  },
26
  [LinkPreset.Blog]: {
27
    name: i18n(I18nKey.blog),
28
    url: '/blog/',
29
  },
30
}

32
  author = 'author',
33
  publishedAt = 'publishedAt',
34
  license = 'license',
35
  friends = 'friends',
36
  series = 'series',
37
  blog = 'blog',
38
}
39
// ...existing code...

35
  [Key.author]: '作者',
36
  [Key.publishedAt]: '发布于',
37
  [Key.license]: '许可协议',
38
  [Key.friends]: '友链',
39
  [Key.series]: '系列',
40
  [Key.blog]: '博客',
41
}

5.修改控件指向路径#

47
const getPageUrl = (p: number) => {
48
  if (p == 1) return '/'
49
  return `/${p}/`
50
  if (p == 1) return '/blog/'
51
  return `/blog/${p}/`
52
}
53
---
54
// ...existing code...

结语#

至此，访问博客根域名时就能直接看到主页啦ヾ(≧ ▽ ≦)ゝ，文章列表则位于/blog/<页数>🎉