Question

我更改了hexo（风景主题）分享按钮，以下是代码。（HEXO \主题\景观\ 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>
<% } %>

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

Answer 1

您唯一需要做的就是将类fancybox添加到您的锚点，并将href属性的值替换为QRCode图像的网址（目前位于window.open } function：like：

<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>

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

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

使用fancybox v2.1.5

查看 DEMO

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

注意：我在两个演示中使用渲染的html。您可能需要调整代码以反映正确的类和href

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

如何使用hexo弹出图片

1 个答案: