指南 - Goomba's blog

一、使用关系图

NOTE

你可以

1
//写在yaml外面,切忌写里面(使用.mdx文件撰写import语句)
2
import Graph from '../../components/Graph.astro';
3
//json选择你所用的位置
4
import graphData from '../../data/Graph/links.json';
5

6
//写在正文部分 注意一篇文章内id不要重复
7
<Graph data={graphData} id="links" showLabel={true} />
8
//showLabel可以不写,布尔值

json格式如:

1
{
2
  "categories": [
3
    { "name": "根", "color": "#74D1EA" },
4
    { "name": "友情链接", "color": "#39C5BB" },
5
    { "name": "子友情链接", "color": "#A0AEC0" }
6
  ],
7
  "nodes": [
8
    {
9
      "id": "self",
10
      "name": "Cirno_qwa 的博客",
11
      "symbolSize": 60,
12
      "category": 0,
13
      "color": "#74D1EA",
14
      "icon": "/Graph/links/avatar.jpg",
15
      "info": "Cirno_qwa制作"
16
    },
17
    {
18
      "id": "marblemc",
19
      "name": "大理石网",
20
      "symbolSize": 45,
21
      "category": 1,
22
      "color": "#39C5BB",
23
      "icon": "/Graph/links/marblemc.png",
24
      "info": "Romarku开发。<br/><a href='https://marblemc.cn' target='_blank'>点击访问</a>"
25
    },
26
    {
27
      "id": "brial",
28
      "name": "brial.cn",
29
      "symbolSize": 45,
30
      "category": 1,
31
      "color": "#39C5BB",
32
      "icon": "/Graph/links/brial.jpg",
33
      "info": "布瑞尔黑科技站点。布瑞尔老总开发。<br/><a href='https://brial.cn' target='_blank'>点击访问</a>"
34
    },
35
    {
36
      "id": "atomforge",
37
      "name": "Atomfor.ge",
38
      "symbolSize": 45,
39
      "category": 1,
40
      "color": "#39C5BB",
41
      "icon": "/Graph/links/atom.jpg",
42
      "info": "AtomForge 服务器状态监视器。<br/><a href='https://atomfor.ge' target='_blank'>点击访问</a>"
43
    },
44
    {
45
      "id": "jd",
46
      "name": "wnqs0628/KingDingPI",
47
      "symbolSize": 45,
48
      "category": 1,
49
      "color": "#39C5BB",
50
      "icon": "/Graph/links/e9.jpg",
51
      "info": "wnqs0628制作的黑科技鸡丁派。<br/>源码: <a href='https://github.com/wnqs0628/KingDingPI' target='_blank'>点击访问</a>"
52
    },
53
    {
54
      "id": "scfdev",
55
      "name": "生存斧DEV",
56
      "symbolSize": 35,
57
      "category": 2,
58
      "color": "#A0AEC0",
59
      "info": "生存斧服务器。<br/><a href='https://www.axe.ink' target='_blank'>点击访问</a>"
60
    },
61
    {
62
      "id": "scaxe",
63
      "name": "SCAXE | 猫公社",
64
      "symbolSize": 35,
65
      "category": 2,
66
      "color": "#A0AEC0",
67
      "info": "SCAXE 猫公社社区。<br/><a href='https://www.catcommune.cn' target='_blank'>点击访问</a>"
68
    },
69
    {
70
      "id": "sbcmd",
71
      "name": "讨伐爱玩电脑的CMD",
72
      "symbolSize": 45,
73
      "category": 1,
74
      "icon": "/Graph/links/anticmd.png",
75
      "color": "#39C5BB",
76
      "info": "讨伐CMD的网站<br/><a href='https://cmd.kingpop.top' target='_blank'>点击访问</a>"
77
    }
78
  ],
79
  "links": [
80
    { "source": "self", "target": "marblemc", "value": "友情链接", "info":"么么哒,Romarku" },
81
    { "source": "self", "target": "brial", "value": "友情链接" },
82
    { "source": "self", "target": "atomforge", "value": "友情链接", "color": "#74D1EA", "info":"联通皮古拉" },
83
    { "source": "self", "target": "jd", "value": "友情链接", "color": "yellow", "info":"黑科技鸡丁派" },
84
    { "source": "brial", "target": "jd", "value": "友情链接", "color": "black", "info":"黑科技鸡丁派" },
85
    { "source": "self", "target": "sbcmd", "value": "友情链接", "color": "red", "info":"专业讨伐爱玩电脑的CMD" },
86
    { "source": "marblemc", "target": "scfdev", "value": "子友情链接" },
87
    { "source": "marblemc", "target": "scaxe", "value": "子友情链接" }
88
  ]
89
}

