post.hbs

{{!< default}}

<link rel="stylesheet" type="text/css" href="{{asset "post.css"}}" />

{{#post}}
  <main class="site-main">
    <article class="post-full {{post_class}}">
      <header class="post-full__header inset-column">
        <h1 class="post-full__title">{{title}}</h1>
        <div class="post-full__meta">
          <span><i class="icon icon-calendar"></i>编辑于{{date updated_at format="YYYY年MM月DD日"}}</span>
          <span><i class="icon icon-message"></i><a href="{{url absolute="true"}}#disqus_thread"></a></span>
        </div>
      </header>
      <div class="outset-column">
        {{#if feature_image}}
          <figure class="post-full__image" style="background-image: url({{feature_image}})"></figure>
        {{else}}
          <figure class="post-full__image"
                  style="background-image: url({{asset "/img/default_background.jpg"}})"></figure>
        {{/if}}
      </div>
      <section class="post-full__content inset-column">
        {{content}}
      </section>
      <footer class="post-full__footer inset-column">
        {{#if tags}}
          <div class="tag-cloud">
            {{#foreach tags}}
              <a href="/tag/{{slug}}" class="tag tag-{{slug}}">{{name}}</a>
            {{/foreach}}
          </div>
        {{/if}}
        <div class="reward">
          <p>希望对您能有帮助，打赏随意</p>
          <Button id="rewardBtn" class="btn">支持一下</Button>
        </div>
        <div class="share">
          <div class="statement">
            <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">
              <img src="{{asset "/img/creativecommons-cc.svg"}}" alt="creativecommons" height="25">
            </a>
          </div>
          <ul class="social share__social">
            <li class="link">
              <a href="https://service.weibo.com/share/share.php?title={{encode title}}&amp;url={{url absolute="true"}}"
                 onclick="window.open(this.href, 'share-weibo','width=580,height=296');return false;">
                <i class="icon icon-weibo"></i>
              </a>
            </li>
            <li class="link"><a href="javascript:void(0);" id="wechatShareBtn"><i class="icon icon-wechat-fill"></i></a>
            </li>
            <li class="link">
              <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                 onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
                <i class="icon icon-facebook-fill"></i>
              </a>
            </li>
            <li class="link">
              <a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
                 onclick="window.open(this.href, 'share-twitter','width=580,height=296');return false;">
                <i class="icon icon-twitter"></i>
              </a>
            </li>
          </ul>
        </div>
      </footer>
    </article>
  </main>

  {{#if primary_tag}}
    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
      {{#if related_posts}}
        <aside class="article-related inset-column">
          <h4>你可能感兴趣的内容</h4>
          <ul>
            {{#foreach related_posts}}
              <li><a href="{{url}}">{{title}}</a></li>
            {{/foreach}}
          </ul>
        </aside>
      {{/if}}
    {{/get}}
  {{/if}}

  <div id="rewardOverlay" class="modal">
    <span id="closeReward" class="modal-close"></span>
    <div class="reward-modal-content">
      <h2 class="title">感谢您的支持</h2>
      <p>非常感谢您对我的支持，支持我把博客做得更好，写出更多优质的内容，帮助更多的人。您的捐赠将会用于支付基础设施费用，提升网站质量。</p>
      <div class="money-code-container">
        <div class="money-code">
          <span>支付宝</span>
          <img src="{{asset "img/m_alipay.jpg"}}" width="200" alt="支付宝">
        </div>
        <div class="money-code">
          <span>微信</span>
          <img src="{{asset "img/m_wx.jpg"}}" width="200" alt="微信">
        </div>
      </div>
    </div>
  </div>
  <div id="wechatShare" class="modal">
    <span id="closeWechatShare" class="modal-close"></span>
    <div class="share-modal-content">
      <p class="title">打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
      <canvas width="300" height="300" id="qrcodeCanvas"></canvas>
    </div>
  </div>

  <div id="disqus_thread" class="inset-column"></div>
{{/post}}
<script>
  var disqus_config = function() {
    this.page.url = "{{url absolute="true"}}";
    this.page.identifier = "ghost-{{comment_id}}";
  };
  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://whezh.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<script id="dsq-count-scr" src="//whezh.disqus.com/count.js" async></script>
<script src="{{asset "post.js"}}"></script>