起因:受到 https://immmmm.com/hugo-shortcodes-douban/ 的启发,看了一下也不是特别复杂,简单仿照了一下,获取游戏数据并展示。

目前支持游研社的链接(数据相对比较全,也比较好获取),后续有空的话可能会考虑一下支持一下 Steam 商店 之类的平台。

代码不复杂,直接开源了:gameinfo-api

框架使用的是 expressjs,使用起来并不复杂,直接看文档吧。

顺便撸了一个免费的 Node 服务:https://gameinfo-api2.onrender.com,限制如下:

  • 每月 100G 流量
  • 每月 750 小时的时候时间
  • 超过 15 分钟没有流量的话,服务会被睡眠,睡眠后如果重新收到请求,服务冷启动的时间可能需要 30s 或者更长的时间

如果不嫌弃的话,可以直接使用以上的 URL。

使用方法和案例如下:

hugo 的 shortcode 和 CSS 在此:https://gist.github.com/bobolo2ex/7ffd163cc99d7891c8c362b19b632b34

<!-- shortcode -->
{{ $dbUrl := "https://gameinfo-api2.onrender.com/" }} {{ $dbID := replaceRE `.*yystv.cn/g/([0-9]+)/.*` "$1" (.Get 0) }} {{ $db := getJSON $dbUrl "yys/v1/" $dbID }} {{ $score := div (int $db.score) 10.0 }}
<div class="post-preview game">
    <img referrer-policy="no-referrer" loading="lazy" class="post-preview--image" src="{{ $db.cover }}" />
    <div class="post-preview--meta">
        <div class="post-preview--middle">
            <h4 class="post-preview--title"><a target="_blank" href="{{ .Get 0 }}">{{ $db.name }}</a></h4>
            <div class="rating">
                <div class="rating-star allstar{{math.Round $score }}"></div>
                <div class="rating-average">{{ $score }}</div>
                <div class="release-time">发售时间: {{ $db.releasetime }}</div>
            </div>
            <time class="post-preview--date">
                产商: {{ range $production_key, $production := $db.production }} {{ if eq $production_key 0 }} {{ $production.name }} {{ else }} / {{ $production.name }} {{ end }} {{ end }}
                <span class="post-preview--tags">
                    {{ range $tags := $db.tags }}
                    <span class="post-preview--tag">{{ $tags.name }}</span>
                    {{ end }}
                </span>
            </time>
            <section style="max-height: 75px; overflow: hidden" class="post-preview--excerpt">{{ $db.brief | plainify }}</section>
        </div>
    </div>
</div>

CSS:

