一、使用关系图
NOTE两种使用方式（任选其一）
方式一（推荐）：通过
graph属性自动加载数据
graph属性值对应public/data/Graph/目录下的 JSON 文件（不含.json后缀，带也行）。- 组件会在客户端自动请求
/api/graph?board=links获取数据，无需手动import，彻底解决构建路径问题。方式二（兼容旧版）：通过
data属性传入数据旧方式需自行配置 Vite 别名将
/data映射到public/data，新方式无需任何配置，更简单可靠。参数说明
参数 类型 默认值 说明 graphstring'links'JSON 文件名（自动去 .json），组件会调用/api/graph?board=xxx加载dataobject– 直接传入数据对象，若同时提供 graph和data，优先使用dataidstring'main'容器 ID，同一页面多个图表需唯一 showLabelbooleantrue是否默认显示节点/边标签 JSON 数据格式 将关系图数据保存在
public/data/Graph/目录下，例如links.json，格式如下：字段说明
categories：分类数组，color用于图例和节点默认颜色（可选）。nodes：节点数组。
id：必须，节点唯一标识。name：显示名称。symbolSize：圆点大小（数值越大越大）。category：数字，对应categories的下标（从 0 开始）。icon：图片 URL（如/img/logo.png），节点将显示为图片。color：节点颜色（支持 CSS 颜色值）。info：悬浮提示（支持 HTML）。links：边数组。
source/target：节点的id。value/label：边上显示的文字。color：线条颜色。info：悬浮提示（支持 HTML）。示例
🔗 关系图
加载关系图中...更新说明
- 新版
graph属性：无需import数据，组件自动请求/api/graph，彻底消除构建路径问题。- 完整交互保留：缩放、拖拽、标签切换、深色/浅色主题自适应、触摸支持，所有功能与旧版一致。
- 兼容性：同时保留
data属性，旧代码无需修改，但推荐迁移到graph方式。如有疑问，请参考 Graph.astro 源码
二、一键引用该博客的站娘
你可以在你的博客页脚/头部配置文件中添加此代码引用本博客站娘 “
在本Astro博客的/src/components/Footer.Astro中
---import { profileConfig } from "../config";import { url } from "../utils/url-utils";
const currentYear = new Date().getFullYear();---
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div><div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6"> <div class="transition text-50 text-sm text-center"> © <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. / <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> / <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br> Powered by <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> & <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a> </div> <script is:inline src="/live2d_widget_v3/autoload.js"></script></div>我也不是这方面的高玩,可能有些错误,欢迎指正
三、此博客的Style样式(因mdx原因导致在mdx大多样式错乱,如本章第三部分)
1.Miku色链接样式我是链接内容示例
模板 1：行内小标签（适合放在段落文字中间、末尾）
这个格式的圆角较小（4px），适合作为文字里的小标注、小按钮，比如“资料来源”或“点击访问”。
<mark style="background-color: #39C5BB; padding: 2px 6px; border-radius: 4px 0 0 4px;"><a href="网址" style="color: white; text-decoration: none; font-weight: bold;target='_blank';">链接描述</a></mark><mark style="background-color: #FFB6C1; padding: 2px 6px; border-radius: 0 4px 4px 0; color: white; font-size: 0.9em;"><a href="网址" style="color: white; text-decoration: none; font-weight: bold;target='_blank';">右侧说明文字</a></mark>模板 2：独立行大标签（最适合“友情链接”或底部列表） 这个格式的圆角更大一些（6px）确保每个链接会自动独立成行，不会和前后文死死贴在一起。
<mark style="background-color: #39C5BB; padding: 4px 10px; border-radius: 6px 0 0 6px;"><a href="网址" style="color: white; text-decoration: none; font-weight: bold;target='_blank';">链接描述</a></mark><mark style="background-color: #FFB6C1; padding: 4px 10px; border-radius: 0 6px 6px 0; color: white; font-size: 0.9em;font-weight: bold;">右侧说明文字</mark><br />链接描述 右侧说明文字如:
3.Miku色标签样式(不可点击,照葫芦画瓢即可) 我是Tag
模板 1：行内小标签（适合放在段落文字中间、末尾） 这个格式的圆角较小（4px），适合作为纯文字的分类标注，不可点击。
<mark style="background-color: #39C5BB; padding: 2px 6px; border-radius: 4px 0 0 4px; color: white; font-weight: bold;">左侧文字</mark><mark style="background-color: #FFB6C1; padding: 2px 6px; border-radius: 0 4px 4px 0; color: white; font-size: 0.9em; font-weight: bold;">右侧文字</mark>如：
左侧文字右侧文字
模板 2：独立行大标签 这个格式的圆角更大一些（6px）确保每个标签会自动独立成行，适合用在列表、或者突出的分类展示。
<mark style="background-color: #39C5BB; padding: 4px 10px; border-radius: 6px 0 0 6px; color: white; font-weight: bold;">左侧文字</mark><mark style="background-color: #FFB6C1; padding: 4px 10px; border-radius: 0 6px 6px 0; color: white; font-size: 0.9em; font-weight: bold;">右侧文字</mark>如：
左侧文字右侧文字
四、此博客的黑客下载管理器
IMPORTANT在本地运行时会自动读取/public/下的文件,默认是其下的downloads文件夹 如果构建后则会读取dist根目录下的文件,默认是其下的downloads文件夹
NOTE例如:
📂 资源下载列表 (downloads)排序：
▶ 📁 rbmk
▶ 📁 yZzzzl311
▶ 📁 Romarku扫福瑞创造服存档
五、Board 组件快速使用手册
引用组件
在 .astro 页面中引入并引用：
import Board from "src/components/Board.astro"; //引入
<Board board="th.json" sort="votes-desc" /> //使用排行榜IMPORTANT修改引用值
board：对应src/data/Board/下的 JSON 文件名（可带.json后缀，也可不带）。修改此值可切换不同榜单。sort：默认排序方式，支持以下值：
votes-desc（票数高→低，默认）votes-asc（票数低→高）alpha-asc（名称 A→Z）alpha-desc（名称 Z→A）date-desc（最新在前）date-asc（最早在前）
JSON 数据格式
每个榜单一个 JSON 文件，存放在 src/data/Board/，结构如下：
{ "title": "东方Project人气角色排行榜", "showAvatar": true, "defaultDotColor": "#FFB6C1", "items": [ { "id": "1a2b3", "title": "博丽灵梦", "votes": 1024, "createdAt": "2025-01-01T00:00:00Z", "ips": [], "avatar": "reimu.jpg", "dotColor": "" }, { "id": "4c5d6", "title": "雾雨魔理沙", "votes": 987, "createdAt": "2025-01-02T00:00:00Z", "ips": [], "avatar": "marisa.jpg", "dotColor": "" }, { "id": "7e8f9", "title": "十六夜咲夜", "votes": 856, "createdAt": "2025-01-03T00:00:00Z", "ips": [], "avatar": "", "dotColor": "#C0C0C0" }, { "id": "a1b2c", "title": "蕾米莉亚·斯卡蕾特", "votes": 812, "createdAt": "2025-01-04T00:00:00Z", "ips": [], "avatar": "", "dotColor": "#DC143C" } ]}IMPORTANT字段说明：
title：榜单标题（可选）showAvatar：是否显示头像（true/false）defaultDotColor：默认圆点颜色（CSS 颜色，无头像时使用）items：榜单项目数组，每个项目需包含：
id,title,votes,createdAt,ips（系统维护）avatar：头像文件名，需放在public/Board/{board}/下dotColor：该项目专属圆点颜色，优先级高于默认色
IMPORTANT如果想创建个新json表,初始内容可以为:
或者最简单:
终上所述可得:
加载中...
排序：