当ブログで使わせて頂いているテンプレ Tranquilpeakのhugo-tranquilpeak-theme/exampleSite/内にあるサンプルMDファイルのテンプレ内容をまとめたもの。

ぶっちゃけ公式のuser.mdの内容を自分なりに和訳しただけ。

ちょっとした使い方を見たい時の備忘録目的とする。

目次

Markdown記法関連

基本的な書き方

Markdown記法と同じ。

- [test link]() 
- **Strong text** 
- *Italic text*
- <u>Underline text</u> non elit nisl. ~~Deleted text~~ tristique
- `Sed erat diam`

リスト

定義リストは普通にHTMLタグで記述する。

<dl><dt>Definition List Title</dt><dd>This is a definition list division.</dd></dl>
Definition List Title
This is a definition list division.

数字付きリストはMarkdown記法通り。

1. list item 1
2. list item 2
3. list item 3
  1. list item 1
  2. list item 2
  3. list item 3

数字なしリストもMarkdown記法通り。

- List Item 1
- List Item 2
- List Item 3
  • List Item 1
  • List Item 2
  • List Item 3

Table

TabeleはMarkdown記法通り。

|  Header 1  | Header 2   | Header 3   |
|:----------:|------------|------------|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
Header 1Header 2Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

上付き文字・下付き文字

普通にHTMLタグで記述する。

Lorem <sup>superscript</sup>
Dolor <sub>subscript</sub>

Lorem superscript Dolor subscript

kbd(キーボードタグ)

キーボードなどの入力端末からユーザが入力することを表すためのタグ。 初めて知ったが、正直使いどころがわからない。せっかくだからこのサイトのCSSを反映させてそれっぽくしておいた。

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>

Please press Ctrl + Shift + R to re-render an MDN page.

ショートコード

hugo serverまたはhugo -D serverで表示するとエラーが起きるショートコードが含まれている為、基本的に ショートコード記述例の先頭中括弧は全角にしている。

実際の表示はhttps://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#highlight-text画像を引用している。

コードハイライト

コードブロックによる実際の表示サンプルはhugo-tranquilpeak-theme demoで見て欲しい。

コード一覧

  • ApacheConf
  • Bash
  • Coffeescript
  • C++
  • CShparp
  • CSS
  • DIFF
  • HTTP
  • INI
  • Java
  • JavaScript
  • JSON
  • Makefile
  • Markdown
  • Nginx
  • Objective-C
  • Perl
  • PHP
  • Python
  • Ruby
  • SQL
  • HTML
  • Puppet
  • Less
  • SCSS
  • Stylus
  • Go
  • Swift

Markdownでコードハイライト

alert('Hello World!');
alert('Hello World!');

shortcodeでコードハイライト

このショートコードは’hugo -D server’でエラーになる。

｛{< codeblock [title] [lang:language] [url] [link text] [additional options] >}}
code snippet
｛{< endcodeblock %}

引数の説明はココ

Tabbed code block

このショートコードは’hugo -D server’でエラーになる。

｛{< tabbed-codeblock tabbed_codeblock >}}
<!-- tab 書きたい言語1 -->
	code hoge
<!-- endtab -->
<!-- tab 書きたい言語2 -->
	code hoge
<!-- endtab -->
<!-- tab 書きたい言語3 -->
	code hoge
<!-- endtab -->
｛{< /tabbed-codeblock >}}

Image

fancyboxというjQuery のプラグインが使われているので、画像をクリックするとポップアップ画像を表示しながら、元のウィンドウも目立たぬよう背景に表示される。

｛{< image classes="[classes]" src="[/path/to/image]" thumbnail="[/path/to/thumbnail]" group="[group-name]" thumbnail-width="[width of thumbnail]" thumbnail-height="[height of thumbnail]" title="[title text]" >}}

classesでclearオプションを付けない場合、文章が画像の横に配置されてしまう。したがって特に理由がなければ必ず付けたほうが良い。

その他、引数の説明はココ

Ferrari
BMW i8 Concept

アラート

このショートコードは’hugo -D server’でエラーになる。

｛{< alert [classes] >}}
content
｛{< /alert >}}

｛{< alert danger no-icon >}} icon無しも可能 ｛{< /alert >}}

