<!-- article-list -->
<section class="article-list">
  <h2 class="article-list__head" itemprop="name">記事一覧</h2>
  <ol class="article-list__list">
    {{ range .Data.Pages.ByDate.Reverse }}
      {{ .Render "li" }}
    {{ end }}
  </ol>
</section>
<!-- /article-list -->

<li class="article-list__item">
  <!-- article-sneak -->
  <article class="article-sneak {{ if .Params.image }}article-sneak--thumb{{ end }}">
    <div class="article-sneak__link" onclick="location.href='{{ .RelPermalink | safeJS }}'">
      <div class="article-sneak__text article-sneak__wrapper">
        <div class="article-sneak__inner">
          <p class="article-sneak__date">
            <a href="{{ .RelPermalink }}"><time datetime="{{ .Date.Format " 2006-01-02T15:04:05Z07:00" | safeHTML }}">{{ .Date.Format "2006.01.02" }}</time></a>
          </p>
          <h3 class="article-sneak__head">
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
          </h3>
          {{ if .Params.tags }}
          <dl class="article-sneak__tags">
            <dt><i class="icon icon-tag"></i></dt>
            <dd>
              {{ range .Params.categories }}
              <a href="/categories/{{ . | urlize }}/">{{ . }}</a>
              {{ end }}
            </dd>
            <dd>
              {{ range .Params.tags }}
              <a href="/tags/{{ . | urlize }}/">{{ . }}</a>
              {{ end }}
            </dd>
          </dl>
          {{ end }}
          <p class="article-sneak__body"><a href="{{ .RelPermalink }}">{{ .Summary }}</a></p>
        </div>
      </div>
      {{ if and (.Params.image) (ne .Params.image "") }}
      <div class="article-sneak__figure article-sneak__wrapper">
        <div class="article-sneak__inner">
          <a href="{{ .RelPermalink }}"><p class="article-sneak__thumb" style="background-image: url({{ .Params.image }});">
            <img style="display:none" src="{{ .Params.image }}" alt=""/>
          </p></a>
        </div>
      </div>
      {{ end }}
    </div>
  </article>
  <!-- /article-sneak -->
</li>

+++
image = "/blog/makeowndigitalbook/stackroom.png"
+++

<!-- article-list -->
<section class="article-list ">
  <h2 class="article-list__head">{{ .Title }}の記事一覧</h2>
  <ul class="article-list__list">
    {{ range .Paginator.Pages }}
      {{ .Render "li" }}
    {{ end }}
  </ul>
  {{ partial "pagination-nav.html" . }}
</section>
<!-- /article-list -->

paginate = 20

<nav role="pagination" class="pagination-nav">

  <p class="pagination-nav__btn pagination-nav__btn--prev">
    <a class="pagination-nav__item pagination-nav__item--link" {{ if .Paginator.HasPrev }} href="{{.Paginator.Prev.URL}}" {{ end }}>
      <i class="icon icon-arrow-left"></i>前のページへ
    </a>
  </p>

  <p class="pagination-nav__btn pagination-nav__btn--summary">
    <span class="pagination-nav__item">
      {{.Paginator.PageNumber}}/{{.Paginator.TotalPages}}
    </span>
  </p>

  <p class="pagination-nav__btn pagination-nav__btn--next">
    <a class="pagination-nav__item pagination-nav__item--link" {{ if .Paginator.HasNext }} href="{{.Paginator.Next.URL}}" {{ end }}>
      次のページへ<i class="icon icon-arrow-right"></i>
    </a>
  </p>
</nav>

<!-- single.htmlの一部 -->
<section>
  <div class="body">
    {{ if eq .Params.usetoc true }}
      {{ partial "toc.html" . }}
    {{ end }}
    {{ .Content }}
  </div>
</section>

<section class="js-toc">
  <h2>目次</h2>
  <div class="toc">
  {{ .TableOfContents }}
  </div>
</section>

var $tocPlace = $('#js-toc-place');
if ($tocPlace.length === 1) {
  $('.js-toc').appendTo($tocPlace);
}

+++
usetoc = true
+++
それでもメリットはかなり大きい。

<!-- この部分に目次を挿入 -->
<div id="js-toc-place"></div>

## 必要機材

