如何使用hexo弹出图片

Question

我改了hexo（风景主题）分享按钮，下面是代码。 (HEXO\themes\landscape\layout_partial\article.ejs)

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
  <div class="article-meta">
    <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
    <%- partial('post/category') %>
  </div>
  <div class="article-inner">
    <%- partial('post/gallery') %>
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
      </header>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link){ %>
          <p class="article-more-link">
            <a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
          </p>
        <% } %>
      <% } else { %>
        <!-- table of content -->
        <% if (post.toc == true){ %>
          <div id="toc" class="toc-article">
            <div class="toc-title">目录</div>
            <%- toc(page.content, {class: 'post-toc', list_number: false}) %>
          </div>
        <% } %>
        <%- post.content %>
      <% } %>
    </div>
    <footer class="article-footer">
      <!--
      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
      -->

      <div style="float: right">
        <a title="分享到新浪微博" class="article-share-weibo" target="_blank" href="http://service.weibo.com/share/share.php?url=<%- post.permalink %>"></a>
        <a title="分享到 QQ 空间" class="article-share-qq" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%- post.permalink %>"></a>
        <a title="分享到微信" class="article-share-wechat" href="javascript:void(0)" onclick="window.open('http://s.jiathis.com/qrcode.php?url=<%- post.permalink %>','QRCODE','width=200,height=200,directories=0,location=0,toolbar=0,menubar=0,resizable=0,status=0,scrollbars=0,titlebar=0');return false;"></a>
      </div>

      <% if (post.comments && config.disqus_shortname){ %>
        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
      <% } %>
      <%- partial('post/tag') %>

    </footer>
  </div>
  <% if (!index){ %>
    <%- partial('post/nav') %>
  <% } %>
</article>

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
</section>
<% } %>

点击第三个按钮会弹出二维码图片（二维码图片在线生成），如下图。也可以在网站上看到效果。我想用fancybox弹出那个图片，如下图，怎么办？我不擅长网络开发并接受所有更好的方法。

Answer 1

您唯一需要做的就是将 class fancybox 添加到您的锚点并将 href 属性的值替换为 URL二维码图片（目前在window.open函数中）如：

<a class="fancybox article-share-wechat" 
   href="http://s.jiathis.com/qrcode.php?url=https://knightmobile.github.io/2017-07-25/bing-included/','QRCODE','width=200,height=200,directories=0,location=0,toolbar=0,menubar=0,resizable=0,status=0,scrollbars=0,titlebar=0">
</a>

然后，将 class 绑定到 jQuery 代码中的 fancybox，例如：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        type: 'image'
    }); // fancybox
}); // ready

看到一个DEMO using fancybox v2.1.5

您最终可能想使用 fancybox v3，请参阅 DEMO

注意：我在两个演示中都使用了呈现的 html。您可能需要调整代码以反映正确的 class 和 href

当然，您需要在您的页面中包含您正在使用的版本的正确 JS 和 CSS fancybox 文件。请参考插件文档

如何使用hexo弹出图片

How to use hexo to pop up a picture

jquery

html

fancybox

hexo