｛{< alert info >}} Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. ｛{< /alert >}}

｛{< alert success >}} Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. ｛{< /alert >}}

｛{< alert warning >}} Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. ｛{< /alert >}}

｛{< alert danger >}} Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. ｛{< /alert >}}

アラート例

Gist

｛{< gist imathis 996818 >}}

jsFiddle

｛{< jsfiddle shorttag [tabs] [skin] [width] [height] >}}

Pull Quote

文章の中に｛{< pullquote left >}} とやれば左寄りの引用 ｛{< /pullquote >}} が追加できる。

同じく｛{< pullquote right >}} とやれば右寄りの引用 ｛{< /pullquote >}} が追加できる。

文章の中に

とやれば左寄りの引用

が追加できる。

同じく

とやれば右寄りの引用

が追加できる。

ハイライトテキスト

このショートコードは’hugo -D server’でエラーになる。

｛{< hl-text [classes] >}}
content
｛{< /hl-text >}}

指定できる色一覧

  • red
  • green
  • blue
  • purple
  • orange
  • yellow
  • cyan
  • primary
  • success
  • warning
  • danger

ハイライト例

Youtube動画の埋め込み

｛{< youtube xL45JMI8IFg >}}

Vimeo動画の埋め込み

｛{< vimeo 17877190 >}}

ワイドイメージ

｛{< wide-image src="[/path/to/image]" title="[title text]" >}}
Mercedes SLSMercedes SLS

パラメータ関連

多分使わない項目

disqusIdentifier

disqusというブログにコメント機能を付けてくれるサービスに関連した項目。Hugoで公式にサポートされている機能だが、たぶん使うことは無い。 Disqusシステムでページのスレッドを検索するために使用される一意の文字列を定義します。

comments

Disqus関連。trueもfalseも試したけど特に何も無かったのでdisqusを使ってないと意味がない項目だと思う。

showxxx(記事内表示の設定)

showxxx: falseと記事内でいろいろ表示非表示を設定できるパラメータ。 例えばshowPaginationは、次ページ・前ページのボタンを表示するかしないかを記事毎に設定できる。 検索ページを自作するときぐらいじゃないと使わない。

  • showMeta (falseなら下2つを表示しない)
    • showDate (日付の表示設定)
    • showTags (タグの表示設定)
  • showActions (falseなら下2つを表示しない)
    • showPagination (記事下部にある前後のページに進むボタンの表示設定)
    • showSocial (記事下部にあるSNS系ボタンの表示設定)

keywords

検索エンジンのキーワードを定義する。Hugo構成ファイルでグローバルキーワードを定義することもできる。

clearReading

すべての記事ページでサイドバーを非表示にして、記事を全幅にして読みやすくし、ワイド画像とカバー画像を楽しむことができます。params.sidebarBehaviorが3または4に等しい場合は使用できません（true：有効、false：無効）。デフォルトの動作：テーマ設定ファイルのparams.clearReading値。

thumbnailImage

サムネ。URLを指定すればOK。

autoThumbnailImage

サムネイル画像としてサムネイル画像がない場合、投稿のギャラリーからカバー画像または最初の写真を自動的に選択する。

thumbnailImagePosition

サムネイル表示位置を設定する。

metaAlignment

メタ（タイトル、日付、カテゴリ）の配置。右、左、または中央を指定できる。デフォルトの動作は左。

coverImage

指定した画像が投稿ビュー上部にフルサイズで表示される。サムネイル画像が設定されていない場合、カバー画像もサムネイル画像として使用される。

coverSize

coverImageのサイズ設定項目。デフォルトは60％。フルで画面全体の高さを取得。

coverCaption

カバー画像の下に入れるキャプション(説明書き)の内容。

coverMeta

カバー画像下にMetaデータを表示するかしないか。

summary

たぶん記事の項目を作る。

画像をまとまったギャラリーにする。ギャラリーは必ず記事の最下部に掲載され、クリックすると動的に画像を切り替えることが出来る。

gallery:
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg "Mercedes"
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg "Lamborghini"
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg "Nissan"
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27.jpg "Mercedes"
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg "Ferrari"
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26.jpg "Lamborghini"
- //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg
Gallery 7 images