本を自炊するためにはどうしても機材が必要になる。

<!-- content-footer -->
<div class="content-footer ">
  <p class="content-footer__text">最後までお読みいただきありがとうございます!<i class="icon icon-share"></i></p>
  <ul class="content-footer__sns-list">
    <li class="content-footer__sns-item ">
      <p class="button button--sns button--sns--fb">
        <a class="button__link" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink | safeJS }}"><i class="icon icon-facebook"></i>Facebookで共有</a>
      </p>
    </li>
    <li class="content-footer__sns-item ">
      <p class="button button--sns button--sns--tw">
        <a class="button__link" href="http://twitter.com/intent/tweet?text={{ .Title | safeJS }}%20%7C%20{{ .Site.Title }}%20{{ .Permalink | safeJS }}%20%40{{ .Site.Params.twitter }}"><i class="icon icon-twitter"></i>Twitterで共有</a>
      </p>
    </li>
    <li class="content-footer__sns-item ">
      <p class="button button--sns button--sns--hb">
        <a class="button__link" href="http://b.hatena.ne.jp/entry/{{ .Permalink | safeJS }}"><i class="icon icon-hatebu"></i>はてなブックマークで共有</a>
      </p>
    </li>
    <li class="content-footer__sns-item">
      <p class="button button--sns button--sns--mail">
        <a class="button__link" href="mailto:?subject={{ .Title }}&amp;body={{ .Permalink | safeURL }}">メールで共有</a>
      </p>
    </li>
  </ul>
</div>
<!-- /content-footer -->

<!-- related-articles -->
{{ if .Params.tags }}
<nav class="related-articles js-related-articles">
  <h2 class="content-footer__text">関連記事</h2>
  <ul class="related-articles__links">
   {{ $currentTitle := .Title }}
    {{ $page_link := .RelPermalink }}
    {{ $tags := .Params.tags }}
    {{ range .Site.Pages }}
    {{ $page := . }}
    {{ $has_common_tags := intersect $tags .Params.tags | len | lt 0 }}
    {{ if and $has_common_tags (ne $page_link $page.RelPermalink) }}
    <li class="related-articles__item js-items">
      <article class="related-article">
        <a class="related-article__link" href="{{ $page.Permalink }}">
          <p class="related-article__stock">{{ $page.Date.Format "2006.01.02." }}</p>
          <h3 class="related-article__title">{{ $page.Title }}</h3>
          <p class="related-article__tags">
            {{ range $page.Params.tags }}
            <span class="related-article__tag">
            {{ . }}
            </span>
            {{ end }} </p>
        </a>
      </article>
    </li>
    {{ end }}
    {{ end }}
  </ul>
</nav>
{{ end }}
<!-- /related-articles -->

function removeEmptyRelated() {
    let $target = $('.js-related-articles');
    let items = $target.find('.js-items');

    if (items.length !== 0) {
      return false;
    }

    $target.remove();
  }

<!-- content-nav -->
<nav class="content-nav ">
  <ol class="content-nav__links">
    {{ if .PrevInSection }}
    <li class="content-nav__item">
      <p class="content-nav__label">前の投稿</p>
      <p class="button button--article-nav">
        <a class="button__link" href="{{.PrevInSection.RelPermalink}}"><i class="icon icon-arrow-left"></i>{{ .PrevInSection.Title }}</a>
      </p>
    </li>
    {{ end }}
    {{ if .NextInSection }}
    <li class="content-nav__item">
      <p class="content-nav__label">次の投稿</p>
      <p class="button button--article-nav">
        <a class="button__link" href="{{.NextInSection.RelPermalink}}"><i class="icon icon-arrow-right"></i>{{ .NextInSection.Title }}</a>
      </p>
    </li>
    {{ end }}
  </ol>
  <div class="content-nav__menu">
    <p class="button button--article-nav button--article-nav--menu">
      <a class="button__link" href="/"><i class="icon icon-menu"></i>記事一覧へ戻る</a>
    </p>
  </div>
</nav><!-- /content-nav -->

