1157 字

6 分钟Add commentMore actions

Fuwari添加友链页面

2024-02-22

Guides

Fuwari

/

教程

添加友链页面#

修改枚举#

在src\content\spec目录下新建文件friends.md

NOTE
这个文件是新友链页面的内容文件，类似于其他页面内容（例如关于页面）来源的 about.md 文件。添加这个文件的目的是为 “友链” 页面提供对应的内容数据，也便于通过统一方式调用内容。

在src\types\config.ts文件定位至 LinkPreset 枚举中添加以下内容

1
export enum LinkPreset {
2
  Home = 0,
3
  Archive = 1,
4
  About = 2,
5
 Friends = 3,
6
}

NOTE
定义一个新的导航链接 “Friends”。在项目结构中，LinkPreset 枚举可能用于统一管理网页导航条或特定页面布局，对应页面的标识。

国际化i18n翻译#

在src\i18n\i18nKey.ts文件末尾添加以下内容

1
author = 'author',
2
publishedAt = 'publishedAt',
3
license = 'license',
4
friends = 'friends',

NOTE
i18nKey.ts 文件负责国际化功能，这里添加了 friends 键值，表示新页面 “友链” 的国际化字符串键。后续会根据项目支持的语言为 friends 提供不同语言的翻译。

按照自己的语言，在 src\i18n\languages 目录中编辑相应语言文件,以 zh_CN.ts 为例，在末尾位置添加内容

1
[Key.author]: '作者',
2
[Key.publishedAt]: '发布于',
3
[Key.license]: '许可协议',
4
[Key.friends]: '友链',

NOTE
编辑语言文件，为新增的 friends 翻译字符串提供对应语言的翻译（这里是中文：友链）。如果项目支持其他语言，这个步骤需要在每个语言文件中添加 friends 的翻译，保证页面多语言显示功能。

在 src\constants\link-presets.ts 文件末尾添加内容

1
[LinkPreset.Archive]: {
2
  name: i18n(I18nKey.archive),
3
  url: '/archive/',
4
},
5
[LinkPreset.Friends]: {
6
  name: i18n(I18nKey.friends),
7
  url: '/friends/',
8
},

NOTE
在 LinkPreset 到页面路径的映射中，加入新的友链页面配置。 name 设置链接名称，这里使用国际化 i18n(I18nKey.friends) 来确保多语言支持。 url 指定这个页面的路径 /friends/。

创建和配置页面的Astro文件#

在src\pages目录下复制原本的about.astro文件，重命名为 friends.astro，修改该文件下的函数以及方法。

1
const aboutPost = await getEntry("spec", "about");
2

3
if (!aboutPost) {
4
  throw new Error("About page content not found");
5
}
6

7
const { Content } = await render(aboutPost);
8
---
9
<MainGridLayout title={i18n(I18nKey.about)} description={i18n(I18nKey.about)}>
10
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
11
        <div class="card-base z-10 px-9 py-6 relative w-full ">
12
            <Markdown class="mt-2">
13
                <Content />
14
            </Markdown>
15
        </div>
16
    </div>
17
</MainGridLayout>
18

19
const friendsPost = await getEntry('spec', 'friends')
20

21
if (!friendsPost) {
22
  throw new Error("Friend page content not found");
23
}
24

25
const { Content } = await render(friendsPost);
26
---
27
<MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>
28
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
29
        <div class="card-base z-10 px-9 py-6 relative w-full ">
30
            <Markdown class="mt-2">
31
                <Content />
32
            </Markdown>
33
        </div>
34
    </div>
35
</MainGridLayout>

NOTE
创建 friends.astro 作为友链页面的模板文件，复制使用了类似 about.astro 的结构代码。修改了内容获取函数，使其加载的是 friends.md 数据，而非 about.md 数据。修改了标题 title 和描述 description，指向 friends 的国际化字符串。

在导航栏中添加友链页面#

