自定义纯静态仓库卡片


45 collapsed lines
1
<html>
2
<head>
3
    <style>
4
        .project-card {
5
            width: 300px;
6
            border: 2px solid #e0e0e0;
7
            border-radius: 12px;
8
            padding: 20px;
9
            margin: 15px;
10
            background: white;
11
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
12
            font-family: Arial, sans-serif;
13
        }
14
        .project-name {
15
            font-size: 20px;
16
            font-weight: bold;
17
            margin-bottom: 10px;
18
            color: #2c3e50;
19
        }
20
        .project-description {
21
            color: #666;
22
            line-height: 1.5;
23
            margin-bottom: 15px;
24
        }
25
        .project-link {
26
            display: inline-block;
27
            background: #3498db;
28
            color: white;
29
            padding: 8px 16px;
30
            border-radius: 6px;
31
            text-decoration: none;
32
            font-weight: bold;
33
        }
34
    </style>
35
</head>
36
<body>
37
    <div class="project-card">
38
        <div class="project-name">项目名称</div>
39
        <div class="project-description">
40
            这里是项目的描述内容，可以详细说明项目的功能、特点等信息。
41
        </div>
42
        <a href="https://example.com" class="project-link">查看项目</a>
43
    </div>
44
</body>
45
</html>

📦 Author/HelloWorld

仓库描述内容，可以详细说明仓库的功能、特点等信息。

GitHub Gitee


42 collapsed lines
1
<style>
2
        .project-card {
3
            width: 300px;
4
            border: 2px solid #e0e0e0;
5
            border-radius: 12px;
6
            padding: 20px;
7
            margin: 15px;
8
            background: white;
9
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
10
            font-family: Arial, sans-serif;
11
        }
12
        .project-name {
13
            font-size: 20px;
14
            font-weight: bold;
15
            margin-bottom: 10px;
16
            color: #2c3e50;
17
        }
18
        .project-description {
19
            color: #666;
20
            line-height: 1.5;
21
            margin-bottom: 15px;
22
        }
23
        .project-link {
24
            display: inline-block;
25
            background: #3498db;
26
            color: white;
27
            padding: 8px 16px;
28
            border-radius: 6px;
29
            text-decoration: none;
30
            font-weight: bold;
31
        }
32
    </style>
33
<div class="project-card">
34
    <div class="project-name">📦 Author/HelloWorld</div>
35
    <div class="project-description">
36
        仓库描述内容，可以详细说明仓库的功能、特点等信息。
37
    </div>
38
    <div style="margin-top: 15px;">
39
        <a href="https://example.com" style="background:#333; color:white; padding:6px 12px; border-radius:4px; text-decoration:none; margin-right:8px;">GitHub</a>
40
        <a href="https://example.com" style="background:#c71d23; color:white; padding:6px 12px; border-radius:4px; text-decoration:none;">Gitee</a>
41
    </div>
42
</div>

项目标题

项目描述内容放在这里

访问项目


5 collapsed lines
1
<div style="width:280px; border:1px solid #ddd; border-radius:8px; padding:20px; background:#f9f9f9;">
2
    <div style="font-size:18px; font-weight:bold; margin-bottom:8px;">项目标题</div>
3
    <div style="color:#666; margin-bottom:15px; line-height:1.4;">项目描述内容放在这里</div>
4
    <a href="https://example.com" style="background:#007acc; color:white; padding:6px 12px; border-radius:4px; text-decoration:none;">访问项目</a>
5
</div>

进阶#

使用内联样式和硬编码内容#

NOTE
渲染有bug，自行调试

alt text


131 collapsed lines
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <style>
5
        * {
6
            margin: 0;
7
            padding: 0;
8
            box-sizing: border-box;
9
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
10
        }
11
        body {
12
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
13
            display: flex;
14
            justify-content: center;
15
            align-items: center;
16
            min-height: 100vh;
17
            padding: 20px;
18
        }
19
        .card {
20
            width: 100%;
21
            max-width: 400px;
22
            background: white;
23
            border-radius: 12px;
24
            overflow: hidden;
25
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
26
            transition: transform 0.3s, box-shadow 0.3s;
27
        }
28
        .card:hover {
29
            transform: translateY(-5px);
30
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
31
        }
32
        .card-header {
33
            color: white;
34
            padding: 20px;
35
            position: relative;
36
        }
37
        .card-title {
38
            font-size: 24px;
39
            font-weight: 700;
40
            margin-bottom: 5px;
41
        }
