tranquilpeakを使っていく上でのTips
参考にしたサイト様
Tips一覧
◯ TOP画面の作成について
■ TOP画面を記事一覧ではなくカスタムページにしたい場合
-
layouts/index.htmlを編集する
編集前
{{ partial "head.html" . }}
<body>
<div id="blog">
{{ partial "header.html" . }}
{{ partial "sidebar.html" . }}
{{ partial "post/header-cover.html" . }}
<div id="main" data-behavior="{{ .Scratch.Get "sidebarBehavior" }}"
class="{{ with .Params.coverimage }}hasCover{{ end }}
{{ if eq .Params.covermeta "out" }}hasCoverMetaOut{{ else }}hasCoverMetaIn{{ end }}
{{ with .Params.coverCaption }}hasCoverCaption{{ end }}">
<!-- ここを編集する -->
<section class="postShorten-group main-content-wrap">
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "post") }}
{{ range $paginator.Pages }}
{{ .Render "summary" }}
{{ end }}
{{ partial "pagination.html" . }}
</section>
<!-- ここを編集する -->
{{ partial "footer.html" . }}
</div>
</div>
{{ partial "foot.html" . }}
編集後
{{ partial "head.html" . }}
<body>
<div id="blog">
{{ partial "header.html" . }}
{{ partial "sidebar.html" . }}
{{ partial "post/header-cover.html" . }}
<div id="main" data-behavior="{{ .Scratch.Get "sidebarBehavior" }}"
class="{{ with .Params.coverimage }}hasCover{{ end }}
{{ if eq .Params.covermeta "out" }}hasCoverMetaOut{{ else }}hasCoverMetaIn{{ end }}
{{ with .Params.coverCaption }}hasCoverCaption{{ end }}">
<!-- ここを編集する -->
<section class="postShorten-group main-content-wrap">
<h2 class="text-center font-weight-bold" style="margin-bottom: 20px;">Welcome to My Blog</h2>
<div>
<div style="text-align: center;">
<img class="inner" src="images/top.png" alt="" style="width: 80%; height: auto; object-fit: contain">
</div>
<div style="font-size: large; margin-top: 20px; text-align: center;">
<div>
<p>My name is Yoshiki Agatsuma.</p>
<p>I'm SoftwareEngineer in Japan.</p>
<p>英語は書けません。<br>記事は全て日本語です。</p>
<p>ゆっくりしていってください。</p>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
<a href="page/about">About me</a>
</div>
</div>
</div>
</section>
<!-- ここを編集する -->
{{ partial "footer.html" . }}
</div>
</div>
{{ partial "foot.html" . }}
■ TOP画面に新着記事一覧を表示したい場合
- 最近更新された記事（新着記事）のリストを表示する
- → 組み込み関数読み込んで表示してあげるだけ
作成日 (date) 順に 5 件のリンクを表示する
<h2>新着記事</h2>
<ul>
{{ range first 5 .Site.RegularPages.ByDate.Reverse }}
<li>
<b><a href="{{.RelPermalink}}">{{.Title}}</a></b>
<time>{{.Date.Format "2006-01-02"}}</time>
</li>
{{ end }}
</ul>
新着記事一覧に記事以外のページは含めない(draftの場合)
<h2>新着記事</h2>
<ul>
{{ range first 5 (where .Site.RegularPages.ByDate.Reverse ".Draft" "!=" true }}
<li>
<b><a href="{{.RelPermalink}}">{{.Title}}</a></b>
<time>{{.Date.Format "2006-01-02"}}</time>
</li>
{{ end }}
</ul>
記事のヘッダーに、draft: trueを設定してあげると表示されなくなる。
カスタム変数とかも使えるみたい。
新着記事一覧に記事以外のページは含めない(カスタム変数の場合)
私の場合、/page/about.mdページを新着記事一覧に含めたくなかったのですが、draft: trueだとページ自体も見れなくなってしまう(=404エラー)ので、こちらのカスタム変数を使いました。
page/about.mdの設定項目にcustomPage: trueを追加してます。
<h2>新着記事</h2>
<ul>
{{ range first 5 (where .Site.RegularPages.ByDate.Reverse ".Params.custompage" "!=" true) }}
<li>
<b><a href="{{.RelPermalink}}">{{.Title}}</a></b>
<time>{{.Date.Format "2006-01-02"}}</time>
</li>
{{ end }}
</ul>
◯ 記事の作成について
■ 記事を新規作成したいとき
$ hugo new page/[ファイル名].md
↓
# ----- 作成したファイルを編集 -----
$ hugo server -D
↓
$ git commit -a -m "commit message"
$ git push origin master
あとはNetlifyのデプロイを待つだけ。
■ 記事の冒頭に目次をつけたいとき
<!-- toc -->
これを<!--more-->の下あたりに書いておくと、記事内の#(=Head)部分を読み取って勝手に目次を作ってくれる。便利。
■ 記事内に画像を表示したいとき
tranquilpeakには、デフォルトでGalleryというものがあって、決められた書き方をすることで画像を良い感じの見せ方をしてくれる。 そして決められた書き方をしておくと、記事の最後に記事中に表示した画像の一覧を表示してくれる。 これは記事の設定項目にON/OFFの切り替えがあるので、そこで切り替えることも可能。
1. デフォの書き方の場合
{{}}で囲んでimageタグをつける
ex
{{
< image classes="fancybox right clear" src="[URL]" group="group:travel" title="[Title]" >
}}
こんな感じに
2. Galleryを使わず画像のURLのみで表示したい場合
Qiitaとかはてブはこっちの記載な気がする。
ex.
[](https://i.gyazo.com/b5828f4da252372db5fbc646daefa33b.png)