(转载)给 Jekyll 添加 FancyBox

原文地址:http://havee.me/internet/2013-10/add-fancybox-on-jekyll.html

这是一篇介绍无 jekyll 插件的形式来使用 FancyBox。

因为既然是博客是以 Jekyll 来驱动的，那么就尽量不要在本地生成静态页面再推送到服务端，也就是说，尽量不用插件。否则，大可以用 Octopress即可。在这个前提下如何给图片一些特殊的效果呢？这里我们使用 jQuery 来实现，譬如 FancyBox、Lightbox2。

FancyBox

其中有个问题，Markdown 语法中的图片我们一般是如此写法

![tag](url "name")

生成的 html 为

<image title="name" alt="name" src="url">

我们如果要使用（譬如）FancyBox 的话，则需要如下的链接才可

<a href="url" id="id">
  <img src="url">
</a>

我们当然可以直接在 markdown 文本写 html，但是实在不想这么做（当时从 Wordpress 转到 markdown 时吃尽苦头），还是用 jquery 来替换的好。既然目的明确，那么动手

首先下载 fancybox，解压到你的主题文件夹，譬如我的是 assets/themes/havee 下，编辑模板，在 head 区域添加

<link href="{{ ASSET_PATH }}/fancybox/jquery.fancybox.css?v=2.1.5" rel="stylesheet" media="all" />

在 body 区域最下方添加

<script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="{{ ASSET_PATH }}/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
// 给图片添加链接
$(document).ready(function() {
  $("p img").each(function() {
    var strA = "<a id='yourid' href='" + this.src + "'></a>";
    $(this).wrapAll(strA);
  });
});

// fancybox
$("#yourid").fancybox({
  openEffect    : 'elastic',
  closeEffect   : 'elastic',
});
</script>

如果你模板本身就引用 jquery，则不必再次引用

<script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

FancyBox 具体用法：

http://fancyapps.com/fancybox

« Prev Archive Next »