友链自助申请功能添加教程

1
name: 友链申请
2
description: 申请添加友情链接
3
title: "【友链申请】"
4
labels: ["友链"]
5
body:
6
  - type: input
7
    id: site_name
8
    attributes:
9
      label: 站点名称
10
      description: 请输入你的站点名称
11
      placeholder: 例如：我的博客
12
    validations:
13
      required: true
14

15
  - type: input
16
    id: site_url
17
    attributes:
18
      label: 站点链接
19
      description: 请输入你的站点 URL（需要 HTTPS）
20
      placeholder: https://example.com
21
    validations:
22
      required: true
23

24
  - type: input
25
    id: site_desc
26
    attributes:
27
      label: 站点描述
28
      description: 请用一句话描述你的站点
29
      placeholder: 一个关于技术分享的个人博客
30
    validations:
31
      required: true
32

33
  - type: input
34
    id: site_avatar
35
    attributes:
36
      label: 站点头像
37
      description: 请输入头像 URL（建议 640x640）
38
      placeholder: https://example.com/avatar.png
39
    validations:
40
      required: true
41

42
  - type: dropdown
43
    id: site_category
44
    attributes:
45
      label: 站点类别
46
      description: 请选择你的站点类别
47
      options:
48
        - 个人博客
49
        - 技术分享
50
        - 生活记录
51
        - 学习笔记
52
        - 作品集
53
        - 其他
54
    validations:
55
      required: true
56

57
  - type: textarea
58
    id: site_content
59
    attributes:
60
      label: 站点内容
61
      description: 请简要描述你站点的主要内容和特色
62
      placeholder: |
63
        我的博客主要分享：
64
        - 前端开发技术
65
        - 编程学习笔记
66
        - 开源项目介绍
67
    validations:
68
      required: false
69

70
  - type: checkboxes
71
    id: confirmation
72
    attributes:
73
      label: 确认事项
74
      description: 请确认以下事项
75
      options:
76
        - label: 我已将本站添加到我的友链页面
77
          required: true
78
        - label: 我的站点支持 HTTPS 访问
79
          required: true
80
        - label: 我的站点内容积极向上，无违法违规内容
81
          required: true

1
<!-- 页面标题和描述 -->
2
<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between mb-4">
3
  <div>
4
    <div class="flex items-center gap-3 mb-3">
5
      <div class="h-8 w-8 rounded-lg bg-(--primary) flex items-center justify-center text-white dark:text-black/70">
6
        <Icon name="material-symbols:group" class="text-[1.5rem]" />
7
      </div>
8
      <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">
9
        {title}
10
      </div>
11
    </div>
12
    {
13
      description && (
14
        <p class="text-base text-neutral-600 dark:text-neutral-400 leading-relaxed">
15
          {description}
16
        </p>
17
      )
18
    }
19
  </div>
20

21
  <!-- 自助申请友链按钮 -->
22
  <div class="flex shrink-0 flex-col items-start gap-2 md:items-end">
23
    <a
24
      href={friendApplyUrl}
25
      target="_blank"
26
      rel="noopener noreferrer"
27
      class="inline-flex items-center gap-2 rounded-lg bg-(--primary) px-4 py-2.5 text-sm font-medium text-white dark:text-black/70 transition-all hover:opacity-90 hover:scale-[1.02] active:scale-[0.98]"
28
    >
29
      <Icon name="material-symbols:add-link-rounded" class="text-lg" />
30
      <span>自助申请友链</span>
31
    </a>
32
    <p class="text-xs text-neutral-500 dark:text-neutral-400 md:text-right">
33
      通过 GitHub Issue 提交，系统会自动校验回链并同步收录
34
    </p>
35
  </div>
36
</div>