<!-- gallery-sneak -->
<div class="gallery-sneak site-hero--footer">
  <div class="gallery-sneak__inner">
    <ul class="gallery-sneak__list">
      {{ range first 3 (where (where .Site.Pages.Reverse ".Params.pickup" "true" ) "Type" "project") }}
      <li class="gallery-sneak__item">
        <a href="{{ .RelPermalink }}" style="background-image: url({{ .Params.image }});">
          <img src="{{ .Params.image }}" alt=""/>
        </a>
      </li>
      {{ end }}
      {{ range first 2 (where (where .Site.Pages ".Params.pickup" "true" ) "Type" "docs") }}
      <li class="gallery-sneak__item">
        <a href="{{ .RelPermalink }}" style="background-image: url({{ .Params.image }});">
          <img src="{{ .Params.image }}" alt=""/>
        </a>
      </li>
      {{ end }}
    </ul>
  </div>
</div>
<!-- /gallery-sneak -->

+++
type = "docs"
pickup = "true"
image = "/path/to/image.png"
+++

<meta charset="UTF-8">
<!--
トップページだけ特別ルールにする
-->
{{ if .IsHome }}
<title>{{ .Site.Title }}</title>
{{ else }}
<title>{{ .Title }} | {{ .Site.Title }}</title>
{{ end }}
<meta name="generator" content="{{ .Hugo.Generator }}">
<meta name="author" content="{{ .Site.Author.name }}">
<meta property="og:locale" content="{{ .Site.Params.localeOgp }}">
<meta property="fb:app_id" content="{{ .Site.Params.fbAppId }}">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<!--
1. `.Description`がある場合はそれを使用
2. 「1」が存在せず、nodeの場合は`.Summary`を使用
3. 「1」「2」が存在しない場合は共通の説明文を使用
-->
{{ if .Description }}
<meta name="description" content="{{ .Description }}">
<meta property="og:description" content="{{ .Description }}">
<meta name="twitter:description" content="{{ .Description }}">
{{ else }}
{{ if .IsPage }}
<meta name="description" content="{{ .Summary }}...">
<meta property="og:description" content="{{ .Summary }}...">
<meta name="twitter:description" content="{{ .Summary }}...">
{{ else }}
{{ if .IsHome }}
<meta name="description" content="{{ .Site.Params.description }}">
<meta property="og:description" content="{{ .Site.Params.description }}">
<meta name="twitter:description" content="{{ .Site.Params.description }}">
{{ else }}
<!-- 同じdescriptionのページが重複することを避ける -->
<meta name="description" content="{{ .Title }}に関連する記事の一覧です。{{ .Site.Params.description }}">
<meta property="og:description" content="{{ .Title }}に関連する記事の一覧です。{{ .Site.Params.description }}">
<meta name="twitter:description" content="{{ .Title }}に関連する記事の一覧です。{{ .Site.Params.description }}">
{{ end }}
{{ end }}
{{ end }}
<!--
記事にアイキャッチ画像がある場合はそれをOGP:imageに指定する。
存在しない場合はサイトデフォルトの画像を指定する。
-->
{{ if and (.Params.image) (ne .Params.image "") }}
<meta property="og:image" content="{{ .Params.image | absURL }}">
<meta property="twitter:image" content="{{ .Params.image | absURL }}">
{{ else }}
<meta property="og:image" content="{{ .Site.Params.ogpimage | absURL }}">
<meta property="twitter:image" content="{{ .Site.Params.ogpimage | absURL }}">
{{ end }}
<!--
記事ページはog:typeをarticleにする。公開日時、タグもキーワードとして出力
-->
{{ if .IsPage }}
<meta property="og:type" content="article">
<meta property="og:article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ range .Params.tags }}<meta property="og:article:tag" content="{{ . }}" />{{ end }}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
<meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:url" content="{{ .Permalink }}">
{{ else }}
<meta property="og:type" content="website">
{{ end }}
<!--
  トップでなければホームページへのリンクを出力
-->
{{ if ne .IsHome true }}
<link rel="index" href="/"/>
{{ end }}
<!--
  ページネーションがある場合は、next/prevを出力
-->
{{ if .IsNode }}
{{ if .Paginator.HasPrev }}
<link rel="prev" href="{{.Paginator.Prev.URL}}"/>
{{ end }}
{{ if .Paginator.HasNext }}
<link rel="next" href="{{.Paginator.Next.URL}}"/>
{{ end }}
{{ end }}
<!--
  前後の記事がある場合は、next/prevを出力
