微调与学习笔记

学习笔记
(pic via)

之前曾说过要对模板再次进行一些更改与调整，我想到今天也就改得差不多了，总体上没什么太大的变化，但是在细节上我就不知道调整了多少次了。更改的过程中当然也总结了一些经验，在这里做一些笔记以备以后用到，同时也与大家分享。


导航

jQuery

关于jQuery，其实我知道的还很少，仍然在学习中，除了从别人那里抄来的jQuery页面载入进度条和识别外部链接并在新窗口打开之外都是基础得不能再基础得东西，我都不好意思拿来分享。

因此，这里只发些中文教程：

  1. 官方提供的简体中文教程
  2. Leeiio整理的PDF教程
  3. Belen整理的一些jQuery教程
  4. jQuery 1.3 参考文档
  5. 35个jQuery菜单的例子
这里就说这些吧，5个虽然不多，但对于入门来说已经足够，当然你搜索一下还能找到更多的。

jQuery可以说是无处不在，包括一些Blogger Hack，例如BRPS和最新回应2.0都会用到。假如你用了这些Hack的话，不妨也学学jQuery吧，不用白不用。

新的评论样式

评论样式

这个可以说是改变最大的地方了。灵感，或者说抄袭自Shawn's Blog，至于其使用就没什么特别的了，使用Blogger楼层显示并自己定义CSS即可。

不过需要注意的是原文的这一段：

<dl id='comments-block'>
<script type='text/javascript'>Index = 1;</script>
<b:loop values='data:post.comments' var='comment'>
<span class='CommentIndex' title='%u4F60%u5728%u51E0%u697C%uFF1F'><script type='text/javascript'>document.write(Index); Index= Index 1 ;</script></span>
红色部分有误，应改为：

<dl id='comments-block'>
<script type='text/javascript'>Index = 1;</script>
<b:loop values='data:post.comments' var='comment'>
<span class='CommentIndex' title='%u4F60%u5728%u51E0%u697C%uFF1F'><script type='text/javascript'>document.write(Index); Index= Index+1 ;</script></span>
其实这个样式还有一个缺点：当评论数达到三位数时不太好看，不过很显然在相当长的时间里我完全不必考虑这些……

提速

这个题目起得有点大了，其实我也只做了三件事：撤去对速度影响较大的Widget、去除无用的CSS，压缩CSS。而它们的根本思想都是一样的：精简代码。

另外提醒一下，精简代码的过程中一定要时刻记得备份。

1.撤去对速度影响较大的Widget


这个可以说是最简单的，不过对速度的影响也最明显，具体过程肯定不用我废话了。

我撤去了Twitter Badge和BlogUpp，前者的服务器本来就不好，而且最近被墙后即使改了host也依然访问不了，干脆撤去；后者则是因为他们把图片储存在Amazon S3上，速度也不佳，撤之。

2.去除无用的CSS


我使用的Arthemia模板的原版比较复杂，很多功能Blogger都实现不了，转换者只好精简了一些页面元素，却没有精简那些CSS，结果就只好我自己动手了……

这个过程也很简单，浏览CSS代码时找到可疑的就搜索HTML中有没有对应的选择器即可，有点麻烦，不过花不了多少时间。

3.压缩CSS


这个我除了自己做外，还借助了Firebug。

具体为查看元素时注意样式中有删除线的CSS中有没有重复的内容，有的话就保留父级元素的CSS，其他的去掉。当然，去掉之前你最好先利用Firebug的禁用功能测试一下。

这个过程虽然也不难，但是非常麻烦，不想浪费时间的话，不如试试这些服务：

  1. Online CSS Optimizer/Optimiser
  2. CSS Compressor
  3. CSS Formatter and Optimiser
  4. CSS代码在线压缩
不过说实话，这些服务我都没有试用过，具体效果如何我也不太清楚，不过，只要你事先进行了备份，又何必害怕出错呢？

另外还有一个要点：消灭style="..."之类的东西，尤其是那些不断重复的。

其他

On-Stage图标预览

其他的也都没什么好说了，我只是改了图标的大小，同时为了方便以后修改，把它们由<img>标签中提取出来改在背景中而已。

顺便说一下，我使用的图标基本上来自这个：On-Stage。

评论

发表评论