/* CSS */
/* post-preview --------*/.post-preview{max-width:680px;height:200px;margin:1em auto;position:relative;display:flex;background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.25),0 0 1px rgba(0, 0, 0, 0.25)}.post-preview img{margin:0}.post-preview--meta{width:78%;padding:25px;overflow:hidden}.post-preview--middle{line-height:28px}.post-preview--title{font-size:18px;margin:0 !important}.post-preview--title a{text-decoration:none}.post-preview--date{font-size:14px;color:#999}.post-preview--excerpt{font-size:14px;line-height:1.825}.post-preview--excerpt p{display:inline;margin:0}.book .post-preview--image{object-fit:cover;height:auto;width:22%;float:right;border-top-right-radius:8px !important;border-bottom-right-radius:8px !important;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.movie .post-preview--image{object-fit:cover;height:auto;width:22%;float:right;border-top-left-radius:8px !important;border-bottom-left-radius:8px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}@media (max-width: 550px){.post-preview{width:95%;height:120px}.post-preview--meta{padding:15px}.post-preview--image{height:120px !important}.post-preview--excerpt{display:none}.post-preview--middle{line-height:19px}}.post-preview--tags{}.post-preview--tag{color:#3b3d42;background:#999;font-size:12px;padding:2px}.rating{display:block;line-height:15px;margin-top:5px}.release-time{display:inline-block;padding-left:10px;font-size:13px;color:#777}.rating-star{display:inline-block;width:75px;height:15px;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAClCAYAAAAUAAAYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5xJREFUeNrs3T9rFEEcxvG7qEQIglaCICKkin9AUEtBKxU7wS61VlYivgWj70TtNFj5BqzE7qxEWwsxKIoYn4UtluFmbm8nczvzm+/BjxyuDwNzu3uXD0+46f7LC5PA45Hm+WTYw1x2LRDc0jzTXB+wqMlsaLPutz8fDFjYZHYauAz3NBvt83XNnyUWNpn1nVm3OsHmsb3EomazzZnVXKMPNcc0xzUnNKc0Rzv/77fms+Z7O3vt9b1eU7bZrNN68l5zcolX4ofmsuZXTdnmMvyi2dR86Bmcac62P6vKrnVubpc0bxYE32nOab45N8YqsvPeDfcD4SOav4HjprPuu+H5BTt9LXDMfNbdLPfT678Fx6vKupt1o/O8+R3pkOaJ5/iktqx7z/qp+aq5q/nY+fczmheaK03Gs7D5rLtZdzSvA6/Ebc2u55j57HQB0TzW7AzkjiKzny6+2hlKNE8juMNcFqKBaIZndRlCNBBNgmx7ZkE0fbLtZkE0EA1EM17WuQwhGogGooFoss6296y52cNO+J6HLJoPaFdbsvA9zGerIxrPh85eWYgGooFoDiQbuAxp0UA0EVmdWbRo+ma1WbRoIBqIZtzsnHdDWjQQDUQD0WSbde5ZS2UhmtqJJtSEiVkXooFoIJre2VATJmZdiKZ2ogk1YSb8oVMvDeUPnSAaiCaPJkzMuhANRAPRQDQpsqEmTMy6EI11oolpwkA0EA1EcyDZmCYMRAPR+LMxTZjqiCamCQPRQDQQzehNGIgGooFoIJpVZ2OaMBBN7USTqgkD0UA0EE3vbKomDERTO9GkasKYJJpUTRiIBqKBaEZvwkA0EA1EA9GkyKZqwkA01olmrCYMRAPRQDR9LkO+0QmiKbAJUyTRjNWEgWggGohm9CYMRAPRQDQQzZDsWE0YiMYC0eTYhIFoIJrKiCbHJgxEY4FocmzCZEs0OTZhIBqIpjKiybEJA9FANBANROPL5tiEgWhKIJoSmzAQDURjjGhKbMJANCUQTYlNmNGIpsQmDEQD0RgjmhKbMBANRAPR1Es0JTZhIJpciMZaEwaigWgKJBprTRiIJheisdaESUo01powEA1EUyDRWGvCQDQQDURjm2isNWEgmlURzWw2q4pZIBqIJkOiCVyGJpkFolkV0ejMMvel28mIRptl7ku3IRqIpjCimfNuaJpZIBqIBqIpm2ice5Z5ZonJupvVkMRu4JW4qXnrOWY++1+AAQBw9BJSCTeN9wAAAABJRU5ErkJggg==);overflow:hidden}.allstar10{background-position:0px 0px}.allstar9{background-position:0px -15px}.allstar8{background-position:0px -30px}.allstar7{background-position:0px -45px}.allstar6{background-position:0px -60px}.allstar5{background-position:0px -75px}.allstar4{background-position:0px -90px}.allstar3{background-position:0px -105px}.allstar2{background-position:0px -120px}.allstar1{background-position:0px -135px}.allstar0{background-position:0px -150px}.rating-average{color:#777;display:inline-block;font-size:13px;margin-left:10px}.dark .post-preview{background:#3b3d42}/* post-preview -------- end */

直接丢到 layouts/shortcodes 目录就可以,然后在需要使用的地方直接贴入链接即可:

# 实际使用请去掉反斜杠
\{\{<game "https://www.yystv.cn/g/4437/">\}\}

最终效果如下:

艾尔登法环

9.5
发售时间: 2022-02-25
艾尔登法环是以正统黑暗奇幻世界为舞台的动作RPG游戏。 走进辽阔的场景与地下迷宫探索未知,挑战困难重重的险境,享受克服困境时的成就感吧。 不仅如此,登场角色之间的利害关系谱成的群像剧,更是不容错过。

–EOF–