Skip to content

Instantly share code, notes, and snippets.

@dudil
Created February 2, 2018 14:34
Show Gist options
  • Save dudil/edf2b1838c7cc5f1131a3777dbc662a9 to your computer and use it in GitHub Desktop.
Save dudil/edf2b1838c7cc5f1131a3777dbc662a9 to your computer and use it in GitHub Desktop.
This is a hack to allow menu items with external links to be open in a new tab
<!-- Header -->
<header id="header">
{{ if or .IsHome (not .Site.Params.DynamicTitles) }}
<h1><a href="{{ "/" | relURL }}">{{ .Site.Params.navbarTitle }}</a></h1>
{{ else if ne .Section "" }}
<h1><a href="{{ "/" | relURL }}">{{ .Section }}</a></h1>
{{ else }}
<h1><a href="{{ "/" | relURL }}">{{ .Title }}</a></h1>
{{ end }}
<nav class="links">
<ul>
{{ range .Site.Menus.main }}
{{ $url := urls.Parse .URL }}
{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
<li>
<a href="{{ .URL }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>
<i class="{{ .Identifier }}">&nbsp;</i>{{ .Name }}
</a>
</li>
{{ end }}
</ul>
</nav>
<nav class="main">
<ul>
{{ if $.Scratch.Get "shareNav" }}
<li id="share-nav" class="share-menu" style="display:none;">
<a class="fa-share-alt" href="#share-menu">Share</a>
</li>
{{ end }}
<li class="search">
<a class="fa-search" href="#search">Search</a>
<form id="search" method="get" action="//google.com/search">
<input type="text" name="q" placeholder="Search" />
<input type="hidden" name="as_sitesearch" value="{{ .Site.BaseURL }}">
</form>
</li>
<li class="menu">
<a class="fa-bars" href="#menu">Menu</a>
</li>
</ul>
</nav>
</header>
<!-- Menu -->
<section id="menu">
<!-- Search -->
<section>
<form class="search" method="get" action="//google.com/search">
<input type="text" name="q" placeholder="Search" />
<input type="hidden" name="as_sitesearch" value="{{ .Site.BaseURL }}">
</form>
</section>
<!-- Links -->
<section>
<ul class="links">
{{ range .Site.Menus.main }}
{{ $url := urls.Parse .URL }}
{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
<li>
<a href="{{ .URL }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>
<h3>
<i class="{{ .Identifier }}">&nbsp;</i>{{ .Name }}
</h3>
</a>
</li>
{{ end }}
</ul>
</section>
<!-- Posts List -->
<section id="recent-posts">
<div class="mini-posts">
<header>
<h3>Recent Posts</h3>
</header>
{{ $.Scratch.Set "recentPosts" .Site.Pages }}
{{ with .Site.Params.postAmount.sidebar }}
{{ $.Scratch.Set "postLimit" . }}
{{ else }}
{{ $.Scratch.Set "postLimit" 5 }}
{{ end }}
{{ range first ($.Scratch.Get "postLimit") (where ($.Scratch.Get "recentPosts") "Type" "post") }}
<article class="mini-post">
<header>
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
{{ $.Scratch.Set "dateType" .Date }}
<time class="published" datetime=
'{{ ($.Scratch.Get "dateType").Format "2006-01-02" }}'>
{{ ($.Scratch.Get "dateType").Format "January 2, 2006" }}</time>
</header>
{{ .Render "featured" }}
</article>
{{ end }}
{{ if ge (len (where .Site.Pages "Type" "post")) ($.Scratch.Get "postLimit") }}
<a href=
{{ with .Site.Params.viewMorePostLink }}
{{ . }}
{{ else }}
"/post/"
{{ end }}
class="button">View more posts</a>
{{ end }}
</div>
</section>
<!-- Actions -->
<!--
<section>
<ul class="actions vertical">
<li><a href="#" class="button big fit">Log In</a></li>
</ul>
</section>
-->
</section>
@dudil
Copy link
Author

dudil commented Feb 2, 2018

This "hack" to the navbar.html file should allow open links that are menu items in new tabs while keeping local links behave the same.

This file should be saved under your own local hugo project layouts directory (if you don't have such a directory create it and put this file there).

.
├── archtypes
├── content
├── data
├── layouts
|   └── partials
|       └── navbar.html (this file)
├── static
├── themes
└── config.toml

This should override the theme default behaviour, until there is a stable solution from Hugo

@adindrabkin
Copy link

adindrabkin commented Jun 28, 2021

Here is the equivalent for those modifying header.html (layouts/partials/header.html)

        {{ with .Site.Menus.main}}
          {{ range sort . }}
          {{ $url := urls.Parse .URL }}
          {{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
            <li class="navigation-item">
              <a class="navigation-link" href="{{ .URL | relLangURL}}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a>
            </li>
          {{ end }}
        {{ end }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment