1
---
2
title: 在Fuwari中添加系列栏
3
published: 2024-10-23
4
updated: 2025-02-28
5
description: 可以将同一分类下有关联的文章归类为同一个系列
6
image: "https://imagedelivery.net/yqyTMQ7rzpPmnK0CN8a9vA/7aa86014-a0d0-4089-1139-88c8a95dd000/public"
7
tags: [Fuwari, Astro, 博客]
8
category: "前端"
9
draft: false
10
lang: ""
11
series: "改造博客"
12
---

1
enum I18nKey {
2
    // ...
3
    series = 'series',
4
}
5

6
export default I18nKey

1
export const en: Translation = {
2
    // ...
3
    [Key.series]: 'Series',
4
}

1
export const es: Translation = {
2
    // ...
3
    [Key.series]: 'Serie',
4
}

1
export const ja: Translation = {
2
    // ...
3
    [Key.series]: 'シリーズ',
4
}

1
export const ko: Translation = {
2
    // ...
3
    [Key.series]: '시리즈',
4
}

1
export const ko: Translation = {
2
    // ...
3
    [Key.series]: 'ชุด',
4
}

1
export const zh_CN: Translation = {
2
    // ...
3
    [Key.series]: '系列',
4
}

1
export const zh_TW: Translation = {
2
    // ...
3
    [Key.series]: '系列',
4
}

1
export type BlogPostData = {
2
  // ...
3
  series?: string
4
  prevTitle?: string
5
  prevSlug?: string
6
  nextTitle?: string
7
  nextSlug?: string
8
}

1
const postsCollection = defineCollection({
2
  schema: z.object({
3
    // ...
4
    lang: z.string().optional().default(''),
5
    series: z.string().optional(),
6

7
    /* For internal use */
8
    prevTitle: z.string().default(''),
9
    // ...
10
  }),
11
})

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

5
</MainGridLayout>

1
---
2
interface Props {
3
  title?: string
4
  banner?: string
5
  description?: string
6
  lang?: string
7
  setOGTypeArticle?: boolean;
8
  series?: string
9
}
10

11
const { title, banner, description, lang, setOGTypeArticle, series } = Astro.props
12
---
13

14
<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"
15
    series={ series }>
16
</SideBar>

1
export async function getPostSeries(
2
  seriesName: string,
3
): Promise<{ body: string; data: BlogPostData; slug: string }[]> {
4
  const posts = (await getCollection('posts', ({ data }) => {
5
    return (
6
      (import.meta.env.PROD ? data.draft !== true : true) &&
7
      data.series === seriesName
8
    )
9
  })) as unknown as { body: string; data: BlogPostData; slug: string }[]
10

11
  posts.sort((a, b) => {
12
    const dateA = new Date(a.data.published)
13
    const dateB = new Date(b.data.published)
14
    return dateA > dateB ? 1 : -1
15
  })
16

17
  return posts
18
}

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
}
15
const className = Astro.props.class
16
const style = Astro.props.style
17
const seriesName = Astro.props.series
18

19
const series = await getPostSeries(seriesName)
20

21
const isCollapsed = series.length >= 10
22
---
23
<WidgetLayout name={i18n(I18nKey.series) + " - " + series[0].data.series} id="series" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
24
    <div class="flex flex-col gap-1">
25
        {series.map(t => (
26
            <a href={getPostUrlBySlug(t.slug)}
27
                aria-label={t.data.title}
28
                class="group btn-plain h-10 w-full rounded-lg hover:text-[initial]"
29
            >
30
                <!-- dot and line -->
31
                <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
32
                    <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
33
                    bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
34
                    outline outline-4 z-50
35
                    outline-[var(--card-bg)]
36
                    group-hover:outline-[var(--btn-plain-bg-hover)]
37
                    group-active:outline-[var(--btn-plain-bg-active)]
38
                    "
39
                    ></div>
40
                </div>
41
                <!-- post title -->
42
                <div class="w-[85%] text-left font-bold
43
                    group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
44
                    text-75 pr-15 whitespace-nowrap overflow-ellipsis overflow-hidden"
45
                >
46
                        {t.data.title}
47
                </div>
48
            </a>
49
        ))}
50
    </div>
51
</WidgetLayout>

1
---
2
import Profile from './Profile.astro'
3
import Tag from './Tags.astro'
4
import Categories from './Categories.astro'
5
import type { MarkdownHeading } from 'astro'
6
import TOC from './TOC.astro'
7
import Series from './Series.astro'
8

9
interface Props {
10
    class? : string
11
    headings? : MarkdownHeading[]
12
    series?: string
13
}
14

15
const className = Astro.props.class
16
const headings = Astro.props.headings
17
const series = Astro.props.series
18

19
---
20
<div id="sidebar" class:list={[className, "w-full"]}>
21
    <div class="flex flex-col w-full gap-4 mb-4">
22
        <Profile></Profile>
23
    </div>
24
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
25
        <div id="series" class="flex flex-col w-full gap-4">
26
            { series && <Series series={ series }></Series> }
27
        </div>
28
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
29
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
30
    </div>
31
</div>

1
export default defineConfig({
2
  integrations: [
3
    swup({
4
      theme: false,
5
      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
6
      // the default value `transition-` cause transition delay
7
      // when the Tailwind class `transition-all` is used
8
      containers: ["main", "#toc", "#series"],
9
      smoothScrolling: true,
10
      cache: true,
11
      preload: true,
12
      accessibility: true,
13
      updateHead: true,
14
      updateBodyClass: false,
15
      globalInstance: true,
16
    }),
17
  ],
18
});