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