-->
{{ if .IsPage }}
{{if .PrevInSection}}<link rel="prev" href="{{ .PrevInSection.RelPermalink }}">{{end}}
{{if .NextInSection}}<link rel="next" href="{{ .NextInSection.RelPermalink }}">{{end}}
{{ end }}
<!-- HUGOが生成するAtomフィード -->
<link href="{{ .Site.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}">

<!-- ブログ記事の情報 -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "@id": "{{ .Permalink }}",
  "name": {{ .Title | jsonify }},
  "headline": {{ .Title | jsonify }},
  "description": {{ .Summary | jsonify }},
  "dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
  "datePublished": "{{ .Date.Format "2006-01-02" }}",
  "mainEntityOfPage": "{{ .Permalink }}",
  "url": "{{ .Permalink }}",
  {{ /* 字数 */ }}
  "wordCount": "{{ .WordCount }}",
  {{ /* プレーンテキストの本文 */ }}
  "articleBody": {{ .Plain | jsonify }},
  "articleSection": {{ .Section | jsonify }},
  {{ /* カテゴリをジャンルとして使用 */ }}
{{if .Params.categories }}  "genre": "{{ range .Params.categories }}{{ . }}{{ end }}",{{ end }}
  {{ /* タグをキーワードとして使用 */ }}
{{if .Params.tags }}  "keywords": "{{ range .Params.tags }}{{ . }}{{ end }}",{{ end }}
  "inLanguage": "{{ .Site.LanguageCode }}",
  "image": {
    "@type": "ImageObject",
    {{ if and (.Params.image) (ne .Params.image "") }}
    "url": "{{ .Params.image | absURL }}",
    "width": "{{ .Params.imagewidth  }}",
    "height": "{{ .Params.imageheight }}"
    {{ else }}
    "@id": "{{ .Permalink }}#ogp"
    {{ end }}
  },
  "author": { "@id": "{{ .Permalink }}#author" },
  "publisher": { "@id": "{{ .Permalink }}#org" }
}
</script>

<!-- 著者の情報 -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "@id": "{{ .Permalink }}#author",
  "name": "{{ .Site.Author.author }}",
  {{ /* この人物の説明 */ }}
  "description": {{ .Site.Author.profile | jsonify }},
  {{ /* プロフィール画像 */ }}
  "image": "{{ .Site.Author.image | absURL }}"
}
</script>

<!-- 記事にimageが設定されていない場合のデフォルト画像。OGPのデフォルト画像を流用している -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ImageObject",
  "@id": "{{ .Permalink }}#ogp",
  "url": "{{ "/images/ogp.png" | absURL }}",
  "width": "{{ .Site.Params.ogpimagewidth }}",
  "height": "{{ .Site.Params.ogpimageheight }}"
}
</script>

<!-- 出版元となる組織。個人ならサイト名とかにしておけば妥当か -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "@id": "{{ .Permalink }}#org",
  "name": "{{ .Site.Title }}",
  {{ /* logoは必須。ここにもOGP画像を使用 */ }}
  "logo": { "@id": "{{ .Permalink }}#ogp" }
}
</script>

# メイン画像へのパス
image = "/path/to/image.png"
# メイン画像のサイズ(メイン画像がない場合は不要)
imagewidth = 1024
imageheight = 768

baseurl = "http://hogehoge.com"
languageCode = "ja"
title = "サイト名を入れる"
HasCJKLanguage = true

[author]
  author = "名前"
  profile = "自己紹介"
  image = "path/to/profile/image.png"

[params]
  localeOgp = "ja"
  description = "トップページ用の説明文"
  fbAppId = "facebookのAppIDを入れる"
  ogpimage = "images/ogp.png"
  ogpimagewidth = "1200"
  opgimageheight = "620"
  twitter = "twitterCard用のユーザー名を入れる"

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ with .Title }}in {{.}} {{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    <atom:link href="{{.URL}}" rel="self" type="application/rss+xml"/>
    {{ range first 20 .Data.Pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <description>
        <p>{{ .Summary }}...</p>
        <p><a href="{{ .Permalink }}">Read More</a></p>
      </description>
    </item>
    {{ end }}
  </channel>
</rss>