おそらく、以前から症状が起きていたのではないかと思うが、Hugoのテーマ「Tranquilpeak」にてレスポンシブの際に表示されるハンバーメニューが動作していない事に気づき、その原因と解明に、ほぼ1日費やしてしまいました。
症状
この現象に当たっては、BaseURLがトップディレクトリになっていれば問題なく、サブパス（サブディレクトリ）を設定していた場合に発生しました。
具体的には、
baseurl = “xttp://xxx.yyy.com” OK
baseurl = “xttp://xxx.yyy.com/~user/” NG
原因究明
- セキュリティヘッダー設定を無効にしてみた
- submoduleのtranquilpeakを更新してみた
- カスタマイズしているlayouts/partials内のファイルを削除してみた
- 記事内のMarkdownの不備を確認するため、conttent内の記事を削除してみた
- ビルドの際にHTML,CSSの圧縮を、非圧縮でビルドしてみた
- config.toml内でrelativeURLs, canonifyURLs, uglyURLsを調整してみた
ほぼ、tranquilpeakデフォルト設定まで戻してみたが、やはりビルドしたPublic内のindex.htmlを開くと、ハンバーメニューが反応しない
実は、ハンバーメニューだけでなく、Aboutページも反応していなかった
このハンバーメニューやAboutページは、どのように動作しているのか、調べてみると、jQueryで実行されているようだったので、jQuery周辺を調べてみた
デベロッパーツール
ビルドしたPublic内のindex.htmlをブラウザの解析ツールで調べてみたところ、下記の箇所が該当する事が分かった
<script> のソース “https://xxx.yyy.com/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js” の読み込みに失敗しました。 index.html:735:1
MIME タイプ (“text/html”) の不一致により “https://xxx.yyy.com/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js” からのリソースがブロックされました (X-Content-Type-Options: nosniff)。よく見るとbaseurlで指定したxxx.yyy.com/~userではなくxxx.yyy.comだけになっているため、当然ファイルが存在しないので読み込まれるわけがない
さて、このscript-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.jsを読み込んでいるファイルを探ってみたところ、themes/tranquilpeak/layouts/partials/script.htmlに記載されている事が分かった
このscript.htmlからstatic/css/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.jsが読み込まれており、スクリプトの中身を見ると、aboutやsidebarのCSSが書かれているので、これで間違いない
解決策
肝心の解決策ですが、themes/tranquilpeak/layouts/partials/script.htmlを編集するので、これを/layouts/partianls/内にコピーして編集
-<script src="{{ "/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js" | absURL }}"></script>
+<script src="{{ "/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js" | relURL }}"></script>
absURLの動作が正常に行われてない感じでしたので、relURLへ変更したところ、無事、解決に至りました
上でも解決しない場合は、下記でも良いようです。（むしろ、こちらの方が正解なのかも？）
-<script src="{{ "/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8
wfguccut.min.js" | abslURL }}"></script>
+<script src="{{ .Site.BaseURL }}/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn
73v9uno8aupuph8wfguccut.min.js"></script>
これでも解決しない場合は、最後の手段として、パスを直書き(src="xttp://xxx.yyy.com/~user/js/script-…")しましょう。(^^;)