2

hexo模板图片点击放大

 2 years ago
source link: https://blog.mailjob.net/posts/3033790341.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使Simple主题支持图片点击放大

在使用 hexo 主题模版 hexo-theme-simple99 的时候，发现该模版并不支持数学公式的渲染，随即动手开始改造改模版使其支持图片点击放大。

为了提高主题的可扩展性和可控制性，在 主题配置 文件中加入 fancybox 字段：

fancybox: true

下载 fancybox 库

点击这里 下载最新的 fancybox 库， 解压缩至 /theme/material/source/js/fancybox/ 目录下，这里贴出目录结构：

js
└── fancybox      
			├── jquery.fancybox.min.css      
			└── jquery.fancybox.min.js

下载下来的 fancybox 只保留了 jquery.fancybox.min.css 和 jquery.fancybox.min.js 文件，其他的非必需。

我在 /simple/source/js/ 下新增了 wrapImage.js 用于在指定的 <img> 外裹一层 fancybox 所需要的属性

$(document).ready(function() {
    $('img').not('.notice img').not('.copyright-wrap img').not('.sidebar-image img').not('#author-avatar img').not(".mdl-menu img").not(".something-else-logo img").each(function() {
        var $image = $(this);
        var imageCaption = $image.attr('alt');
        var $imageWrapLink = $image.parent('a');

        if ($imageWrapLink.size() < 1) {
            var src = this.getAttribute('src');
            var idx = src.lastIndexOf('?');
            if (idx != -1) {
                src = src.substring(0, idx);
            }
            $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
        }

        $imageWrapLink.attr('data-fancybox', 'images');
        if (imageCaption) {
            $imageWrapLink.attr('data-caption', imageCaption);
        }
    });
});

head的ejs模版中引入js和css

由于我们需要在 html 的 <head> 标签中引入 fancybox js 库，所以我们找到 <head> 标签对应的模版文件 /simple/layout/partials/head.ejs, 利用之前配置的 fancybox 配置项在 head.ejs 中引入 fancybox:

<!-- fancybox 图片点击放大插件 start -->
<% if(theme.fancybox === true && page.fancybox !== false) { %>
  <%- js('js/fancybox/jquery.fancybox.min') %>
  <%- js('js/wrapImage') %>
  <%- css('js/fancybox/jquery.fancybox.min') %>
<% } %>
<!-- fancybox 图片点击放大插件 end -->

至此，图片点击放大预览效果已实现，撒花 ✿✿ヽ (ﾟ▽ﾟ) ノ✿


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK