为世界所有美好而战

基本逻辑#

1. 展示逻辑: src/pages/friends.astro

   这个文件负责友情链接页面的HTML结构、CSS样式和JavaScript交互逻辑。 它定义了友情链接如何在页面上排列、头像如何展示、标签如何分类等。 通常情况下，你不需要修改这个文件。

2. 内容数据: src/data/friends.ts

   这个文件是友情链接内容的”数据库”。所有的友情链接都以数组的形式存储在这里。 每一个友情链接都是一个对象，包含 id, title, imgurl, desc, siteurl 和 tags 等属性。 添加、修改或删除友情链接，都在这个文件中操作。

3. 数据结构：

   语法：

   1
      interface FriendItem: 这是一个TypeScript接口，它定义了每一个友情链接必须包含的字段和它们的类型。
   2
      id: number: (必填) 友情链接的唯一标识符。必须是数字，且不能重复。通常按添加顺序递增。
   3
      title: string: (必填) 网站或博客的名称。
   4
      imgurl: string: (必填) 网站头像或Logo的URL地址。建议使用正方形图片，尺寸为640x640像素。
   5
      desc: string: (必填) 网站的简短描述。
   6
      siteurl: string: (必填) 网站的URL地址，需要包含协议（http://或https://）。
   7
      tags: string[]: (必填) 标签数组，用于分类。至少包含一个标签。
   8
      export const friendsData: FriendItem[] = [...]: 这是实际的友情链接数据数组。
   9
      数组中的每一个对象都遵循上面 FriendItem 接口的定义。
   10
      友情链接在页面上的显示顺序通常是按照数组中的顺序，但可以使用随机排序函数使其随机展示。

添加友链#

1. 准备头像图片: 获取或制作一个网站头像图片，建议使用正方形图片，尺寸为640x640像素。 推荐使用GitHub头像、网站Logo或其他代表性图片。 确保图片URL可以正常访问。

2. 编辑 src/data/friends.ts 文件: 打开 src/data/friends.ts。
   在 friendsData 数组中，复制一个现有的友情链接对象作为模板。 修改模板中的属性：

   • id: 给一个新的、唯一的数字（例如，在最后一个友情链接的id基础上加1）。
   • title: 输入网站或博客的名称。
   • imgurl: 设置头像图片的URL。
   • desc: 输入网站的简短描述，建议控制在50个字符以内。
   • siteurl: 设置网站的URL地址，确保包含协议。
   • tags: 添加适当的标签，至少一个。标签用于分类和筛选。

3. 添加一个新的友情链接。

公告位置配置：#

1. 公告组件的内容不是在 sidebarLayoutConfig 中配置的，而是在 announcementConfig 对象中配置。一般情况不需要改变,下面是公告内容的详细配置示例：
2. 名词解释:
   • type: “announcement”: 指定组件类型为公告组件，这是固定值。
   • enable: true: 控制该组件是否显示，true 为显示，false 为隐藏。
   • order: 2: 设置组件显示顺序，数值越小越靠前。通常公告组件设置为 2，显示在个人资料组件之后。
   • position: “top”: 设置组件在侧边栏内的定位方式，“top” 表示固定在顶部。
   • sidebar: “left”: 设置组件所属侧边栏，“left” 为左侧栏，“right” 为右侧栏（需配合 position: “both”）。
   • class: “onload-animation”: 组件的 CSS 类名，用于应用样式和动画效果。
   • animationDelay: 50: 组件加载动画的延迟时间（单位：毫秒），设置为 50 表示在个人资料组件后加载。

公告内容配置：#

1. 概述：公告组件的内容不是在 sidebarLayoutConfig 中配置的，而是在 announcementConfig 对象中配置。 语法 ：公告内容的详细配置示例：

   1
   export const announcementConfig: AnnouncementConfig = {
   2
   title: "Announcement", // 公告标题
   3
   content: "Welcome to my blog! This is a sample announcement.", // 公告内容
   4
   closable: true, // 允许用户关闭公告
   5
   link: {
   6
     enable: true, // 启用链接
   7
     text: "Learn More", // 链接文本
   8
     url: "/about/", // 链接 URL
   9
     external: false, // 内部链接
   10
   },

2. 内容更改：

1
export const announcementConfig: AnnouncementConfig = {
2
    title: "网站公告",
3
    content: "欢迎访问我的博客！这里会分享技术文章和生活感悟。",
4
    closable: true,
5
    link: {
6
        enable: true,
7
        text: "关于我",
8
        url: "/about/",
9
        external: false,
10
    },
11
};

音乐播放器的配置位置#

• MusicPlayer配置位于 src/config.ts 文件中的 musicPlayerConfig 对象，控制博客的音乐播放器显示设置（仅展示local模式）.

1
 路径：src/config.ts----musicPlayerConfig:
2
 内容：
3
export const musicPlayerConfig: MusicPlayerConfig = {
4
   enable: true, // 启用音乐播放器功能
5
   mode: "local", // 音乐播放器模式，可选 "local"
6
   <!-- 以下部分可以不用更改 -->
7
   meting_api:
8
     "https://www.bilibili.uno/api?server=:server&type=:type&id=:id&auth=:auth&r=:r", // Meting API 地址
9
   id: "14164869977", // 歌单ID
10
   server: "netease", // 音乐源服务器。有的meting的api源支持更多平台,<br>一般来说,netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐
11
   type: "playlist", // 播单类型
12
};

2、音乐播放器local模式的配置#

• 本地配置文件位于/src/components/widget/MusicPlayer.svelte，你可以在其中添加或修改本地音乐文件的列表,请注意相对路径还是绝对路径的问题。

1
const localPlaylist = [
2
  {
3
    id: 1,
4
    title: "ひとり上手",
5
    artist: "Kaya",
6
    cover: "assets/music/cover/hitori.jpg",
7
    url: "assets/music/url/hitori.mp3",
8
    duration: 240,
9
  },
10
  {
11
    id: 2,
12
    title: "眩耀夜行",
13
    artist: "スリーズブーケ",
14
    cover: "assets/music/cover/xryx.jpg",
15
    url: "assets/music/url/xryx.mp3",
16
    duration: 180,
17
  },
18
  {
19
    id: 3,
20
    title: "春雷の頃",
21
    artist: "22/7",
22
    cover: "assets/music/cover/cl.jpg",
23
    url: "assets/music/url/cl.mp3",
24
    duration: 200,
25
  },
26
];