前提#

添加当前文章被选中效果#

1. 修改`Series`组件，添加新的Prop和被选中视觉元素#

1
---
2
import I18nKey from "../../i18n/i18nKey";
3
import { i18n } from "../../i18n/translation";
4
import { getPostSeries } from "../../utils/content-utils";
5
import { getPostUrlBySlug } from "../../utils/url-utils";
6
import WidgetLayout from "./WidgetLayout.astro";
7

8
const COLLAPSED_HEIGHT = "7.5rem";
9

10
interface Props {
11
  class?: string;
12
  style?: string;
13
  series: string;
14
  currentPostTitle?: string;
15
}
16
const className = Astro.props.class;
17
const style = Astro.props.style;
18
const seriesName = Astro.props.series;
19
const currentPostTitle = Astro.props.currentPostTitle;
20

21
const series = await getPostSeries(seriesName);
22

23
const isCollapsed = series.length >= 10;
24
---
25
<WidgetLayout name={i18n(I18nKey.series) + " - " + series[0].data.series} id="series" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
26
    <div class="flex flex-col gap-1">
27
        {series.map(t => (
28
            <a href={getPostUrlBySlug(t.slug)}
29
                aria-label={t.data.title}
30
                class="group btn-plain h-10 w-full rounded-lg hover:text-[initial]"
31
            >
32
                <!-- dot and line -->
33
                <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
34
                    <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
35
                    bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
36
                    outline outline-4 z-50
37
                    outline-[var(--card-bg)]
38
                    group-hover:outline-[var(--btn-plain-bg-hover)]
39
                    group-active:outline-[var(--btn-plain-bg-active)]
40
                    "
41
                    ></div>
42
                </div>
43
                <!-- post title -->
44
                <div class="w-[85%] text-left font-bold
45
                    group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
46
                    text-75 pr-15 whitespace-nowrap overflow-ellipsis overflow-hidden" title={t.data.title}
47
                >
48
                        {t.data.title}
49
                </div>
50
                            {t.data.title === currentPostTitle && (
51
              <span class="absolute top-1/2 right-1 transform -translate-y-1/2 text-[var(--primary)] transition-all group-hover:translate-x-1">
52
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
53
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
54
                                    </svg>
55
                                </span>
56
                            )}
57
            </a>
58
        ))}
59
    </div>
60
</WidgetLayout>

其中52-54行是默认的√图像，你可以改成自己喜欢的svg。

2. 修改`Sidebar`，让当前Post标题能从外部组件流入。#

1
interface Props {
2
  class?: string;
3
  headings?: MarkdownHeading[];
4
  category?: string;
5
  currentPostTitle?: string;
6
  series?: string;
7
}
8

9
const className = Astro.props.class;
10
const currentPostTitle = Astro.props.currentPostTitle;
11
const series = Astro.props.series;
12
---
13
<div id="sidebar" class:list={[className, "w-full"]}>
14
    <div class="flex flex-col w-full gap-4">
15
        <ProfileH />
16
    </div>
17
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 sticky top-4">
18
               <div id="series" class="flex flex-col w-full gap-4">
19
            { series && <Series series={ series }></Series> }
20
            { series && <Series series={ series } currentPostTitle={currentPostTitle} class=" mt-4"></Series> }
21
        </div>
22
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
23
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
24
    </div>
25
</div>

3. 修改`[MainGridLayout]`, 让Post的标题流入`Sidebar`#

1
interface Props {
2
  currentPostTitle?: string;
3
  title?: string;
4
  banner?: string;
5
  description?: string;
6
  lang?: string;
7
  setOGTypeArticle?: boolean;
8
  headings?: MarkdownHeading[];
9

10
  series?: string;
11
}
12

13
const {
14
  currentPostTitle,
15
  title,
16
  banner,
17
  description,
18
  lang,
19
  setOGTypeArticle,
20
  headings = [],
21
  series,
22
} = Astro.props;
23

24

25
<SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings} series={ series }></SideBar>
26
<SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}  currentPostTitle={currentPostTitle} series={ series }></SideBar>

4. 修改`[...slug]`, 让每个Post的标题流入`MainGridLayout`#

1
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings} series={entry.data.series}>
2
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings} series={entry.data.series} currentPostTitle={entry.data.title}>

添加时间分隔#

原本的系列栏左侧的时间线仅为装饰，没有显示日期分隔博文的作用，我们可以用日期为博文分组并展示。

1. 安装dayjs#

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。在命令行中敲入以下指令以在当前项目中安装：