42
        .card-description {
43
            padding: 20px;
44
            color: #555;
45
            line-height: 1.6;
46
            border-bottom: 1px solid #eee;
47
        }
48
        .card-details {
49
            padding: 15px 20px;
50
            display: flex;
51
            justify-content: space-between;
52
            background: #f9f9f9;
53
        }
54
        .detail-item {
55
            display: flex;
56
            flex-direction: column;
57
            align-items: center;
58
        }
59
        .detail-label {
60
            font-size: 12px;
61
            color: #777;
62
            margin-bottom: 5px;
63
        }
64
        .detail-value {
65
            font-weight: 600;
66
            color: #333;
67
        }
68
        .card-footer {
69
            padding: 15px 20px;
70
            text-align: center;
71
        }
72
        .card-link {
73
            display: inline-block;
74
            color: white;
75
            padding: 10px 25px;
76
            border-radius: 6px;
77
            text-decoration: none;
78
            font-weight: 600;
79
            transition: background 0.3s, transform 0.2s;
80
        }
81
        .card-link:hover {
82
            transform: scale(1.05);
83
        }
84
        .language-badge {
85
            display: inline-block;
86
            height: 12px;
87
            width: 12px;
88
            border-radius: 50%;
89
            margin-right: 5px;
90
        }
91
        /* 编程语言样式 */
