概要

基本的なこと

  • themes/hugo_theme_robust/layouts 以下のファイルを layouts/ 以下に持ってくれば優先して使われる
  • layouts/_default 以下と layouts/shortcodes 以下は、.html と .amp.html を用意しておけば、AMP 用のは .amp.html を使って生成してくれる
    • layouts/partials 以下は amp で分けてくれない。 layouts/_default 以下に foo.html と foo.amp.html を置いて {{ .Render "foo" }} すれば分けれる。

右側の Latests を消す

  • layouts/partials/latests.html を作成して 0 Byte にしておくと完全に消えるようだ
  • （消さなくてもいい気がしてきたので、消すのを止めたけど）

favicon を追加

  • themes/hugo_theme_robust/layouts/partials/meta.html を layouts/partials/meta.html にコピーして

    <link rel="shortcut icon" href="{{ .Site.BaseURL }}images/favicon.ico" />

    を追加
    （{{ .Site.BaseURL }}を使うのがよさげ。相対パスでもいいけど、BaseURL が深いとずれるので。）

  • static/images/favicon.ico にアイコンを置く。

``` で囲んだ <pre> になるところの横幅が広すぎ

  • いや、そういうデザインなんだろうけど、なんか広く感じるので。
  • qiita とかも広いから、デザイン的には広いのがきれいなのかな？

  • themes/hugo_theme_robust/layouts/partials/custom.css (0 Byte) を layouts/partials/custom.css にコピーして、（元が 0 Byte なので作成するだけでいい）
    themes/hugo_theme_robust/layouts/partials/styles.css から該当部分を探して、
    （article.sn > .article-body pre のはず）
    margin: 1.5rem -2rem; を消すために以下を追記。

    article.sn > .article-body pre {
  margin: 0rem;
}

    該当部分は、Chrome で [Ctrl]+[Shift]+[J] して適当に探すしかないか。

Auther にホームページへのリンクを追加

  • themes/hugo_theme_robust/layouts/partials/author.html を layouts/partials/author.html にコピーして、 author-facts の中に、ホームページへのリンクを “fa fa-home” な絵？文字？で追加。
    ついでにメールアドレスを “fa fa-envelope” な絵で追加。
    “fa fa-home”, “fa fa-envelope” は、ここで検索できる。Ver.4.x の方で探す必要あり。
    baseof.html にある http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css は 4.5 なので 4.7 に変えた方がよさげ。
    あとは、config.toml の[params.author]セクションで homepage="http://foo.com" とか email="foo@bar.com" とか書くと有効になる。

    <div class="author">
  {{ with .thumbnail }}
  <div class="author-thumb" style="background-image: url({{ $.Site.BaseURL }}{{ . }});"></div>
  {{ end }}
  <div class="author-name">{{ .name }}</div>
  <ul class="author-facts">
    <!-- Salt added { -->
    {{ with .homepage }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa fa-home" aria-hidden="true"></i></a></li>{{ end }}
    {{ with .email }}<li><a href="mailto:{{ . }}" rel="nofollow" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>{{ end }}
    <!-- } Salt added -->
    {{ with .facebook }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>{{ end }}
    {{ with .twitter }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>{{ end }}
    {{ with .github }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>{{ end }}
  </ul>
  <div class="author-description">{{ .description | safeHTML }}</div>
</div>

  • ついでにUpgrading from Version 4の通りに Ver.5.x にしといた方がいいかも
    layouts/_default/baseof.htmlの<head>の中の Ver.4.x のを削除して、以下を追加すればここ の Ver.5.x と Ver.4.x のが使えるようになる

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/v4-shims.css">

Auther のアイコンのアニメーション

  • ここ を参考に設定
  • class=“fa fa-home” とかの中に fa-spin を追加するだけで回転したりしてくれる
  • いや、うざいかもｗ

表の縦線

  • 表に横線しかないのが見ずらいので、縦線も入れてみた。けど、いまいちかも？

  • layouts/partials/custom.css に以下を追加

    td, th {
  border: dotted 1px;
}

各 article のヘッダの画像

  • ヘッダの画像がでかすぎる感じがしたので、20rem→10remに変えてみた

  • layouts/partials/custom.css に以下を追加

    article.sn .thumb {
  height: 10rem;
}

- で <li> になったものの行間が広い

  • layouts/partials/custom.css に以下を追加

    article.sn > .article-body p {
  margin-bottom: 0px;
  margin-top: 0px;
}
    
article.sn > .article-body ul,article.sn > .article-body ol {
  margin: 0.5rem 0;
}

### で <h3> になるところの下の隙間が広い

  • layouts/partials/custom.css に以下を追加
    22.5px を 12px ぐらいに

    article.sn > .article-body h3 {
  margin-bottom: 12px;
}

Google Adsense の追加

  • themes/hugo_theme_robust/layouts/_default/summary.html を layouts/_default/summary.html にコピー

    <div class="article-body">{{ .Content }}</div>

    の {{ .Content }} の前後に Adsense のスクリプトを挿入してみた。<br> も入れないとスペースが詰まりすぎだった。

    <div class="article-body">
    
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
    
{{ .Content }}
    
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
    
</div>

    に変更（12345…のIDのところは適切に）

  • AMP 側も同様に themes/hugo_theme_robust/layouts/_default/summary.html（.amp のがない）を layouts/_default/summary.amp.html にコピー（.amp を追加）

    <amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890">
</amp-ad>
<br>
    
{{ .Content }}
    
<br>
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890">
</amp-ad>
    
</div>

画像貼り付け用の shortcode

  • figure だと等倍サイズの画像を出す方法が不明だったのと、amp 側も <img> になって <amp-img> に置き換える方法がわからなかったので作成
    • と思ったけど、img という shortcoe が用意されてて AMP 対応してた。自分はリンクも欲しいので↓を使っているが

  • ぽぽろんちさんのサイト（勝手にリンク） を参考に layouts/shortcodes/a-img.html を作成して以下を記述
    amp 側が width, height が必要なので、両方指定するようにした。

    <a href="{{ .Site.BaseURL }}/images/{{ .Get "src" }}" title="{{ .Get "title" }}" class="a-img">
  <img src= "{{ .Site.BaseURL }}/images/{{ .Get "src" }}" alt="{{ .Get "title" }}" {{ with .Get "width"}}width="{{.}}"{{ else }}width="320"{{ end }} {{ with .Get "height"}}height="{{.}}"{{ else }}height="240"{{ end }} />
  {{ with .Get "title" }} <h4>{{.}}</h4> {{ end }}
</a>

  • amp 側も layouts/shortcodes/a-img.amp.html を作成して以下を記述
    layout=“fixed-height” を指定して、height だけでサイズを指定するようにしてみたが、画像がつぶれてしまったので、width, height 両方指定するようにした。

    <a href="{{ .Site.BaseURL }}/images/{{ .Get "src" }}" title="{{ .Get "title" }}" class="a-img">
  <amp-img src= "{{ .Site.BaseURL }}/images/{{ .Get "src" }}" alt="{{ .Get "title" }}" {{ with .Get "width"}}width="{{.}}"{{ else }}width="320"{{ end }} {{ with .Get "height"}}height="{{.}}"{{ else }}height="240"{{ end }} ></amp-img>
  {{ with .Get "title" }} <h4>{{.}}</h4> {{ end }}
</a>

  • if の使い方がわからなかったけど、with で {{ else }} で場合分けできたので、それで。

  • if は isset が必要だったらしい。gohugo.io の conditions

layouts/partials 以下の AMP と通常との切り替え

  • layouts/partials 以下は、.html と .amp.html を用意しても切り替えてくれなかった
  • layouts/_default 以下に foo.html と foo.amp.html を置いて、layouts/partials 以下の html で {{ .Render "foo" }} と書けば、切り替えて render してくれた

Google Adsense の自動広告を入れる

  • themes/hugo_theme_robust/layouts/_default/baseof.html を layouts/_default/baseof.html にコピーして </head> の前に以下を挿入

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-xxxxxxxxxxxxxxxx",
          enable_page_level_ads: true
     });
</script>

  • themes/hugo_theme_robust/layouts/_default/baseof.amp.html を　layouts/_default/baseof.amp.html にコピーして </head> の前に以下を挿入

    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

    layouts/_default/summary.amp.html で、<body> の中にも埋め込む必要あり

    <amp-auto-ads type="adsense"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx">
</amp-auto-ads>

hugo のバイナリ