1
  pnpm install dayjs

2. 修改`Series`组件#

1
---
2
import dayjs from "dayjs";
3

4
const seriesPosts = await getPostSeries(seriesName);
5

6
// 分组函数
7
function groupByMonth(
8
  posts: { body: string; data: BlogPostData; slug: string }[],
9
) {
10
  const groups: {
11
    [key: string]: { body: string; data: BlogPostData; slug: string }[];
12
  } = {};
13
  for (const post of posts) {
14
    // 假设 post.data.date 是 ISO 字符串
15
    const date = dayjs(post.data.published);
16
    const key = `${date.year()}-${date.month() + 1}`; // month() 从0开始
17
    if (!groups[key]) groups[key] = [];
18
    groups[key].push(post);
19
  }
20
  return groups;
21
}
22

23
const grouped = groupByMonth(seriesPosts);
24
// 生成分组后的数组，方便遍历
25
const groupedArr = Object.entries(grouped).sort((a, b) =>
26
  b[0].localeCompare(a[0]),
27
);
28
---
29
<WidgetLayout name={i18n(I18nKey.series) + " - " + series[0].data.series} id="series" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
30
    <div class="flex flex-col gap-1">
31
        {series.map(t => (
32
            <a href={getPostUrlBySlug(t.slug)}
33
                aria-label={t.data.title}
34
                class="group btn-plain h-10 w-full rounded-lg hover:text-[initial]"
35
            >
36
                <!-- dot and line -->
37
                <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
38
                    <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
39
                    bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
40
                    outline outline-4 z-50
41
                    outline-[var(--card-bg)]
42
                    group-hover:outline-[var(--btn-plain-bg-hover)]
43
                    group-active:outline-[var(--btn-plain-bg-active)]
44
                    "
45
                    ></div>
46
                </div>
47
                <!-- post title -->
48
                <div class="w-[85%] text-left font-bold
49
                    group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
50
                    text-75 pr-15 whitespace-nowrap overflow-ellipsis overflow-hidden" title={t.data.title}
51
                >
52
                        {t.data.title}
53
                </div>
54
                            {t.data.title === currentPostTitle && (
55
                                <span class="absolute top-1/2 right-2 transform -translate-y-1/2 text-[var(--primary)]">
56
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
57
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
58
                                    </svg>
59
                                </span>
60
                            )}
61
            </a>
62
        ))}
63

64
        {groupedArr.map(([month, posts]) => (
65
      <>
66
        <div class="text-xs text-gray-400 font-semibold my-2">{month}</div>
67
        {posts.map(t => (
68
          <a href={getPostUrlBySlug(t.slug)}
69
            aria-label={t.data.title}
70
            class="group btn-plain h-10 w-full rounded-lg hover:text-[initial] relative"
71
          >
72
            <!-- dot and line -->
73
            <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
74
              <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
75
                bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
76
                outline outline-4 z-50
77
                outline-[var(--card-bg)]
78
                group-hover:outline-[var(--btn-plain-bg-hover)]
79
                group-active:outline-[var(--btn-plain-bg-active)]"
80
              ></div>
81
            </div>
82
            <!-- post title -->
83
            <div class="w-[85%] text-left font-bold
84
              group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
85
              text-75 pr-15 whitespace-nowrap overflow-ellipsis overflow-hidden" title={t.data.title}
86
            >
87
              {t.data.title}
88
            </div>
89
            {t.data.title == currentPostTitle && (
90
              <span class="absolute top-1/2 right-2 transform -translate-y-1/2 text-[var(--primary)]">
91
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
92
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
93
                </svg>
94
              </span>
95
            )}
96
          </a>
97
        ))}
98
      </>
99
    ))}
100
    </div>
101
</WidgetLayout>

修改自动生成脚本#

原本的pnpm new-post "title"命令生成的模板不会自动添加series字段，同时没有填写默认语言。

1
const content = `---
2
title: ${args[0]}
3
published: ${getDate()}
4
description: ''
5
image: ''
6
tags: []
7
category: ''
8
draft: false
9
series: ''
10
lang: ''
11
lang: 'zh_CN'
12
---
13
`;

前提#

添加当前文章被选中效果#

1. 修改Series组件，添加新的Prop和被选中视觉元素#

2. 修改Sidebar，让当前Post标题能从外部组件流入。#

3. 修改[MainGridLayout], 让Post的标题流入Sidebar#

4. 修改[...slug], 让每个Post的标题流入MainGridLayout#