2021年9月
![Hugoを使い始めた人に捧げるTips11選](https://hugo-theme-salt.okdyy75.com/article/hugo/tips/thumbnail_hu850c6f5958680582ad131d7609fc6b2a_2666_640x360_fill_q75_h2_box_center_3.webp)
Hugoを使い始めた人に捧げるTips11選
Hugo
2021-09-16
1. とりあえずhugo server -Dって使ってるけどこれって何? draft: trueのコンテンツファイルも含めて出力。 詳しくはhugo server --helpでチェック 2. taxonomyとtermの違い taxonomyは「タグ」や「カテゴリー」といった分類自体 termはそのタグやカテゴリーに属する「go」とか「tips」のことです こちらのサイトが非常に分かりやすいです! https://maku77.github.io/hugo/taxonomy/basic.html 3. content配下の固定ページに共通のlayoutを使
![Go言語Tips② Hugoで使われるlayoutの正体](https://hugo-theme-salt.okdyy75.com/article/go/go-template/thumbnail_hu2cc68145f3781b3dc807c5718be0f3c2_1960_640x360_fill_q75_h2_box_center_3.webp)
Go言語Tips② Hugoで使われるlayoutの正体
Go言語
2021-09-13
Hugoで使われるlayoutですが実態はgo-templateという、いわゆるテンプレートエンジンです https://pkg.go.dev/text/template テンプレート内のハイフンありなしの違い たまにHugoテンプレート内で{{ .Title }}や{{- .Title -}}で書いてるものを見かけます この違いはハイフンを付けることで前後の空白を除去したい場合に使われます ちなみに公式ドキュメントにあります https://pkg.go.dev/text/template#hdr-Text_and_spaces 配列や連想配列の空チェック Hugoを使う際、空ではない文字列or配列
![サイト内ブログカードを作る自作ショートコード](https://hugo-theme-salt.okdyy75.com/article/salt/self-blog-card/thumbnail_hu887fde30b154802a30332967b448fbb6_8526_640x360_fill_q75_h2_box_center_3.webp)
サイト内ブログカードを作る自作ショートコード
Saltの使い方
2021-09-12
このテーマ内でサイト内ブログカードを作れる「self-blog-card」というショートコードを作成しました。 使い方 自サイト内のurlを指定します 自記事のブログカードは表示できません。 日本語だとconfig.ymlのsummaryLength: 200以上推奨です {{< self-blog-card "/article/salt/custom-figure" >}} 表示例 画像のリサイズ・トリミング可能な自作ショートコード このテーマ内で画像のリサイズ・トリミングができる「custom-figur
![画像のリサイズ・トリミング可能な自作ショートコード](https://hugo-theme-salt.okdyy75.com/article/salt/custom-figure/thumbnail_huabbb313cfc6fe0189548b2f94140ad9f_14559_640x360_fill_q75_h2_box_center_3.webp)
画像のリサイズ・トリミング可能な自作ショートコード
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標準のショートコード表示サンプル](https://hugo-theme-salt.okdyy75.com/article/sample/hugo-shortcode/thumbnail_hu3e76b4d1d3cd4901770e54ca242e78fa_5891_640x360_fill_q75_h2_box_center_3.webp)
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
![マークダウン表示サンプル](https://hugo-theme-salt.okdyy75.com/article/sample/markdown/thumbnail_hu8b2715e95ad414c90d2dcb05e7a44358_7366_640x360_fill_q75_h2_box_center_3.webp)
マークダウン表示サンプル
サンプル
2021-09-11
マークダウンで記事作成時の表示サンプルです Block Elements Headers 見出し 先頭に#をレベルの数だけ記述します。 # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 見出し1 見出し2 見出し3 見出し4 見出し5 見出し6 Block 段落 空白行を挟むことで段落となります。 段落1 (空行) 段落2 段落1 段落2 Br 改行 改行の前に半角スペース を2つ記述します。 hoge fuga(スペース2つ) piyo hoge fuga piyo Blockquotes 引用 先頭に>を記述します。ネストは>