JoeZhao

跨出界

Hey, I’m JoeZhao, a software engineer, and a gamer.

Hugo にゲーム情報カードを挿入する

起因:受 https://immmmm.com/hugo-shortcodes-douban/ の影響を受けて、見てみたところ特に複雑ではなく、簡単に模倣して、ゲームデータを取得して表示しました。

現在、游研社 のリンクをサポートしています(データが比較的豊富で、取得もしやすいです)。今後、時間があれば Steam 商店 などのプラットフォームをサポートすることを検討するかもしれません。

コードは複雑ではなく、直接オープンソースにしました:gameinfo-api

フレームワークは expressjs を使用しており、使い方は特に複雑ではありませんので、ドキュメントを直接見てください。

ついでに無料の Node サービスを作成しました:https://gameinfo-api2.onrender.com、制限は以下の通りです:

  • 毎月 100G のトラフィック
  • 毎月 750 時間の稼働時間
  • 15 分間トラフィックがない場合、サービスはスリープ状態になります。スリープ後に再度リクエストを受け取ると、サービスのコールドスタートに 30 秒以上かかる場合があります。

もし気にならなければ、上記の URL を直接使用できます。

使用方法と例は以下の通りです:

hugo のショートコードと 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/">\}\}

最終的な効果は以下の通りです:

Xnip2023-07-20_13-20-24

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。