categories -> color: 设置各个图例定义的颜色
nodes -> id: 节点的唯一身份证（必须唯一，用于连线绑定）。
nodes -> symbolSize: 圆点大小。数值越大点越大。
nodes -> icon: 填入图片路径（如 /img/logo.png），圆点就会变成该小图标！
nodes/links -> color: 设置节点/线的颜色，支持颜色单词、十六进制、RGB 和 RGBA、HSL 和 HSLA ，如果为图片节点，则会勾勒节点
nodes -> category: 填数字（从 0 开始），对应上面 categories 数组的下标。
links -> source 与 target: 分别填连线起点和终点节点的 id。
links -> value / label: 线上要显示的文字。不填线就是纯净无字的。
nodes/links -> info: 填入详情介绍，留空则不显示

如:

🔗 关系图

加载关系图中...

NOTE
Graph 组件新增功能#

字体显示开关：支持 showLabel 参数控制标签显示（默认 true）

文字随缩放缩放：文字会跟随关系图缩放而自动调整大小

平滑缩放：优化了缩放参数，使缩放更加流畅

使用示例：
1
// 显示标签（默认）
2
<Graph data={graphData} id="test" showLabel={true} />
3

4
// 隐藏标签
5
<Graph data={graphData} id="test" showLabel={false} />
Astro组件源码 (src/components/Graph.astro) - 已更新
完整的最新源码已发布，包含以下改进：

右上角新增”标签”按钮，可实时切换显示/隐藏

节点和边的文字会自动随关系图缩放而缩放（roam: true + 仿射变换）

降低 nodeScaleRatio 为 0.5，实现平滑缩放效果

支持深色/浅色主题的按钮样式

实时更新 label 状态，不影响已有数据

详见 GitHub: Graph.astro 最新版本

二、一键引用该博客的站娘

你可以在你的博客页脚/头部配置文件中添加此代码引用本博客站娘 “

在本Astro博客的/src/components/Footer.Astro中

1
---
2
import { profileConfig } from "../config";
3
import { url } from "../utils/url-utils";
4

5
const currentYear = new Date().getFullYear();
6
---
7

8
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
9
<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">
10
    <div class="transition text-50 text-sm text-center">
11
        &copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
12
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
13
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
14
        Powered by
15
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
16
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
17
    </div>
18
    <script is:inline src="/live2d_widget_v3/autoload.js"></script>
19
</div>

我也不是这方面的高玩,可能有些错误,欢迎指正

三、此博客的Style样式(因mdx原因导致在mdx大多样式错乱,如本章第三部分)

1.Miku色链接样式我是链接内容示例
模板 1：行内小标签（适合放在段落文字中间、末尾） 这个格式的圆角较小（4px），适合作为文字里的小标注、小按钮，比如“资料来源”或“点击访问”。

1
<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）确保每个链接会自动独立成行，不会和前后文死死贴在一起。

1
<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>
2
<br />

如:

链接描述右侧说明文字

3.Miku色标签样式(不可点击,照葫芦画瓢即可) 我是Tag

模板 1：行内小标签（适合放在段落文字中间、末尾） 这个格式的圆角较小（4px），适合作为纯文字的分类标注，不可点击。

1
<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）确保每个标签会自动独立成行，适合用在列表、或者突出的分类展示。

1
<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
1
//首先你要引入
2
import DownloadManager from "@components/DownloadManager.astro";
3

4
// 使用默认目录 (public/downloads/)
5
<DownloadManager />
6

7
// 使用自定义目录 (public/files/)
8
<DownloadManager dir="files" />
9

10
// 使用多层目录 (public/resources/docs/)
11
<DownloadManager dir="resources/docs" />
12

13
//文件大小
14
<DownloadManager showSize={false} />
15

16
//更新时间
17
<DownloadManager showTrack={false} />
18

19
// 黑客组合使用。，
20
<DownloadManager
21
  dir="assets/tools"
22
  showSize={true}
23
  showTrack={false}
24
/>
例如:

📂 资源下载列表 (downloads)

排序：

▶ 📁 67

▶ 📁 sbvsb

📄 9191.txt

0 Bytes

📄 111.txt

0 Bytes

📄 Brial Anti Furry.sh

779 Bytes

📄 index.html

52.07 KB

📄 logo.png

38.22 KB

📄 r18.mdx

44 Bytes

📄 测试黑客文件1111

0 Bytes