在 src\config.ts 文件找到navBarConfig枚举添加内容，注意要在 LinkPreset.About 末尾添加

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    LinkPreset.friends,
7
    {
8
      name: "GitHub",
9
      url: "https://github.com/saicaca/fuwari",
10
      external: true,
11
    },
12
  ],
13
};

NOTE
navBarConfig 用于配置页面的导航栏。在导航栏中添加新的 “友链” 入口，使用户能够通过导航直接访问这个页面。

创建卡片效果友链#

在之前创建的 friends.astro 文件中编辑

1
---
2

3
import MainGridLayout from "../layouts/MainGridLayout.astro";
4

5
import { getEntry } from "astro:content";
6
import { render } from "astro:content";
7
import Markdown from "@components/misc/Markdown.astro";
8
import I18nKey from "../i18n/i18nKey";
9
import { i18n } from "../i18n/translation";
10

11
const friendsPost = await getEntry("spec", "friends");
12

13
if (!friendsPost) {
14
  throw new Error("Friend page content not found");
15
}
16

17
const { Content } = await render(friendsPost);
18

19
const items = [
20
  {
21
    title: "Astro",
22
    imgurl: "https://avatars.githubusercontent.com/u/44914786?s=48&v=4",
23
    desc: "The web framework for content-driven websites. ⭐️ Star to support our work!",
24
    siteurl: "https://github.com/withastro/astro",
25
    tags: ["框架"],
26
  },
27
];
28
---
29
<MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>
30
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
31
        <div class="card-base z-10 px-9 py-6 relative w-full ">
32
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8 my-4">
33
                {items.map((item) => (
34
                    <div class="flex flex-nowrap items-stretch h-28 gap-4 rounded-[var(--radius-large)]">
35
                        <div class="w-28 h-28 flex-shrink-0 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-900">
36
                            <img src={item.imgurl} alt="站点头像" class="w-full h-full object-cover">
37
                        </div>
38
                        <div class="grow w-full">
39
                            <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 mb-1">{item.title}</div>
40
                            <div class="text-50 text-sm font-medium">{item.desc}</div>
41
                            <div class:list={["items-center", {"flex": true, "hidden md:flex" : false}]}>
42
                                <div class="flex flex-row flex-nowrap items-center">
43
                                    {(item.tags && item.tags.length > 0) && item.tags.map((tag,i) => (
44
                                    <div class:list={[{"hidden": i==0}, "mx-1.5 text-[var(--meta-divider)] text-sm" ]}>
45
                                        /
46
                                    </div>
47
                                    <span class="transition text-50 text-sm font-medium">
48
                                        {tag}
49
                                    </span>))}
50
                                    {!(item.tags && item.tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
51
                                </div>
52
                            </div>
53
                        </div>
54
                        <a href={item.siteurl} target="_blank" rel="noopener noreferrer"class="flex btn-regular w-[3.25rem] rounded-lg bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
55
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="transition text-[var(--primary)] text-4xl mx-auto iconify iconify--material-symbols" width="1em" height="1em" viewBox="0 0 24 24">
56
                                <path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"></path>
57
                            </svg>
58
                        </a>
59
                    </div>
60
                ))}
61
            </div>
62
            <Markdown class="mt-2">
63
                <Content />
64
            </Markdown>
65
        </div>
66
    </div>
67
</MainGridLayout>

NOTE
在 friends.astro 文件中，添加卡片效果的友链信息，包括站点名称、头像、描述、链接、标签等信息。

const items 部分就是添加的友链部分，继续添加即可。

格式可以为：

1
  {
2
    title: '',
3
    imgurl: '',
4
    desc: '',
5
    siteurl: '',
6
    tags: ['',''],
7
  },

Fuwari添加友链页面

https://p1ume.vercel.app/posts/fuwari/friend-link/

作者

p1ume

发布于

2024-02-22

许可协议

CC BY-NC-SA 4.0

AI提示词

Markdown示例