{% extends "layout.html" %}
{% block body %}
<div id="article-banner">
  <h2>{{ page_title }}</h2>
  <p class="post-date">{{ page_date }}</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
{% if show_catalog %}
<main class="app-body flex-box">
{% else %}
<main class="app-body flex-box" style="max-width: 850px" >
{% endif %}

  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content">{{ page_content | safe }}</section>

    <p></p>

  {% if not is_special_page %}
    <!-- 二维码 START -->
    {% if theme.qrcode %}
        <div class="qrcode">
            <img src="/images/wechat-qr-code.jpg" height="160" width="160">
            <figcaption>公号同步更新，欢迎关注👻</figcaption>
      </div>
    {% endif %}

    <!-- Tags START -->
    {% if page_tags is defined and page_tags | length > 0 %}
      <div class="tags">
        <span>Tags:</span>
        {% include "partials/tag.html" %}
      </div>
    {% endif %}
    <!-- Tags END -->
    <!-- NAV START -->
    {% include "partials/nav.html" %}
    <!-- NAV END -->

    <!-- 二维码 END -->
    {% if theme.comment == "gitment" %}
      <!-- Gitment START -->
      <div id="comments"></div>
      <!-- Gitment END -->
    {% elif theme.comment == "uyan" %}
      <!-- UY START -->
      <div id="uyan_frame"></div>
      <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
      <!-- UY END -->
    {% else %}
      <!-- No Comment -->
    {% endif %}

    <script src="https://utteranc.es/client.js"
      repo="chenyukang/chenyukang.github.io"
      issue-term="pathname"
      theme="github-light"
      crossorigin="anonymous"
      async>
    </script>
  {% endif %}

  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  {% if show_catalog %}
    {% include "partials/catalog.html" %}
  {% endif %}
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = '{{ config.url }}/{{ current_path }}';
    var banner = '{{ page_banner }}'
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

     // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== 'http://file.muyutech.com/error-img.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW * 3 / 4}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })

    // qrcode
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });

  })();
</script>
{% endblock body %}