このサイトの構築システム

このサイトではコンテンツ管理システムにhugoを使い、テーマにPaperModを使用しています。以下のページでも少し触れています。

とはいえそのまま使っているのではなく、サイト公開時にちょこちょこと手を入れました。

このあたりは自分以外にもやりたくなる方が多そうなので、変更した箇所を（その名の通り）「記録ノート」として残しておきます。

変更箇所

SCSS

scssを使いたかったので、変更用ヘッダファイルに以下を記載しました。

layouts/partials/extend_head.html

{{ $scssOptions := (dict "targetPath" "css/main.css" "outputStyle" "expanded" "enableSourceMap" true) }}
{{ $scss := resources.Get "scss/main.scss" | toCSS $scssOptions }}
<link rel="stylesheet" href="{{ $scss.Permalink }}">

文字サイズ

標準は18pxでやや大きく感じたので、pcは17px,SPは16pxに変更しました。併せてヘッダの余白なども調整しました。

元テーマに沿ってピクセル単位で指定していますが、scss使うならそれらしくフォント単位を変更するのもアリだと思います。ヘッダ周りのマージンは単位をemに変えました。

ブログカード

こちらのサイトを参考にブログカードを入れました。

saltテーマですが、参考になる処理が多々ありますので、ぜひソースを確認することをおすすめします。

サムネイル部分の処理は元処理だとルートにファイルが置かれてしまったので、以下の様に変えています。

{{- $thumbnail_url := "" -}}
{{- $tempname := $image -}}
{{- $tempname = replace $tempname "/" "" -}}
{{- $tempname = replace $tempname ":" "" -}}
{{- $tempname = printf "blogcard/%s" $tempname -}}
{{- with $image -}}
    {{- with $thumbnail := resources.GetRemote $image |  resources.Copy $tempname -}}
        {{- with $thumbnail.Err -}}
            {{- warnf "%s" . -}}{{- . -}}
        {{- else -}}
            {{- $thumbnail_url = $thumbnail.RelPermalink -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

resources.GetRemoteで取得したリソースをそのままresources.Copyでブログカード用の領域にコピーしています。「/」と「:」を取るのはファイル名の処理のためです。
特に画像の最適化は行っていませんが、縮小やフォーマットを変えてもよいでしょう。

アイキャッチ(cover)表示

画像をバーンとだすのが好きなので、以下の様な感じで横100vwで表示するようにしましたが、気になるようならもうちょっと小さいサイズにするかもです。

.post-single {
	.entry-cover {
		margin: 0 calc(50% - 50vw);
		margin-bottom: 3em;
		width: 100vw;
		img {
			border-radius: 0;
		}
	}
}

ちなみに投稿時のcover指定はこんな感じ。

relative: trueを入れないとogのimage指定がうまく行きませんでした。

cover:
  image: "image-20230113083926940.png"
  relative: true

アイキャッチ画像はPaperMod側で自動で複数解像度を生成してくれるのでそれに乗っかっています。

カバー表示ですがテンプレート側でsizesの指定が行われています。

themes/PaperMod/layouts/partials/cover.html

                    {{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}" 
            sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}"
            width="{{ $cover.Width }}" height="{{ $cover.Height }}">

sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}"の部分があると、上の大画面化の影響で表示されるのが低い解像度どまりになってしまうかもしれません。

自分はこの行を削除したファイルをlayouts/partials/cover.htmlに設置しました。

ライトボックス

以下を利用しました。

ダウンロードしたファイルはstaticフォルダにコピーしておきます。

/static/lightbox/css
/static/lightbox/images
/static/lightbox/js

extend_headに指定を追加します。

layouts/partials/extend_head.html

<link href="{{ .Site.BaseURL }}lightbox/css/lightbox.min.css" rel="stylesheet" /> 

同様にフッターにも記載します。

layouts/partials/extend_footer.html

<script src="{{ .Site.BaseURL }}lightbox/js/lightbox-plus-jquery.min.js"></script>

この時に自分が作成したサイト用のjsを<script src="{{ .Site.BaseURL }}js/site.js"></script>みたいな感じで追加してもよいでしょう。

あわせてショートコードも追加しておきます。
layouts/shortcodes/thm_link.html

<figure class="{{ .Get "class" }}">
  <div class="img-wrapper">
    <a href="{{ .Get "link" }}" data-lightbox="{{ .Get "data-lightbox" }}" data-title="{{ .Get "data-title" }}">
      <img src="{{ .Get "src" }}" width="{{ .Get "width" }}"/>
    </a>
  </div>
</figure>

｛｛< thm_link link="リンク先画像" src="サムネイル画像" >｝｝みたいな感じで呼び出しを行います（｛は半角の{）。

サムネイルは自動生成しても良いんですが、サムネイルを作るような処理は画像によって適切なサイズが異なる場合が多いので、結局手で内容に応じたサムネイルを作った方が良かったりします。
そのため、ひとまずあまり自動化はしてない感じです。

またライトボックス化なんですが、そもそも今は必要なのかなと言う感じもあったりします。スマホは普通に別タブで画像開いてくれた方が便利な時もありますし、PCも普通に別タブで画像開いた方がいいんじゃないかなっていう。特に1920pxを超えるような高解像度の場合、そんな風に思いますね。
ブラウザで普通にtarget=“blank"で画像を開かせて、残りの処理はブラウザに振った方がいいんじゃないかなという気がします。

外部リンクをtarget_blank

ライトボックスでjqueryを使っていることもあって、お気軽にJavascript側で処理させています。

$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');