经过连续两天的奋战，Cais v2.2版本终于问世了。由于在制作前没有进行良好的整体规划，因此在改写模板文件时候经常会出现返工情况，最终成品的整合度也不高。

但从目前的情况来看，Cais模板已无限接近个人最喜欢的效果，如果未来有时间会进一步优化，以减小模板的文件尺寸。

最近把太多的时间花在学习Farbox模板制作上了，正经事耽误了不少，所以短期内本模板不会再更新。等下一次升级的时候，预计会加入手绘内容。

下面是更新记录时间。较上一版本，最新的Cais模板进行了如下改动：

新功能

  • 增加全屏首页功能1
  • 增加首页自动向下滚屏功能
  • 增加全局返回顶部按钮
  • 重制归档页面
  • 新设两种分类页面2
  • 首页文章列表增加访客统计
  • 增加首页菜单按钮配色方案自适应小尺寸屏幕
  • 修改代码区块样式
  • 优化网页加载速度

Bug修复

  • 修复文章列表tags按钮之间间距过密的问题
  • 修复原生评论按钮与主题风格出入过大的问题
  • 修复菜单按钮被全屏header元素遮挡导致部分按钮失效的问题
  • 修复分类页面在iPhone 5S上显示时出现横向滚动条的问题
  • 修复TypeKit字体在加载完毕前后出现屏闪的问题3

说明

为了提高部分代码的渲染优先级，未将此类语句写入.jade和.scss文件，建议在「网站设置」-「渲染」-「插入脚本」中添加以下内容，并替换KitID字段： 

 <style>
    blockquote p{background-color:#4C4B49;color:#E8E7E2;padding:1em;border-radius:5px;
</style>
 
<style>
    img{max-width:100%}
</style>

<style>
    #fb_new_comment .c_button:hover {background: #fbfbfb; color:#ff5449; border:1px solid #FF5449}
</style>

<style>
    #fb_new_comment #c_submit:hover {color:#ff5449; }
</style>

<style>
    #fb_new_comment .c_button,
    #fb_new_comment #c_submit {
    cursor: pointer;
    font-family: "museo-slab", sans-serif;;
    font-size: 0.9em;
    line-height: 1em;
    width:120px;
    letter-spacing: 0;
    border-radius: 5px;
    color:rgba(0, 0, 0, 0.44);
    background:#fbfbfb;
    padding: 5px 5px 5px 5px;
    }
</style>
<style>#fb_new_comment .input_body ul li label {color:rgba(0, 0, 0, 0.44);font-size:0.8em;line-height: 1em;}</style>

<style>
    .wf-loading body{
    opacity: 0;
    visibility: hidden;
    }
 
    .ie.wf-loading body{
    visibility: hidden;
    }
 
    .ie.wf-active body{
    visibility: visible;
    }
 
    .wf-active body{
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.64s ease-in-out;
    -moz-transition: opacity 0.64s ease-in-out;
    transition: opacity 0.64s ease-in-out;}
</style>

<script type="text/javascript">
  (function() {
    var config = {
      kitId: 'kitId',
      scriptTimeout: 3000
    };
    var h = document.getElementsByTagName('html')[0];
    h.className += ' wf-loading';
    var t = setTimeout(function() {
      h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, ' ');
      h.className += ' wf-inactive';
    }, config.scriptTimeout);
    var d = false;
    var tk = document.createElement('script');
    tk.src = '//use.typekit.net/kitId.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (d || rs && rs != 'complete' && rs != 'loaded') return;
      d = true;
      clearTimeout(t);
      try { Typekit.load(config); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();
</script>

以上代码所涉功能包括：

  • blockquote样式
  • 修复大图在手机屏幕上撑破上级容器的问题
  • 原生评论按钮样式
  • 在所有页面（包括自行添加的About或其他页面）加载Typekit字体，并消除屏闪现象

按我下载 密码：4RnBNEGx

按我下载（4月2日更新） 密码：2zLl0Fuf

  1. 以下三个功能全盘学习了可乐橙老师的设计，特此鸣谢  ↩

  2. categories和category，借鉴了Default Red模板，向原作者表示感谢  ↩

  3. 将所有.jade文件中设计嵌入TykeKit的标准代码去除，通过脚本实现  ↩