92
        .cpp { background-color: #f34b7d; }
93
        .javascript { background-color: #f1e05a; }
94
        .python { background-color: #3572A5; }
95
        .java { background-color: #b07219; }
96
        .typescript { background-color: #3178c6; }
97
        .go { background-color: #00ADD8; }
98
        .rust { background-color: #dea584; }
99
    </style>
100
</head>
101
<body>
102
    <div class="card">
103
        <!-- 在这里直接修改内容和颜色 -->
104
        <div class="card-header" style="background-color: #3498db;">
105
            <div class="card-title">Repository Name</div>
106
        </div>
107
        <div class="card-description">
108
            Repository Description
109
        </div>
110
        <div class="card-details">
111
            <div class="detail-item">
112
                <div class="detail-label">Language</div>
113
                <div class="detail-value">
114
                    <span class="language-badge cpp"></span>
115
                    C++
116
                    </br>
117
                    <span class="language-badge python"></span>
118
                    Python
119
                </div>
120
            </div>
121
            <div class="detail-item">
122
                <div class="detail-label">License</div>
123
                <div class="detail-value">MIT</div>
124
            </div>
125
        </div>
126
        <div class="card-footer">
127
            <a href="https://example.com" class="card-link" style="background-color: #3498db;">View Project</a>
128
        </div>
129
    </div>
130
</body>
131
</html>

JavaScript定义变量#

WARNING
markdown渲染不了，可能无法使用

NOTE
渲染有bug，自行调试

alt text


149 collapsed lines
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <style>
5
        /* 在这里定义变量 */
6
        .project-card {
7
            --card-color: #3498db;
8
        }
9
        * {
10
            margin: 0;
11
            padding: 0;
12
            box-sizing: border-box;
13
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
14
        }
15
        body {
16
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
17
            display: flex;
18
            justify-content: center;
19
            align-items: center;
20
            min-height: 100vh;
21
            padding: 20px;
22
        }
23
        .card {
24
            width: 100%;
25
            max-width: 400px;
26
            background: white;
27
            border-radius: 12px;
28
            overflow: hidden;
29
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
30
            transition: transform 0.3s, box-shadow 0.3s;
31
        }
32
        .card:hover {
33
            transform: translateY(-5px);
34
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
35
        }
36
        .card-header {
37
            background-color: var(--card-color, #3498db);
38
            color: white;
39
            padding: 20px;
40
            position: relative;
41
        }
42
        .card-title {
43
            font-size: 24px;
44
            font-weight: 700;
45
            margin-bottom: 5px;
46
        }
47
        .card-description {
48
            padding: 20px;
49
            color: #555;
50
            line-height: 1.6;
51
            border-bottom: 1px solid #eee;
52
        }
53
        .card-details {
54
            padding: 15px 20px;
55
            display: flex;
56
            justify-content: space-between;
57
            background: #f9f9f9;
58
        }
59
        .detail-item {
60
            display: flex;
61
            flex-direction: column;
62
            align-items: center;
63
        }
64
        .detail-label {
65
            font-size: 12px;
66
            color: #777;
67
            margin-bottom: 5px;
68
        }
69
        .detail-value {
70
            font-weight: 600;
71
            color: #333;
72
        }
73
        .card-footer {
74
            padding: 15px 20px;
75
            text-align: center;
76
        }
77
        .card-link {
78
            display: inline-block;
79
            background-color: var(--card-color, #3498db);
80
            color: white;
81
            padding: 10px 25px;
82
            border-radius: 6px;
83
            text-decoration: none;
84
            font-weight: 600;
85
            transition: background 0.3s, transform 0.2s;
86
        }
87
        .card-link:hover {
88
            transform: scale(1.05);
89
        }
90
        .language-badge {
91
            display: inline-block;
92
            height: 12px;
93
            width: 12px;
94
            border-radius: 50%;
95
            margin-right: 5px;
96
        }
97
        .cpp {
98
            background-color: #f34b7d;
99
        }
100
        .javascript {
101
            background-color: #f1e05a;
102
        }
103
        .python {
104
            background-color: #3572A5;
105
        }
106
        .java {
107
            background-color: #b07219;
108
        }
109
    </style>
110
</head>
111
<body>
112
    <div class="card project-card">
113
        <div class="card-header">
114
            <div class="card-title" id="repo-name"></div>
115
        </div>
116
        <div class="card-description" id="description">
117
        </div>
118
        <div class="card-details">
119
            <div class="detail-item">
120
                <div class="detail-label">Language</div>
121
                <div class="detail-value">
122
                    <span class="language-badge cpp"></span>
123
                    C++
124
                    </br>
125
                    <span class="language-badge python"></span>
126
                    Python
127
                </div>
128
            </div>
129
            <div class="detail-item">
130
                <div class="detail-label">License</div>
131
                <div class="detail-value" id="License"></div>
132
            </div>
133
        </div>
134
        <div class="card-footer">
135
            <a href="https://example.com" class="card-link" id="link">View Project</a>
136
        </div>
137
    </div>
138
    <script>
139
        var repoName = "Hello, World!";
140
        var repoDescription = "This is a sample repository card.";
141
        var repoLink = "https://example.com";
142
        var license = "MIT";
143
        document.getElementById("repo-name").innerText = repoName;
144
        document.getElementById("description").innerText = repoDescription;
145
        document.getElementById("License").innerText = license;
146
        document.getElementById("link").href = repoLink;
147
    </script>
148
</body>
149
</html>

实际应用#

📦 Pfolg/Plauncher

集成 Ollama 和讯飞TTS 的 Live2D 虚拟桌面助手

Gitee SourceForge


42 collapsed lines
1
<style>
2
        .project-card0 {
3
            width: 300px;
4
            border: 2px solid #e0e0e0;
5
            border-radius: 12px;
6
            padding: 20px;
7
            margin: 15px;
8
            background: #4ca496ff;
9
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
10
            font-family: Arial, sans-serif;
11
        }
12
        .project-name0 {
13
            font-size: 20px;
14
            font-weight: bold;
15
            margin-bottom: 10px;
16
            color: #ffffffff;
17
        }
18
        .project-description0 {
19
            color: #ffffffff;
20
            line-height: 1.5;
21
            margin-bottom: 15px;
22
        }
23
        .project-link0 {
24
            display: inline-block;
25
            background: #3498db;
26
            color: white;
27
            padding: 8px 16px;
28
            border-radius: 6px;
29
            text-decoration: none;
30
            font-weight: bold;
31
        }
32
    </style>
33
<div class="project-card0">
34
    <div class="project-name0">📦 Pfolg/Plauncher</div>
35
    <div class="project-description0">
36
        集成 Ollama 和 讯飞TTS 的 Live2D 虚拟桌面助手
37
    </div>
38
    <div style="margin-top: 15px;color:white;">
39
        <a href="https://gitee.com/Pfolg/plauncher" style="background:#c71d23; color:white; padding:6px 12px; border-radius:4px; text-decoration:none; margin-right:8px;">Gitee</a>
40
        <a href="https://sourceforge.net/projects/pfolg-plauncher/" style="background:#ff6600; color:white; padding:6px 12px; border-radius:4px; text-decoration:none;">SourceForge</a>
41
    </div>
42
</div>

建议只使用简单的模板，不要使用过多的css样式（大佬随意），以免与自己的博客样式冲突。

如基本样式2，只需要将css的style模块放到文件靠前部分，后面只需要使用html代码即可，可确保风格统一，界面稳定。