I suspect the symptom had been happening for a while, but I noticed that the hamburger menu displayed in responsive mode on the Hugo theme “Tranquilpeak” was not working, and I ended up spending almost a whole day tracking down and understanding the cause.
The symptom
With this phenomenon, there was no problem as long as BaseURL was the top directory; it occurred when a subpath (subdirectory) was configured.
Specifically,
baseurl = “xttp://xxx.yyy.com” OK
baseurl = “xttp://xxx.yyy.com/~user/” NG
Tracking down the cause
- I tried disabling the security header settings
- I tried updating the tranquilpeak submodule
- I tried deleting the files under layouts/partials that I had customised
- I tried deleting the articles under conttent to check for Markdown mistakes in the articles
- I tried building without compressing HTML and CSS at build time
- I tried adjusting relativeURLs, canonifyURLs and uglyURLs in config.toml
I went back almost all the way to the tranquilpeak default settings, but still, when I opened index.html inside the built Public, the hamburger menu did not respond
In fact it was not only the hamburger menu; the About page was not responding either
I looked into how this hamburger menu and the About page work, and since they appeared to run on jQuery, I investigated around jQuery
Developer tools
When I examined index.html inside the built Public with the browser’s analysis tools, I found that the following was the part responsible
<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)。Looking closely, it is not xxx.yyy.com/~user as specified in baseurl but only xxx.yyy.com, so of course the file does not exist and there is no way it can be loaded
Now, when I searched for the file that loads this script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js, I found that it is written in themes/tranquilpeak/layouts/partials/script.html
This script.html is what loads static/css/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js, and looking inside the script it contains the CSS for about and the sidebar, so this is definitely it
The fix
As for the fix itself, since themes/tranquilpeak/layouts/partials/script.html is what needs editing, copy it into /layouts/partianls/ and edit it there
-<script src="{{ "/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js" | absURL }}"></script>
+<script src="{{ "/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8wfguccut.min.js" | relURL }}"></script>
It felt like absURL was not behaving properly, so I changed it to relURL, and that brought me safely to a solution
If the above does not solve it, the following seems to work as well. (In fact, maybe this one is the more correct answer?)
-<script src="{{ "/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn73v9uno8aupuph8
wfguccut.min.js" | abslURL }}"></script>
+<script src="{{ .Site.BaseURL }}/js/script-yqzy9wdlzix4lbbwdnzvwx3egsne77earqmn
73v9uno8aupuph8wfguccut.min.js"></script>
If that still does not solve it, as a last resort write the path directly (src="xttp://xxx.yyy.com/~user/js/script-…"). (^^;)