经过一夜奋战，Cais模板迎来2.4版本。较上一版本，本次更新其实并不重要，但的确带来了一些颇具趣味的变化。

  • 增加了类似Medium平台的「选中并分享」弹出式窗口1
  • 将Font Awesome字体移至七牛，以提高加载速度

下面简单介绍一下实现方法。

「选中并分享」按钮

这一功能主要通过一个名为hish.js的插件实现，相关资源可以去作者的GitHub项目页面下载。具体安装方法如下：

  1. 下载相关压缩包并解压，上传至Farbox同步目录
  2. 在.jade文件中添加可互动的区块id，关于如何实现这一步，之后会详细说明
  3. 在「Farbox后台-网站管理-渲染-插入脚本」中添加以下代码
    <script src="<custom url>/hish.js"></script>
    <script>$("#<custom id>").hish();</script>

在以上代码中被<>包围的字段可根据网站情况自行更改，前者是hish.js文件所在目录地址，后者是可互动的区块id，请将<>一同改掉。

据插件作者介绍，hish.js只对特别声明id的区块产生作用。这对Farbox的使用者来说是一大障碍，因为在严格采用Jade语法写成的模板文件中，区块通常只声明class，而对id并不友好。但我们知道，在HTML语法中，一个特定区块可以被同时声明class和id，这就为我们的解决该问题提供了一种思路。

在Jade语法中，如果我们要为同一区块声明id和class，可遵循以下格式： 

#a.b

当上述语句被解析成HTML后，语义如下： 

<div id="a" class="b"></div>

从上述案例中，不难看出Jade相较HTML确实是一种更为简明的语法，可以大幅减少写代码的工作量。

将Font Awesome字库迁移至七牛

要完成这一任务，步骤更为简单。

  1. 在Font Awesome官网下载相关文件
  2. 将压缩包内的网络字体文件（webfont，共5种）及.css文件（共2个）上传至七牛
  3. 在网站同步目录中的fonts.css或其他用得到Font Awesome字体的CSS文件中添加代码如下：
    @font-face {
        font-family: 'Font Awesome';
        src:url('http://<七牛地址>/fontawesome-webfont.eot?v=4.6.3');
        src:url('http://<七牛地址>/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
        url('http://<七牛地址>/fontawesome-webfont.woff?v=4.6.3') format('woff'),
        url('http://<七牛地址>/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),
        url('http://<七牛地址>/fontawesome-webfont.svg?v=4.6.3') format('svg');
        font-weight: normal;
        font-style: normal;
    }

其中4.6.3为Font Awesome字库的版本号，可根据实际情况调整。

项目地址


  1. 目前仅支持分享到Twitter及Facebook  ↩