Cause: Inspired by https://immmmm.com/hugo-shortcodes-douban/, I found it not too complicated after taking a look, so I simply imitated it to retrieve and display game data.
Currently, it supports links from Game Research Society (which has relatively complete and easily accessible data). If I have time in the future, I may consider supporting platforms like Steam Store.
The code is not complicated and is directly open source: gameinfo-api
The framework used is expressjs, which is not too complicated to use. Just refer to the documentation.
By the way, I also created a free Node service: https://gameinfo-api2.onrender.com, with the following limitations:
- 100GB of monthly traffic
- 750 hours of monthly uptime
- If there is no traffic for more than 15 minutes, the service will go to sleep. After waking up, if it receives a request again, it may take 30 seconds or longer to cold start.
If you don't mind, you can directly use the above URL.
The usage method and example are as follows:
The Hugo shortcode and CSS are available here: 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">Release Time: {{ $db.releasetime }}</div>
</div>
<time class="post-preview--date">
Developer: {{ 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 */
Just throw it into the layouts/shortcodes directory, and then directly paste the link where you want to use it:
# Remove the backslash for actual usage
\{\{<game "https://www.yystv.cn/g/4437/">\}\}
The final effect is as follows:
--EOF--