Refactor site navigation

This commit is contained in:
John O'Nolan 2017-06-13 19:02:22 +01:00
parent 7f4d581caf
commit eeb8b248ca
7 changed files with 43 additions and 136 deletions

View file

@ -7,32 +7,7 @@
{{#author}} {{#author}}
<header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}"> <header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
<div class="inner"> <div class="inner">
<nav class="site-nav"> {{> "site-nav"}}
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
<div class="site-header-content"> <div class="site-header-content">
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />

View file

@ -15,29 +15,7 @@ into the {body} of the default.hbs template --}}
</h1> </h1>
<h2 class="site-description">{{@blog.description}}</h2> <h2 class="site-description">{{@blog.description}}</h2>
</div> </div>
<nav class="site-nav"> {{> "site-nav"}}
<div class="site-nav-left">
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div> </div>
</header> </header>

View file

@ -5,32 +5,7 @@ into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}} {{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer"> <header class="site-header outer">
<div class="inner"> <div class="inner">
<nav class="site-nav"> {{> "site-nav"}}
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div> </div>
</header> </header>

View file

@ -1,7 +0,0 @@
<div class="nav-menu">
<ul>
{{#foreach navigation}}
<li class="nav-item nav-item-{{slug}}{{#if current}} nav-item-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
{{/foreach}}
</ul>
</div>

38
partials/site-nav.hbs Normal file
View file

@ -0,0 +1,38 @@
<nav class="site-nav">
<div class="site-nav-left">
{{^is "home"}}
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{else}}
<a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
{{/if}}
{{/is}}
{{#if @blog.navigation}}
{{#navigation}}
{{!-- Outputting nav links from Ghost admin settings/design --}}
<div class="nav-menu">
<ul>
{{#foreach navigation}}
<li class="nav-item nav-item-{{slug}}{{#if current}} nav-item-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
{{/foreach}}
</ul>
</div>
{{/navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>

View file

@ -5,34 +5,7 @@ into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}} {{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer"> <header class="site-header outer">
<div class="inner"> <div class="inner">
<nav class="site-nav"> {{> "site-nav"}}
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{else}}
<a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div> </div>
</header> </header>

27
tag.hbs
View file

@ -5,32 +5,7 @@
{{#tag}} {{#tag}}
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}"> <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
<div class="inner"> <div class="inner">
<nav class="site-nav"> {{> "site-nav"}}
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
<div class="site-header-content"> <div class="site-header-content">
<h1 class="site-title">{{name}}</h1> <h1 class="site-title">{{name}}</h1>
<h2 class="site-description"> <h2 class="site-description">