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
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

{{ $dbUrl := .Get 0 }}
{{ $dbApiUrl := "" }}

{{ if ( findRE `^.*neodb\.social\/.*` $dbUrl ) }}
    {{ $dbPath := replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}
    {{ $dbApiUrl = print "https://neodb.social/api/" $dbPath }}
{{ else }}
    {{ $dbApiUrl = print "https://neodb.social/api/catalog/fetch?url=" $dbUrl }}
{{ end }}

{{ with resources.GetRemote $dbApiUrl }}
    {{ with .Err }}
        {{ if hugo.IsServer }}
            {{ warnf "Failed to fetch neodb content, Please check if NeoDB is reachable: %s" . }}
            <p style="text-align: center;"><small>远程获取内容失败，请检查 NeoDB 是否可达。</small></p>
        {{ else }}
            {{ errorf "Failed to fetch neodb content, Please check if NeoDB is reachable: %s" . }}
        {{ end }}
    {{ else }}
        {{ $dbFetch := transform.Unmarshal . }}
        {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
            <div class="db-card">
                <div class="db-card-subject">
                    <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
                    <div class="db-card-content">
                        <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
                            <div class="rating">
                                {{ if $dbFetch.rating }}
                                <span class="allstardark">
                                    <span class="allstarlight" style="width:{{mul 10 $itemRating }}%"></span>
                                </span>
                                <span class="rating_nums">{{ $itemRating }}</span>
                                {{ else }}
                                    <span class="rating_nums" style="color:#737373;">评分人数不足</span>
                                {{ end }}
                            </div>
                        <div class="db-card-abstract">{{ $dbFetch.brief }}</div>
                    </div>
                    <div class="db-card-cate">{{ $dbFetch.category }}</div>
                </div>
            </div>
    {{ end }}
{{ end }}

<style>
    .db-card {
        margin: 2rem 3rem;
        background: var(--body-background);
        border-radius: 8px;
        box-shadow: var(--shadow-l1);
    }

    .db-card-subject {
        display: flex;
        align-items: flex-start;
        line-height: 1.6;
        padding: 12px;
        position: relative
    }

    .db-card-content {
        flex: 1 1 auto
    }

    .db-card-post {
        width: 96px;
        margin-right: 15px;
        display: flex;
        flex: 0 0 auto
    }

    .db-card-title {
        margin-bottom: 5px;
        font-size: 18px
    }

    .db-card-title a {
        text-decoration: none!important
    }

    .db-card-abstract,
    .db-card-comment {
        font-size: 14px;
        overflow: auto;
        max-height: 7rem
    }

    .db-card-cate {
        position: absolute;
        top: 0;
        right: 0;
        background: #f99b0170;
        padding: 1px 8px;
        font-size: small;
        font-style: italic;
        border-radius: 0 8px 0 8px;
        text-transform: capitalize
    }

    .db-card-post img {
        width: 96px!important;
        height: 128px!important;
        border-radius: 4px;
        -o-object-fit: cover;
        object-fit: cover
    }

    .rating {
        margin: 0 0 5px;
        font-size: 13px;
        line-height: 1;
        display: flex;
        align-items: center
    }

    .rating .allstardark {
        position: relative;
        color: #f99b01;
        height: 16px;
        width: 80px;
        background-size: auto 100%;
        margin-right: 8px;
        background-repeat: repeat;
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==)
    }

    .rating .allstarlight {
        position: absolute;
        left: 0;
        color: #f99b01;
        height: 16px;
        overflow: hidden;
        background-size: auto 100%;
        background-repeat: repeat;
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+)
    }

    @media(max-width: 550px) {
        .db-card {
            margin: .8rem 1rem
        }
        .db-card-comment {
            display: none
        }
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{{ $file := .Get 0 }}  
{{ $num := 4 }}  
{{ if .Get 1 }}   
    {{ $num = .Get 1 }}  
{{ end }}  
{{ $width := div 90 $num }}  
{{ $items := dict }}  
{{ with resources.Get $file }}  
    {{ $items = . | transform.Unmarshal }}  
{{ else }}  
    {{ errorf "Unable to get resource %q" $file }}  
{{ end }}  
  
<div class="work-list">  
    {{range $item := $items}}  
        <a href="{{ $item.url }}">  
            <img class="work-list-item" src="{{ $item.image }}" loading="lazy" title="{{ $item.title }}" width="{{ $width }}%">  
        </a>    
    {{end}}  
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

[  
    {  
      "title": "血源诅咒",  
      "url": "https://www.igdb.com/games/bloodborne",  
      "image": "https://images.igdb.com/igdb/image/upload/t_cover_big/co1rba.png"  
    },  
    {  
        "title": "塞尔达传说：王国之泪",  
        "url": "https://www.igdb.com/games/the-legend-of-zelda-tears-of-the-kingdom",  
        "image": "https://images.igdb.com/igdb/image/upload/t_cover_big/co5vmg.png"  
    }
]