创建友链页面#

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

31 collapsed lines
1
enum I18nKey {
2
  home = "home",
3
  about = "about",
4
  archive = "archive",
5
  search = "search",
6

7
  tags = "tags",
8
  categories = "categories",
9
  recentPosts = "recentPosts",
10

11
  comments = "comments",
12

13
  untitled = "untitled",
14
  uncategorized = "uncategorized",
15
  noTags = "noTags",
16

17
  wordCount = "wordCount",
18
  wordsCount = "wordsCount",
19
  minuteCount = "minuteCount",
20
  minutesCount = "minutesCount",
21
  postCount = "postCount",
22
  postsCount = "postsCount",
23

24
  themeColor = "themeColor",
25

26
  lightMode = "lightMode",
27
  darkMode = "darkMode",
28
  systemMode = "systemMode",
29

30
  more = "more",
31

32
  author = "author",
33
  publishedAt = "publishedAt",
34
  license = "license",
35

36
  pinned = "pinned",
37

38
  series = "series",
39

40
  friends = "friends",
41
}
42

43
export default I18nKey;

34 collapsed lines
1
import Key from "../i18nKey";
2
import type { Translation } from "../translation";
3

4
export const zh_CN: Translation = {
5
  [Key.home]: "主页",
6
  [Key.about]: "关于",
7
  [Key.archive]: "归档",
8
  [Key.search]: "搜索",
9

10
  [Key.tags]: "标签",
11
  [Key.categories]: "分类",
12
  [Key.recentPosts]: "最新文章",
13

14
  [Key.comments]: "评论",
15

16
  [Key.untitled]: "无标题",
17
  [Key.uncategorized]: "未分类",
18
  [Key.noTags]: "无标签",
19

20
  [Key.wordCount]: "字",
21
  [Key.wordsCount]: "字",
22
  [Key.minuteCount]: "分钟",
23
  [Key.minutesCount]: "分钟",
24
  [Key.postCount]: "篇文章",
25
  [Key.postsCount]: "篇文章",
26

27
  [Key.themeColor]: "主题色",
28

29
  [Key.lightMode]: "亮色",
30
  [Key.darkMode]: "暗色",
31
  [Key.systemMode]: "跟随系统",
32

33
  [Key.more]: "更多",
34

35
  [Key.author]: "作者",
36
  [Key.publishedAt]: "发布于",
37
  [Key.license]: "许可协议",
38

39
  [Key.pinned]: "置顶",
40

41
  [Key.series]: "系列",
42

43
  [Key.friends]: "友链",
44
};

1
// en.ts
2
[Key.friends]: "Friends",
3

4
// es.ts
5
[Key.friends]: "Amigos",
6

7
// id.ts
8
[Key.friends]: "Teman",
9

10
// ja.ts
11
[Key.friends]: "友達",
12

13
// ko.ts
14
[Key.friends]: "친구",
15

16
// th.ts
17
[Key.friends]: "เพื่อน",
18

19
// tr.ts
20
[Key.friends]: "Arkadaşlar",
21

22
// vi.ts
23
[Key.friends]: "Bạn bè",
24

25
// zh_TW.ts
26
[Key.friends]: "友鏈",

1
export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {
2
  // ...
3
  [LinkPreset.Archive]: {
4
     name: i18n(I18nKey.archive),
5
     url: '/archive/',
6
   },
7
  [LinkPreset.Friends]: {
8
    name: i18n(I18nKey.friends),
9
    url: "/friends/",
10
   },
11
  [LinkPreset.Series]: {
12
    name: i18n(I18nKey.series),
13
    url: '/series/',
14
  },
15
}

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    LinkPreset.Friends,
7
    {
8
        // ....

1
---
2
import { getEntry, render } from "astro:content";
3
import Markdown from "@components/misc/Markdown.astro";
4
import I18nKey from "../i18n/i18nKey";
5
import { i18n } from "../i18n/translation";
6
import MainGridLayout from "../layouts/MainGridLayout.astro";
7

8
const friendsPost = await getEntry("spec", "friends");
9

10
if (!friendsPost) {
11
  throw new Error("friends page content not found");
12
}
13

14
const { Content } = await friendsPost.render();
15

16
const items = [
17
  {
18
    title: "鹏星导航",
19
    imgurl: "https://px.lzphy.top/favicon.ico",
20
    desc: "爱你所爱，一切美好！",
21
    siteurl: "https://px.lzphy.top",
22
    tags: ["html,前端"],
23
  },
24
];
25
---
26
<MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>
27
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
28
        <div class="card-base z-10 px-9 py-6 relative w-full ">
29
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8 my-4" id="friends-list">
30
                {items.map((item) => (
31
                  <div class="friend-card flex flex-nowrap items-stretch h-28 gap-4 rounded-[var(--radius-large)] hover:border-2 hover:border-blue-500 transition-all duration-300 ease-in-out cursor-pointer" data-url={item.siteurl}>
32
                    <div class="w-28 h-28 flex-shrink-0 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-900">
33
                      <img src={item.imgurl} alt="站点头像" class="w-full h-full object-cover" />
34
                    </div>
35
                    <div class="grow w-full">
36
                      <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 mb-1">{item.title}</div>
37
                      <div class="text-50 text-sm font-medium">{item.desc}</div>
38
                    </div>
39
                  </div>
40
                ))}
41
              </div>
42
            <Markdown class="mt-2">
43
                <Content />
44
            </Markdown>
45
        </div>
46
    </div>
47
 <!--在此处👇插入随机排列JS脚本 -->
48
 <script>
49
    window.addEventListener('DOMContentLoaded', () => {
50
        const container = document.getElementById('friends-list');
51
        if (!container) return;
52
        const cards = Array.from(container.children);
53
        // 洗牌算法
54
        for (let i = cards.length - 1; i > 0; i--) {
55
            const j = Math.floor(Math.random() * (i + 1));
56
            [cards[i], cards[j]] = [cards[j], cards[i]];
57
        }
58
        // 重新插入
59
        cards.forEach(card => container.appendChild(card));
60

61
        // 添加点击事件委托
62
        container.addEventListener('click', (e) => {
63
            if (e.target && e.target instanceof Element) {
64
                const friendCard = e.target.closest('.friend-card');
65
                if (friendCard) {
66
                    const url = (friendCard as HTMLElement).dataset.url;
67
                    if (url) {
68
                        window.open(url, '_blank');
69
                    }
70
                }
71
            }
72
        });
73
    });
74
    </script>
75
    <!--在此处👆插入随机排列JS脚本 -->
76

77
    <style>
78
       /* 定义一些变量 */
79
:root {
80
  --radius-large: 12px;
81
}
82

83
.friend-card:hover {
84
  border: 2px solid #007bff; /* 鼠标悬停时显示蓝色边框 */
85
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
86
}
87
.friend-card:hover .font-bold {
88
  color: #007bff; /* 鼠标悬停时标题文字显示为蓝色 */
89
}
90
    </style>
91
</MainGridLayout>