{{ define "main" }}
<div id="data-pid" style="display:none">{{ .RelPermalink }}</div>
<article style="margin-bottom:1.5em">
<h1 class="post-title" itemprop="name headline" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 200">{{ .Title }}</h1>
<div class="meta">
<span class="meta-item">作者: {{ .Site.Params.author | default "博主" }}</span>
<span class="meta-item">浏览: <span id="busuanzi_value_page_uv"></span></span>
<span class="meta-item">字数: <span id="word-count"></span></span>
<span class="meta-item meta-item-reading-time">阅读: 约 <span id="reading-time"></span> 分钟</span>
<br>
{{ with .Params.categories }}<span class="meta-item">分类:{{ range . }} <a href="/categories/{{ . }}">{{ . }}</a>{{ end }}</span>{{ end }}
{{ with .Params.tags }}<span class="meta-item">标签:{{ range . }} <a href="/tags/{{ . }}">{{ . }}</a>{{ end }}</span>{{ end }}
<span class="meta-item">发布: {{ .Date.Format "2006-01-02" }}</span>
</div>
<div class="post-content" id="post-writing" itemprop="articleBody">
{{ .Content }}
</div>
{{ if or .PrevInSection .NextInSection }}
<div class="post-nav">
{{ with .PrevInSection }}
<a class="post-nav-prev" href="{{ .RelPermalink }}">
<span class="post-nav-label">←</span>
<span class="post-nav-title">{{ .Title }}</span>
</a>
{{ end }}
{{ with .NextInSection }}
<a class="post-nav-next" href="{{ .RelPermalink }}">
<span class="post-nav-title">{{ .Title }}</span>
<span class="post-nav-label">→</span>
</a>
{{ end }}
</div>
{{ end }}
<hr class="uk-divider-icon">
{{ if .Site.Params.artalk }}
<div id="Comments"></div>
<div id="artalk_container"></div>
{{ end }}
</article>
<script defer src="{{ "js/bsz.js" | absURL }}"></script>
<script>
(function(){
  var cjkRE=/[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff\u2e80-\u2eff\u3000-\u303f\u31c0-\u31ef\u3200-\u32ff\ufe30-\ufe4f\uff00-\uffef]/g;
  var enRE=/[a-zA-Z0-9]+/g;
  function run(){
    var el=document.getElementById('post-writing');
    if(!el)return;
    var text=el.textContent||'';
    text=text.replace(/\s+/g,' ').trim();
    var cjk=(text.match(cjkRE)||[]).length;
    var en=(text.match(enRE)||[]).length;
    var wcEl=document.getElementById('word-count');
    if(wcEl)wcEl.textContent=cjk+en;
    var rtEl=document.getElementById('reading-time');
    if(rtEl)rtEl.textContent=Math.max(1,Math.ceil(cjk/400+en/200));
  }
  run();
  document.addEventListener('pjax:complete',function(){setTimeout(run,80)});
  // Heading fade-in observer
  function observeHeadings(){
    var headings=document.querySelectorAll('.post-content h2,.post-content h3,.post-content h4');
    if(!headings.length)return;
    if(!window.IntersectionObserver){headings.forEach(function(h){h.classList.add('is-visible')});return}
    var initial=true;
    var obs=new IntersectionObserver(function(entries){
      if(initial){initial=false;return}
      entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('is-visible');obs.unobserve(e.target)}})
    },{rootMargin:'0px 0px -40px 0px',threshold:0.1});
    headings.forEach(function(h){obs.observe(h)});
  }
  observeHeadings();
  document.addEventListener('pjax:complete',function(){setTimeout(observeHeadings,100)});
})();
</script>
{{ end }}

{{ define "scripts" }}
{{ if .Site.Params.artalk }}
<script>
window.loadScriptOnce&&loadScriptOnce("{{ "js/libs/Artalk.min.js" | absURL }}","Artalk",function(){
new Artalk({el:"#artalk_container",pageKey:"{{ .Permalink }}",pageTitle:"{{ .Title }}",server:"{{ .Site.Params.artalkServer }}",site:"{{ .Site.Title }}"})});
</script>
{{ end }}
{{ end }}
