1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

//链接页面//链接页面
@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        background: none;
        box-shadow: none;

        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
            border-radius: 10px;
            transition: transform .2s;

            &:not(:nth-child(3n)) {
                margin-right: 8px;
            }

            // 添加hover效果
            &:hover {
                transform: translateY(-3px);
                box-shadow: var(--shadow-l3);
            }
        }
    }
}

.article-list--title {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.6rem;
    margin-left: 10px;
}

.article-list--compact.links {
    // 缩小连接组标题与下面链接的距离
    margin-top: -20px;
}

.article-image>img {
    // 给文章卡片、友链卡片等的图标添加圆角
    border-radius: 10px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

[
    {
        "title": "我的网站",
        "links": [
            {
                "title": "Trrrrw's Blog",
                "description": "Spending a lifetime to taste the love and pain",
                "website": "https://www.trrw.tech/",
                "image": "https://www.trrw.tech/favicon.webp"
            },
            {
                "title": "影像档案架",
                "description": "整合原神、崩铁、绝区零的官网视频",
                "website": "https://hoyo-video.trrw.tech/",
                "image": "https://hoyo-video.trrw.tech/pwa@1024.png"
            }
        ]
    },
    {
        "title": "友链",
        "links": [
            {
                "title": "唯知笔记",
                "description": "探索知识的无限可能",
                "website": "https://note.weizwz.com",
                "image": "https://p.weizwz.com/logo_a4353391cbf0889b.webp"
            },
            {
                "title": "失迹の博客",
                "description": "猫与茶与代码与你：一位 编程 / 设计 / ACGN 爱好者的博客。",
                "website": "https://blog.reincarnatey.net/",
                "image": "https://npm.elemecdn.com/@mitr-yuzr/vno-dmego-yuzr@latest/assets/img/headimg.png"
            }
        ]
    }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

{{ define "body-class" }}article-page keep-sidebar{{ end }}
{{ define "main" }}
    {{ partial "article/article.html" . }}

    {{ range $i, $category := $.Site.Data.links }}
        <span class="article-list--title">{{ $category.title }}</span>
        <div class="article-list--compact links">
            {{ $siteResources := resources }}
            {{ range $i, $link :=  $category.links }}
                <article>
                    <a href="{{ $link.website }}" target="_blank" rel="noopener">
                        <div class="article-details">
                            <h2 class="article-title">
                                {{- $link.title -}}
                            </h2>
                            <footer class="article-time">
                                {{ with $link.description }}
                                    {{ . }}
                                {{ else }}
                                    {{ $link.website }}
                                {{ end }}
                            </footer>
                        </div>
                        {{ if $link.image }}
                            <div class="article-image">
                                <img src="{{ $link.image }}" loading="lazy" data-key="links-{{ $link.website }}">
                            </div>
                        {{ end }}
                    </a>
                </article>
            {{ end }}
        </div>
    {{ end }}

    {{ if not (eq .Params.comments false) }}
        {{ partial "comments/include" . }}
    {{ end }}

    {{ partialCached "footer/footer" . }}

{{ end }}