如何在菜单导航雨果网站上添加链接答案

【问题标题】：How to add link on menu nav hugo site如何在菜单导航雨果网站上添加链接
【发布时间】：2019-10-21 20:24:40
【问题描述】：

如何在菜单中的导航项上添加直接链接而不是对部分的引用？

在我的 config.toml 中，我添加了一个链接，但它首先将 baseurl 放在它前面：

[menu]

    [[menu.nav]]
    name = "Summary"
    URL = "services"
    weight = 2

    [[menu.nav]]
    name = "Contact"
    URL = "contact-us"
    weight = 3

    [[menu.nav]]
    name = "Methods"
    URL = "blog"
    weight = 4

    [[menu.nav]]
    name = "Français"
    url = "https://example.com/" #this is the link I want to add
    weight = 5

我找到了this post，但不知道 html，所以不确定在 layout/partials/navigation.html 文件中的何处添加更改。

我怀疑它在这个部分范围内的某个地方。

                {{ if .IsHome }}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navigation-menu">
                                <li class="nav-item"><a class="nav-link" data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
                                {{ range $.Site.Menus.nav }}
                                <li class="nav-item"><a class="nav-link" data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
                                {{ end }}
                        </ul>
                </div>
                {{ else }}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navigation-menu">
                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
                                {{ range $.Site.Menus.nav }}
                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#{{ .URL | absURL }}">{{ .Name }}</a></li>
                                {{ end }}
                        </ul>
                </div>
                {{ end }}

感谢您的帮助！

【问题讨论】：

标签： yaml hugo blogdown

【解决方案1】：

这个主题不能很好地处理导航 URL。尝试替换

href="{{ $.Site.BaseURL }}#{{ .URL | absURL }}" 到 href="{{ .URL |relURL }}"。它应该适用于内部和外部链接

                {{ if .IsHome }}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navigation-menu">
                                <li class="nav-item"><a class="nav-link" data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
                                {{ range $.Site.Menus.nav }}
                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ .URL | relURL }}">{{ .Name }}</a></li>
                                {{ end }}
                        </ul>
                </div>
                {{ else }}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navigation-menu">
                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
                                {{ range $.Site.Menus.nav }}
                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ .URL | relURL }}">{{ .Name }}</a></li>
                                {{ end }}
                        </ul>
                </div>
                {{ end }}

并在您的 config.yaml 中，在内部链接之前添加“/”。

baseurl = "/"

[menu]

    [[menu.nav]]
    name = "Summary"
    URL = "/services"
    weight = 2

    [[menu.nav]]
    name = "Contact"
    URL = "/contact-us"
    weight = 3

    [[menu.nav]]
    name = "Methods"
    URL = "/blog"
    weight = 4

    [[menu.nav]]
    name = "Français"
    url = "https://example.com/" #this is the link I want to add
    weight = 5

【讨论】：

谢谢，尽管现在它正在接受参数并将其粘贴到 URL 的前面，本地为 127.0.0.1:4321/example.com，并且将站点视为 state-of-open-smart-cities-2019.netlify.com/example.com，理想情况下它将链接到我在配置文件中提供的 url arg
啊，我明白了。更新了我的答案。你也可以看看 yihui 的 repo 来了解如何正确设置导航栏
谢谢 - 早上会检查，我会的，我认为这是这个主题问题的独特之处，但我想更多的是一般的 HTML 问题
干杯谢谢，添加了完整链接 // 但删除了站点导航 URL 的 /。