HUGO

サイト内リンクを相対パスで生成したい

hugoを使って社内向けのオフラインドキュメントを作成しようとしています。
ドキュメントが常に同じパスに置かれる場合、何も問題なく使用できます。
しかし、オフラインドキュメントとしてzip等でまとめて再配布した際に、当然ですが展開によりルートディレクトリが変わることで、リンクの参照ができなくなる問題が発生しています。
これはテーマの中でリンクに{{ .Site.BaseURL }}が用いられてるためです。

再配布後も正しく表示されるよう、絶対パスを使用せず、相対パスにてリンクを生成させたいです。
例としてはhtmlが以下の構造の時

  1. ~/index.html
  2. ~/a/index.html
  3. ~/b/index.html

1.のページから2.のページ
{{ .Site.BaseURL }}a/index.html → ./a/index.html
2.のページから1.のページ
{{ .Site.BaseURL }}index.html →…/index.html
2.のページから3.のページ
{{ .Site.BaseURL }}a/index.html →…/b/index.html
のように絶対パスではなく相対パスで生成させたいです。

こういった機能はHUGOにありますか?
なければ実現できそうなアイディアとかありますか?

私の考えはHUGOに生成させた後のURLに対して、
javascript等で文字列置換を行うものです。
もちろん生成時に変換されるようにGoで書いてもいいと思います。
ただし私はものすごく時間をかけないと作れなさそうなのでほかにアイディアがあると嬉しいです。

よろしくお願いします。


以下 補足です。
ドキュメントの見た目はこのようなものです。下記のページはサンプルです。
https://xcd0.github.io/docs/
テーマは自作のものを使用しています。

生成させたいリンクは
①内に記述しているローカルjavascriptファイルへのリンク
例)<script src="{{ .Site.BaseURL }}js/sample.js" defer></script>
②サイドバーに表示しているサイトマップ一覧のリンク
例)<a href="{{ .RelPermalink }}index.html">{{ .Title }}</a>
サイトマップは.Sections.ByLinkTitle等で取得して生成させています。

サイトマップは複数の階層に対応するため多少複雑なhtmlとなっています。
生成のためのhtmlは以下です。

layouts/partials/side-menu.html

<nav class="sidebar">
	<div class="sidebar-contents">
	{{/* テンプレート定義 */}}
	{{ define "hierarchy" }}
		{{ if .IsHome }}{{/* ホームだけ別処理 */}}
		<ul class="nav-groups">
				<li class="nav-group-name-top">
					<a href="{{ .RelPermalink }}index.html">{{ .Title }}</a>
					{{/* ホームは$.Site.RegularPagesのSectionがないのでこれで取り出せる */}}
					{{ range where $.Site.RegularPages "Section" "" }}
						<li class="nav-group-task-top"><a href="{{ .RelPermalink }}index.html">{{ .Title }}</a></li>
					{{ end }}
				</li>
			</ul>
			{{ range .Sections.ByLinkTitle }}
				{{ template "hierarchy" . }}
			{{ end }}
		{{ else }}
			<ul class="nav-groups">
				<li class="nav-group-name">
					<div class="nav-group-middle-name">
						<a href="{{ .RelPermalink }}index.html">{{ .Title }}</a>
					</div>
					{{/* カレントセクション直下のページリスト(ホームは処理分ける) */}}
					{{ range .Pages.ByDate }}
						<li class="nav-group-task"><a href="{{ .RelPermalink }}index.html">{{ .Title }}</a></li>
					{{ end }}
					{{/* カレントセクション直下のセクションは再帰処理 */}}
					{{ range .Sections.ByPublishDate }}
						{{ template "hierarchy" . }}
					{{ end }}
				</li>
			</ul>
		{{ end }}
	{{ end }}{{/* テンプレート定義ここまでで終わり */}}
	{{/* テンプレート呼び出して、一覧読み込む */}}
	{{ template "hierarchy" .Site.Home }}
</nav>

上記のhtmlで生成されるサイドバーはこのような見た目になります。


ディレクトリ構造は以下のようなものです。

├── index.html
├── index.xml
├── about
│   ├── about
│   ├── index.html
│   └── index.xml
├── css
│   ├── highlight.css
│   └── light.css
├── js
│   ├── jazzy.js
│   └── jquery.min.js
├── img
│   ├── carat.png
│   └── gh.png
├── nesttest
│   ├── index.html
│   ├── index.xml
│   ├── nest
│   └── nesttest
└── nesttest
     ├── index.html
     ├── index.xml
     ├── nest
     │   └── index.html
     └── nesttest
         ├── index.html
         ├── index.xml
         ├── nest
         │   └── index.html
         └── nesttest
             ├── index.html
             ├── index.xml
             ├── nest
             │   └── index.html
             └── nesttest
                 ├── index.html
                 ├── index.xml
                 ├── nest
                 │   └── index.html
                 └── nesttest
                     ├── index.html
                     ├── index.xml
                     ├── nest
                     │   └── index.html
                     └── nesttest
                         ├── index.html
                         ├── index.xml
                         ├── nest
                         │   └── index.html
                         └── nesttest
                             ├── index.html
                             ├── index.xml
                             ├── nest
                             │   └── index.html
                             └── nesttest
                                 ├── index.html
                                 ├── index.xml
                                 ├── nest
                                 │   └── index.html
                                 └── nesttest
                                     ├── index.html
                                     ├── index.xml
                                     ├── nest
                                     │   └── index.html
                                     └── nesttest
                                         ├── index.html
                                         ├── index.xml
                                         ├── nest
                                         │   └── index.html
                                         └── nesttest
                                             ├── index.html
                                             ├── index.xml
                                             ├── nest
                                             │   └── index.html
                                             └── nesttest
                                                 ├── index.html
                                                 ├── index.xml
                                                 └── nest
                                                     └── index.html
relativeURLs = true

を指定することで相対パスでリンクが生成されるようになるはずです。試してみてください。

おお ②は正しく相対パスになりました
ありがとうございます
①は{{ .Site.BaseURL }}のままではだめですね。
テーマのstaticディレクトリに配置される
jsファイルやcssファイルに対する相対パスの出力方法がわかりません。
{{ .RelPermalink }}に変えてみましたところ

~/a/index.html内のcss指定が

<link rel="stylesheet" type="text/css" href="../css/light.css" />

となってほしいところ、

<link rel="stylesheet" type="text/css" href="../a/css/light.css" />

のようになってしまいました。
良い指定方法があれば教えてください。

relURL を使ってみてください。

{{ "mystyle.css" | relURL }} → "/hugo/mystyle.css"
1 Like

おお うまくいきました ありがとうございます(/‘ω’)/

<link rel="stylesheet" type="text/css" href="{{ "css/light.css" | relURL}}" />
1 Like

解決できたようで良かったです。トピックのクローズをお願いしますね。