在 hugo 中插入游戏信息卡片

起因：受到 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

Copy

{{ $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 }}




{{ $db.name }}


{{ $score }}
发售时间: {{ $db.releasetime }}


产商： {{ range $production_key, $production := $db.production }} {{ if eq $production_key 0 }} {{ $production.name }} {{ else }} / {{ $production.name }} {{ end }} {{ end }}

{{ range $tags := $db.tags }}
{{ $tags.name }}
{{ end }}


{{ $db.brief | plainify }}




CSS：

Copy
/* 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 目录就可以，然后在需要使用的地方直接贴入链接即可：

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

最终效果如下：

--EOF--