ショートコード

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

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

 Saltの使い方
 2022-05-06
Hugoでは外部サイトのデータを扱う場合、getJSONやgetCSVを使った方法しかありませんでしたが、ついに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といったデータも取得できます。 {{ with resources.GetRemote "https://example.com" }} {{ .Content }} {{ end
サイト内ブログカードを作る自作ショートコード

サイト内ブログカードを作る自作ショートコード

 Saltの使い方
 2021-09-12
このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。 使い方 自サイト内のurlを指定します 自記事のブログカードは表示できません。 日本語だとconfig.ymlのsummaryLength: 200以上推奨です {{< self-blog-card "/article/salt/custom-figure" >}} 表示例 画像のリサイズ・トリミング可能な自作ショートコード このテーマ内で画像のリサイズ・トリミングができる「custom-figur
画像のリサイズ・トリミング可能な自作ショートコード

画像のリサイズ・トリミング可能な自作ショートコード

 Saltの使い方
 2021-09-11
このテーマ内で画像のリサイズ・トリミングができる「custom-figure」というショートコードを作成しました。 使い方 Hugo標準のfigureショートコードの機能をそのまま使えます HugoのImage Processingで使えるResize、Fit、Fillが使えます Image Processingについてはこちらをチェック Image processing Resize, crop, rotate, filter, and convert images. {{< custom-figure src="image.png" title="Resize スイカ" Resize="320x180" >}} {{< custom-figure src="image.png" title="Fit スイカ" Fit="320x180" >}} {{< custom-figure src="image.png"
Hugo標準のショートコード表示サンプル

Hugo標準のショートコード表示サンプル

 サンプル
 2021-09-11
Hugoで用意されているショートコード使用時の表示サンプルです figure スイカの画像 gist highlight <section id="main"> <div> <h1 id="title">{{ .Title }}</h1> {{ range .Pages }} {{ .Render "summary"}} {{ end }} </div> </section> instagram Instagramのdeveloperアカウントが必要です。自前で用意する必要あり tweet Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC — San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 vimeo youtube