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

**URL:** https://discourse.gohugo.io/t/topic/19193
**Category:** 日本語
**Created:** [June 14, 2019, 5:00am UTC](https://discourse.gohugo.io/t/topic/19193 "2019-06-14T05:00:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![xcd0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xcd0/32/11013_2.png) [@xcd0](https://discourse.gohugo.io/u/xcd0)
#### Post date: [June 14, 2019, 5:00am UTC](https://discourse.gohugo.io/t/topic/19193/1 "2019-06-14T05:00:21Z")

</div>

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/](https://xcd0.github.io/docs/)  
テーマは自作のものを使用しています。

> **[xcd0/hugo](https://github.com/xcd0/hugo/tree/master/Light)**
>
> Github Pagesを作ってるリポジトリです。. Contribute to xcd0/hugo development by creating an account on GitHub.

生成させたいリンクは  
①内に記述しているローカル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

```auto
<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で生成されるサイドバーはこのような見た目になります。

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b7c5777e4c9e28ae2485566da582590c2ab13aaf.png)  
ディレクトリ構造は以下のようなものです。

```auto
├── 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

```

---

<div class="post-metadata">

### Author: ![peaceiris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peaceiris/32/7358_2.png) [@peaceiris](https://discourse.gohugo.io/u/peaceiris)
#### Post date: [June 14, 2019, 5:33am UTC](https://discourse.gohugo.io/t/topic/19193/2 "2019-06-14T05:33:07Z")

</div>

```auto
relativeURLs = true

```

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

> **[URL Management](https://gohugo.io/content-management/urls/)**
>
> Hugo supports permalinks, aliases, link canonicalization, and multiple options for handling relative vs absolute URLs.

---

<div class="post-metadata">

### Author: ![xcd0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xcd0/32/11013_2.png) [@xcd0](https://discourse.gohugo.io/u/xcd0)
#### Post date: [June 14, 2019, 8:36am UTC](https://discourse.gohugo.io/t/topic/19193/3 "2019-06-14T08:36:34Z")

</div>

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

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

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

```

となってほしいところ、

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

```

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

---

<div class="post-metadata">

### Author: ![peaceiris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peaceiris/32/7358_2.png) [@peaceiris](https://discourse.gohugo.io/u/peaceiris)
#### Post date: [June 14, 2019, 9:05am UTC](https://discourse.gohugo.io/t/topic/19193/4 "2019-06-14T09:05:24Z")

</div>

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

```auto
{{ "mystyle.css" | relURL }} → "/hugo/mystyle.css"

```

> **[relURL](https://gohugo.io/functions/relurl/)**
>
> Given a string, prepends the relative URL according to a page's position in the project directory structure.

---

<div class="post-metadata">

### Author: ![xcd0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xcd0/32/11013_2.png) [@xcd0](https://discourse.gohugo.io/u/xcd0)
#### Post date: [June 17, 2019, 1:31am UTC](https://discourse.gohugo.io/t/topic/19193/5 "2019-06-17T01:31:27Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![peaceiris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peaceiris/32/7358_2.png) [@peaceiris](https://discourse.gohugo.io/u/peaceiris)
#### Post date: [June 18, 2019, 9:08am UTC](https://discourse.gohugo.io/t/topic/19193/6 "2019-06-18T09:08:08Z")

</div>

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

 ![](https://d11a6trkgmumsb.cloudfront.net/original/3X/1/1/11e8347fb7cf1b9d039b85a5d653b96cf1b47ea8.png)