爲BlueLake主題增長圖片放大效果

fancyBox 是一個流行的媒體展現加強組件，能夠方便爲網站添加圖片放大、相冊瀏覽、視頻彈出層播放等效果。優勢有使用簡單，支持高度自定義，兼顧觸屏、響應式移動端特性，總之使用體驗至關好。

如今，咱們就將 fancyBox 集成到 hexo BlueLake 中。

1、下載 fancybox

git clone https://github.com/fancyapps/fancybox.git

文件下載下來以後，以下圖所示：

• 將 dist 目錄下的兩個 js 文件拷貝到 BlueLake 主題的 source/js 目錄下。
• 將 dist 目錄下的兩個 css 文件拷貝到 BlueLake 主題的 source/css 目錄下，並將後綴名修改成 .styl 。

fancybox 插件依賴 jquery ，因此也須要準備 jquery 相關 js 文件。將 jquery.js 也下載到 BlueLake 主題的 source/js 目錄下。

2、增長圖片放大功能

一、設置 fancybox 使用開關

在 BlueLake 主題的 _config.yml 文件中，添加：

# 圖片放大功能
fancybox:
  enabled: true

二、引入 js 文件

基於 fancybox 插件，咱們還須要寫一些自定義 js 代碼，給文章中的圖片加點樣式：

$(document).ready(function() {
    wrapImageWithFancyBox();
});
/**
 * Wrap images with fancybox support.
 */
function wrapImageWithFancyBox() {
    $('img').not('.sidebar-image img').not('#author-avatar img').not(".mdl-menuimg").not(".something-else-logo img").not('.avatar').not('.share-body img').each(function() {
        var $image = $(this);
        var alt = $image.attr('alt');
        var src = $image.attr('src');
        $imageWrapLink = $image.wrap('<a data-fancybox=images data-caption="'+ alt +'" href="' + src + '"></a>');
    });

    // fix微信分享二維碼須要開新頁面查看問題
    $('.qrcode').attr('data-fancybox', 'images');

    $().fancybox({
        selector: '[data-fancybox="images"]',
        thumbs: false,
        hash: true,
        loop: false,
        fullScreen: false,
        slideShow: false,
        protect: true,
    });
}

新建 wrapImage.js 文件，將上述 js 代碼添加到 wrapImage.js 中，也放到 BlueLake 主題的 source/js 目錄下。

在 BlueLake 主題下的 layout/post.jade 文件中，添加引入 js 文件的代碼：

if theme.fancybox.enabled
	  script(type='text/javascript', src=url_for(theme.js) + '/jquery.js' + '?v=' + theme.version, async)
      script(type='text/javascript', src=url_for(theme.js) + '/jquery.fancybox.js' + '?v=' + theme.version, async)
      script(type='text/javascript', src=url_for(theme.js) + '/wrapImage.js' + '?v=' + theme.version, async)

以下圖所示：

三、引入 css 文件

在引入 css 文件以前，須要將部分代碼註釋掉，不然在執行 hexo -g 時失敗：

/* 將第483行片斷進行註釋 */
@supports (padding: max(0px)) {
    .fancybox-caption {
        padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
    }
}

和

/* 將第670行片斷進行註釋 */
@supports (padding: max(0px)) {
    .fancybox-caption {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

而後在 BlueLake 主題下的 layout/base.jade 文件中，添加引入 styl 文件的代碼：

if theme.fancybox.enabled
      link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/jquery.fancybox.css')

以下圖所示：

3、hexo 部署

切換到博客根目錄下，執行如下命令來預覽主題效果：

hexo clean
hexo s

這時會在博客根目錄下生成 public 目錄，新建立的 js 和 css 文件會被添加到這裏。瀏覽器訪問 localhost:4000 查看圖片放大效果。

若是圖片放大效果沒有問題的話，執行 hexo -d 命令將主題更新到 github 上。

---

點關注，不迷路

好了各位，以上就是這篇文章的所有內容了，能看到這裏的人呀，都是人才。

白嫖很差，創做不易。 各位的支持和承認，就是我創做的最大動力，咱們下篇文章見！

若是本篇博客有任何錯誤，請批評指教，不勝感激 ！

點關注，不迷路

好了各位，以上就是這篇文章的所有內容了，能看到這裏的人呀，都是 人才。

白嫖很差，創做不易。 各位的支持和承認，就是我創做的最大動力，咱們下篇文章見！

若是本篇博客有任何錯誤，請批評指教，不勝感激 ！

本文來自： 微信公衆號【大數據實戰演練】。閱讀更多精彩好文，歡迎關注微信公衆號【大數據實戰演練】。