parent
7f446fc953
commit
5225628f8a
@ -0,0 +1,16 @@ |
|||||||
|
+++ |
||||||
|
title = "" |
||||||
|
tags = [ |
||||||
|
"gallery" |
||||||
|
] |
||||||
|
categories = [ |
||||||
|
"gallery" |
||||||
|
] |
||||||
|
draft = true |
||||||
|
|
||||||
|
[photos] |
||||||
|
"/media/IMG000.png" = "a great photo" |
||||||
|
"/media/IMG003.png" = "" |
||||||
|
|
||||||
|
+++ |
||||||
|
|
@ -0,0 +1,15 @@ |
|||||||
|
{{ partial "head.html" . }} |
||||||
|
|
||||||
|
<body> |
||||||
|
<div id="container"> |
||||||
|
{{ partial "header.html" . }} |
||||||
|
<section id="main" class="outer"> |
||||||
|
{{ partial "gallery.html" . }} |
||||||
|
{{ if and (not .Params.nocomment) .Site.Params.disqusShortname }} |
||||||
|
{{ template "_internal/disqus.html" . }} |
||||||
|
{{ end }} |
||||||
|
</section> |
||||||
|
{{ partial "footer.html" . }} |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,152 @@ |
|||||||
|
<style> |
||||||
|
figure { |
||||||
|
text-align: center; |
||||||
|
float: left; |
||||||
|
margin: 0; |
||||||
|
max-width: 100%; |
||||||
|
transition-property: height min-height scale; |
||||||
|
transition-duration: 1s; |
||||||
|
} |
||||||
|
.floatclear { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
</style> |
||||||
|
<article class="article article-type-post" itemscope itemprop="blogPost"> |
||||||
|
<div class="article-inner"> |
||||||
|
{{ if .Title }} |
||||||
|
<header class="article-header"> |
||||||
|
<h1 class="article-title" itemprop="name">{{ .Title }}</h1> |
||||||
|
</header> |
||||||
|
{{ end }} |
||||||
|
<div class="article-meta"> |
||||||
|
<a href="{{ .RelPermalink }}" class="article-date"> |
||||||
|
<time datetime='{{ .Date.Format "2006-01-02T15:04:05.000-07:00" }}' itemprop="datePublished">{{ .Date.Format "2006-01-02" }}</time> |
||||||
|
</a> |
||||||
|
{{ $Site := .Site }} |
||||||
|
{{ if .Params.categories }} |
||||||
|
<div class="post-categories"> |
||||||
|
<div class="article-category"> |
||||||
|
{{ range $i, $e := .Params.categories }} |
||||||
|
{{ if gt $i 0 }} |
||||||
|
<span>></span> |
||||||
|
{{ end }} |
||||||
|
<a class="article-category-link" href="{{ $Site.BaseURL }}/categories/{{ $e | urlize }}">{{ $e }}</a> |
||||||
|
{{ end }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{{ end }} |
||||||
|
{{ if .Site.Params.disqusShortname }} |
||||||
|
<div class="article-comment-link-wrap"> |
||||||
|
<a href="{{ .RelPermalink }}#disqus_thread" class="article-comment-link">Comments</a> |
||||||
|
</div> |
||||||
|
{{ end }} |
||||||
|
</div> |
||||||
|
<div class="article-entry" itemprop="articleBody"> |
||||||
|
{{ range $i, $_ := .Params.photos }} |
||||||
|
{{ $splitnum := split .url "/" | len | add -1}} |
||||||
|
{{ $name := index (split .url "/") $splitnum }} |
||||||
|
{{ if not $i }} |
||||||
|
<figure class="image" id="full-figure" > |
||||||
|
<img src="/media/{{ $name }}" id="{{$name}}" {{ with .alt }}alt="{{ . }}"{{ end }} data-caption="{{.caption}}"/> |
||||||
|
<figcaption>{{ with .caption }}{{ . }}{{ end }}</figcaption> |
||||||
|
</figure> |
||||||
|
<div class="floatclear"></div> |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
<figure class="thumb" > |
||||||
|
<img src="/media/x100/{{ $name }}" id="{{$name}}" alt="{{ with .alt }}{{ . }}{{ else }}{{ .caption }}{{ end }}" data-name="{{$name}}" data-caption="{{.caption}}"/> |
||||||
|
</figure> |
||||||
|
{{ end }} |
||||||
|
<div class="floatclear"></div> |
||||||
|
{{ .Content }} |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
function getElementIndex(node) { |
||||||
|
var index = 0; |
||||||
|
while ( (node = node.previousElementSibling) ) { |
||||||
|
index++; |
||||||
|
} |
||||||
|
return index; |
||||||
|
} |
||||||
|
|
||||||
|
var image = document.querySelector("figure.image").firstElementChild; |
||||||
|
image.parentElement.style.minHeight = image.scrollHeight + "px"; |
||||||
|
|
||||||
|
image.onload = function () { |
||||||
|
image.parentElement.style.minHeight = ''; |
||||||
|
}; |
||||||
|
|
||||||
|
document.querySelector(".article-entry").onclick = function (evt) { |
||||||
|
if (evt.target.tagName === "IMG" && evt.target.parentElement.className === "thumb") { |
||||||
|
image.src = "" |
||||||
|
image.src = "/media/" + evt.target.dataset.name; |
||||||
|
image.nextElementSibling.innerText = evt.target.dataset.caption; |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
{{ if not .Params.notoc }} |
||||||
|
{{ if .TableOfContents }} |
||||||
|
<div class="article-toc" {{ if .Site.Params.SmartToc }}style="display:none;"{{ end }}> |
||||||
|
<h3>Contents</h3> |
||||||
|
{{ .TableOfContents }} |
||||||
|
</div> |
||||||
|
{{ end }} |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
{{ if .Site.Params.SmartToc }} |
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script> |
||||||
|
<script> |
||||||
|
(function() { |
||||||
|
var $toc = $('#TableOfContents'); |
||||||
|
if ($toc.length > 0) { |
||||||
|
var $window = $(window); |
||||||
|
|
||||||
|
function onScroll(){ |
||||||
|
var currentScroll = $window.scrollTop(); |
||||||
|
var h = $('.article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6'); |
||||||
|
var id = ""; |
||||||
|
h.each(function (i, e) { |
||||||
|
e = $(e); |
||||||
|
if (e.offset().top - 10 <= currentScroll) { |
||||||
|
id = e.attr('id'); |
||||||
|
} |
||||||
|
}); |
||||||
|
var active = $toc.find('a.active'); |
||||||
|
if (active.length == 1 && active.eq(0).attr('href') == '#' + id) return true; |
||||||
|
|
||||||
|
active.each(function (i, e) { |
||||||
|
$(e).removeClass('active').siblings('ul').hide(); |
||||||
|
}); |
||||||
|
$toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) { |
||||||
|
$(e).children('a').addClass('active').siblings('ul').show(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
$window.on('scroll', onScroll); |
||||||
|
$(document).ready(function() { |
||||||
|
$toc.find('a').parent('li').find('ul').hide(); |
||||||
|
onScroll(); |
||||||
|
document.getElementsByClassName('article-toc')[0].style.display = ''; |
||||||
|
}); |
||||||
|
} |
||||||
|
})(); |
||||||
|
</script> |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
|
||||||
|
{{ if .Params.tags }} |
||||||
|
<footer class="article-footer"> |
||||||
|
<ul class="article-tag-list"> |
||||||
|
{{ range .Params.tags }} |
||||||
|
<li class="article-tag-list-item"> |
||||||
|
<a class="article-tag-list-link" href="{{ $Site.BaseURL}}/tags/{{ . | urlize }}">{{ . }} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
{{ end }} |
||||||
|
</ul> |
||||||
|
</footer> |
||||||
|
{{ end }} |
||||||
|
</div> |
||||||
|
{{ partial "nav.html" . }} |
||||||
|
</article> |
@ -0,0 +1,26 @@ |
|||||||
|
<script> |
||||||
|
window.onload = function () { |
||||||
|
refreshComments(); |
||||||
|
}; |
||||||
|
|
||||||
|
function refreshComments() { |
||||||
|
var xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("GET", "./comments"); |
||||||
|
xhr.onload = function () { |
||||||
|
document.querySelector("#comments").innerHTML = xhr.responseText; |
||||||
|
}; |
||||||
|
xhr.send(); |
||||||
|
} |
||||||
|
|
||||||
|
window.submitComment = function (evt) { |
||||||
|
evt.preventDefault(); |
||||||
|
var xhr = new XMLHttpRequest(); |
||||||
|
xhr.open('POST', './comments', true); |
||||||
|
xhr.send(JSON.stringify({"text": evt.target.querySelector('textarea').value})); |
||||||
|
xhr.onload = function () { |
||||||
|
refreshComments(); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<div id="comments"></div> |
||||||
|
|
@ -0,0 +1,8 @@ |
|||||||
|
<p |
||||||
|
{{ if eq (.Get "align") "left" }}class="leftimg"{{else if (.Get "align") "right"}}class="rightimg"{{end -}} |
||||||
|
><a href="/media/{{ .Get "filename"}}" target="_blank"><img src="/media/ |
||||||
|
{{- with .Get "width"}}{{.}}{{else}}100{{end}}x{{with .Get "height"}}{{.}}{{else}}{{end}}/{{ .Get "filename" -}}" |
||||||
|
{{ with .Get "caption" }}title="{{.}}"{{end}} |
||||||
|
{{ with .Get "caption" }}alt="{{.}}"{{end}} |
||||||
|
/></a> |
||||||
|
</p> |
Loading…
Reference in new issue