1. Home
  2. /
  3. Saltの使い方
  4. /
  5. Hugo標準のgistショートコードをテーマ内に移行しました

Hugo標準のgistショートコードをテーマ内に移行しました

Hugo標準のgistショートコードをテーマ内に移行しました

Hugo公式のgistショートコードはバージョン0.143.0で非推奨となり、将来のリリースで削除されるそうなので Hugo Theme Salt内ののショートコードとして使えるように移行しました

WARN  The "gist" shortcode was deprecated in v0.143.0 and will be removed in a future release. See https://gohugo.io/shortcodes/gist for instructions to create a replacement.

Hugo公式ページでは下記の通り

Gist shortcode

Embed a GitHub Gist in your content using the gist shortcode.


The gist shortcode was deprecated in version 0.143.0 and will be removed in a future release. To continue embedding > GitHub Gists in your content, you’ll need to create a custom shortcode:

Gist ショートコードはバージョン 0.143.0 で非推奨となり、今後のリリースで削除される予定です。コンテンツに GitHub Gist を埋め込むには、カスタムショートコードを作成する必要があります。

Create a new file: Create a file named gist.html within the layouts/shortcodes directory. Copy the source code: Paste the original source code of the gist shortcode into the newly created gist.html file. This will allow you to maintain the functionality of embedding GitHub Gists in your content after the deprecation of the original shortcode.

新規ファイルの作成: layouts/shortcodes ディレクトリ内に gist.html というファイルを作成します。ソースコードをコピー: 新規作成した gist.html ファイルに、Gist ショートコードの元のソースコードを貼り付けます。これにより、元のショートコードが非推奨になった後も、コンテンツに GitHub Gist を埋め込む機能を維持できます。

ソースコード:


layouts/shortcodes/gist.html

<script src="https://gist.github.com/{{ index .Params 0 }}/{{ index .Params 1 }}.js{{if len .Params | eq 3 }}?file={{ index .Params 2 }}{{end}}"></script>

そしてこのテーマ内では同様のショートコードを移行しているので引き続き使用可能です

{{< gist spf13 7896402 >}}

関連記事

Hugoでついに外部URLのブログカードを作れるようになった【自作ショートコード】

Hugoでついに外部URLのブログカードを作れるようになった【自作ショートコード】

Hugoでは外部サイトのデータを扱う場合、getJSONgetCSVを使った方法しかありませんでしたが、ついにv0.91でGetRemoteが実装されました。

Release v0.91.0 · gohugoio/hugo

Hugo 0.91.0 is mostly on the boring and technical side. See the list of changes below, but especially note the fix that allows passing falsy arguments to partials with the return keyword (5758c37 #...


Hugo Pipes

Hugo Pipes is Hugo's asset processing set of functions.


GetRemoteの基本

基本の使い方はこんな感じで、html以外にも外部の画像、css、jsといったデータも取得できます。