Add a navigation a the bottom of posts

This commit is contained in:
Alexis Tacnet
2017-04-08 19:23:50 +02:00
parent 408a4f21fb
commit 0b4c2b5307
5 changed files with 150 additions and 1 deletions

View File

@@ -29,3 +29,4 @@ email = "you@example.com"
linkedin = "john-example-aa80ue8è"
twitter = "example"
social_banner = "img/banner.png"
posts_navigation = true

View File

@@ -28,8 +28,24 @@
<div class="markdown">
{{ partial "content" . }}
<br>
<p><a href="{{ .Section | absURL }}">Back to posts</a></p>
</div>
{{ if .Site.Params.posts_navigation }}
<div class="navigation">
{{ if .PrevInSection }}
<div>
<img class="icon" src="/img/back.svg" alt="back" />
<a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a>
</div>
{{ end }}
<div style="width: 100%;"></div>
{{ if .NextInSection }}
<div>
<a href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a>
<img class="icon" src="/img/next.svg" alt="next" />
</div>
{{ end }}
</div>
{{ end }}
<br>
<div class="disqus">
{{ template "_internal/disqus.html" . }}

View File

@@ -774,3 +774,56 @@ section.main .content .markdown .footnotes li {
section.main .content .markdown .footnote-ref {
font-size: 0.7em;
}
section.main .content .navigation {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
section.main .content .navigation div {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
margin-top: 1em;
}
section.main .content .navigation .icon {
width: 16px;
height: 16px;
}
section.main .content .navigation a {
width: 250px;
margin-left: 1em;
text-align: center;
font-style: italic;
color: #313537;
}
@media (min-width: 570px) {
section.main .content .navigation {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
section.main .content .navigation div {
margin-top: 0em;
}
}

39
static/img/back.svg Normal file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
<g>
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 768 B

40
static/img/next.svg Normal file
View File

@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
<g>
<path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 802 B