[Hugo] 特定の記事専用のJSやCSSを読み込む処理を作ってみる
Nプログラマ(@Nprog128)です。
今回はHugoで特定ページ専用のJSやCSSファイルを作って、そのページのみで読み込むような仕組みを作ってみます。
WordPressではテーマにそのような機能が実装されていたり、Pluginなどを使ったりして実現できます。
自分はCocoonを使っていたので、記事の編集画面の下のほうにあるカスタムCSSのところにページ専用のCSSを書いていたりしました。
流れ
実装の流れとしてはこんな感じ。
- ページ専用のJS・CSSファイルを作る。
- Front Matterに作成したファイルのパスを記述
- headタグ内で読み込み処理を作る
それではやってみます。
1. ページ専用のJS・CSSファイルを作る
staticディレクトリ配下にJS・CSSを配置するディレクトリ作成します。
Hugoのテーマを使っているとjsやcssディレクトリがあると思うので、そこに作っておくといいと思います。
自分はこんな感じで2つのJSとCSSファイルを作りました。
1# JS
2js
3└── article
4 └── post
5 └── 2019
6 └── 06
7 └── 26
8 ├── 01.js
9 └── 02.js
10
11# CSS
12css
13└── article
14 └── post
15 └── 2019
16 └── 06
17 └── 26
18 ├── 01.css
19 └── 02.css
JSのコード
01.js コードを開く
1window.addEventListener('load', function() {
2 let dom1 = document.getElementById("sample-dom1");
3 dom1.textContent += '[JSで追加したテキスト1]';
4});
02.js コードを開く
1window.addEventListener('load', function() {
2 let dom2 = document.getElementById("sample-dom2");
3 dom2.textContent += '[JSで追加したテキスト2]';
4});
コードの説明
ページ読み込みが完了した時、指定したID要素のテキストに文字を追加しています。
最初window.onloadを上書きするようなコードを書いてしまって、01.jsの処理が実行されないぞ〜！って焦ったのはココだけの話。
CSSのコード
01.css コードを開く
1.sample-190626-01 { color: red; }
02.css コードを開く
1.sample-190626-02 { color: deepskyblue; }
コードの説明
文字の色を変更するコードです。
クラス名は共通CSSの名前と重複しないように日付を入れています。
そのページのみしか使わないコードになるので、あんまりこだわらなくてもいいかなって感じです。
この辺はお好みで。。。
2. Front Matterに作成したファイルパスを記述
読み込みたいファイルの作成が出来たので、次は専用ページにこのファイルを読み込むための設定を記述します。
先程作成したファイルパスを確認します。
（staticは記述しないので省略しています）
- /js/article/post/2019/06/26/01.js
- /js/article/post/2019/06/26/02.js
- /css/article/post/2019/06/26/01.css
- /css/article/post/2019/06/26/02.css
このファイルパスをFront Matterに記述します。
（titleやdate以外の設定は省略しています）
1
2---
3title: "タイトル"
4date: "2019-01-01T00:00:00+0900"
5
6page_js: [
7 "/js/article/post/2019/06/26/01.js",
8 "/js/article/post/2019/06/26/02.js",
9]
10page_css: [
11 "/css/article/post/2019/06/26/01.css",
12 "/css/article/post/2019/06/26/02.css",
13]
14---
Front Matterへの設定はこれで終了です。
page_jsとpage_cssは、headタグ内でこれらのファイルを読み込む設定を実装するところで使います。
3. headタグ内で読み込み処理を作る
先程Front Matterで設定したファイルを読み込む処理を作ります。
headタグ内に読み込み処理を作っていきます。
今回は既存処理の一番下に処理を追加しました。
1<head>
2 <!-- 既存の処理 -->
3
4 <!-- ページ専用のJSとCSSの読み込み処理 -->
5 {{ range .Page.Params.page_js }}
6 <script src="{{.}}"></script>
7 {{ end }}
8 {{ range .Page.Params.page_css }}
9 <link rel="stylesheet" href="{{.}}">
10 {{ end }}
11</head>
.Page.Paramsでページ毎の設定が読み出せるようなので、これを使って先程作ったpage_jsとpage_cssをrangeを使って読み込みます。
page_jsとpage_cssが未設定の場合は処理は実行されないので、他のページにも影響はないはずです。
これで準備完了です。
今回はシンプルに記述したファイルパスのみを読み出すようにしましたが、設定を入れ子にすればCDNのintegrityとか書けるようになるかもしれません。
実行結果
JSとCSSの実行結果を見ていきます。
専用のJS・CSSの読み込み確認
作成したJSファイルを確認しておきます。
chromeを使っている場合はdeveloper toolsを使い、Sourcesタブを開きます。
左のメニューにページで読み込まれているファイル一覧から、jsディレクトリをクリックすると、先程作成した01.jsと02.jsが表示されていると思います。
cssも同様ですので、確認してみましょう。
これはpage_jsやpage_cssを設定していないページでは表示されません。
JS: テキストを追加
Hugoの記事を書いているmdファイルに直接htmlを記述しています。
直接記述したhtml コードを開く
1<div id="sample-dom1">
2最初から記述しているテキスト
3</div>
4<div id="sample-dom2">
5最初から記述しているテキスト
6</div>
これがJSで実行されるとこんな風になります。
[JSで追加したテキスト1]と[JSで追加したテキスト2]が追加されているのが確認できました。
CSS: 色を変更
こちらもmdファイルに直接htmlを記述します。
直接記述したhtml コードを開く
1<div class="sample-190626-01">
2この記事専用のCSSで色を変更しています。
3</div>
4<div class="sample-190626-02">
5この記事専用のCSSで色を変更しています。
6</div>
こちらも文字の色がCSSで指定したredとdeepskyblueに変わったことが確認できました。
JSやCSSなどをバンドルするツールを使っている場合は、個別ファイルもバンドルする必要があります（自分はwebpackを使用）
バンドル化しないと、バンドルされた中にあるjQueryの参照が個別ファイルから見えない状態になり、jQueryが見つからないというエラーが表示されます。
おわりに
今回はHugoで特定ページ専用のJSやCSSを作って、そのページで読み込ませる仕組みという内容でした。
共通のJSやCSSに処理を追加する必要がなく、ディレクトリ内が専用ファイルで散らからないことがメリットだと思います。
この仕組みはブログで使うことは少ないかもしれませんが、知っておくとどこかで役に立つかもしれません。
それでは、このへんで。
バイナリー！
