0

在 hugo 中插入游戏信息卡片

 1 year ago
source link: https://www.fun2ex.com/posts/game-info-show-api/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

在 hugo 中插入游戏信息卡片

January 31, 2023

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

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

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

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

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

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

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

使用方法和案例如下:

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

<!-- shortcode -->
{{ $dbUrl := "https://https://gameinfo-api.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 */
/* 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/">\}\}

最终效果如下:

9e4582a8698d01b3411b3b6c3185a8bd.jpg

艾尔登法环

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

–EOF–


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK