概要

右側の 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” とか書くと有効になる。
    ついでにUpgrading from Version 4の通りに Ver.5.x にしといた方がいいかも

    <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>
    

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

  • ここ を参考に設定
  • いや、うざいかもw

表の縦線

  • 表に横線しかないのが見ずらいので、縦線も入れてみた。けど、いまいちかも?
  • 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 "height"}}height="{{.}}"{{ else }}height="240"{{ end }} layout="fixed-height"></amp-img>
      {{ with .Get "title" }} <h4>{{.}}</h4> {{ end }}
    </a>
    
    <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 のバイナリ