这是一个简洁风的单栏外加widget dock（wyt：直译“小玩意儿坞”-_-b）的Blogger传统模板（Blogger Classic Template）。之所以叫“红黑「春日」v2”，是因为从前一个模板中继承了一些想法，比如红与黑的色调——尽管并没有继承“凉宫春日”的元素。希望大家喜欢。
使用前说明
尽管模板上有一些示例用的widgets，但大多数情况下，大家仍然要自己动手修改模板。也就是说，这需要一点点HTML的基础——别担心，不会太多，我会在下面说明大部分的问题。如果你支持这个模板，请保留widget dock最右面的“关于本模板”（About this template）。另外，如果你想要分享这个模板，请遵循Creative Commons的“署名-非商业性使用-相同方式共享”许可。
演示blog
Haruhi Suzumiya 'Red and Black' v2
下载模板
安装
解压缩haruhiv2.tar.gz，将得到两个文件夹iconset72/和images/，以及7个文件template.html，haruhiv2.css，haruhiv2iehacks.css，haruhiv2.js，prototype.js，effects.js和readme.pdf。
- iconset72/：目录下有模板默认的widget dock的图标。如果你想继续使用的话，上传到FTP服务器的/images/目录。需要说明的是，这些图标来自Mac4Lin Leopard GTK Icon Theme，我为它们加上了倒影，大小为72x108px。推荐大家扩展dock的时候仍然用这个主题的图标，因为它们不仅漂亮，而且风格统一。
- images/：目录下的是背景图片，同样上传到/images/。
- template.html：HTML模板。接下来我们要修改的基本上就是这个文件了。
- haruhiv2.css：CSS层叠样式表。如果你已经把图片（包括背景和图标）上传到/images/，那么就不用改它了，不然你需要把文件里的URL指向相应的图片目录。上传到服务器的/styles/目录。
- haruhiv2iehack.css：IE专用的CSS，同样上传到/styles/。
- haruhiv2.js：Javascript脚本。上传到/scripts/目录。
- prototype.js：Prototype javascript框架。上传到/scripts/目录。
- effects.js：Script.aculo.us javascript框架的效果库。上传到/scripts/目录。
- readme.pdf：这篇文章的PDF版本。
自定义模板
“红黑「春日」v2”模板需要自定义的部分有：导航栏（navigation），摘录栏（sinppets）和小玩意儿坞（widget dock）。导航栏位于整个页面的右上角，将网站的布局清晰的呈现在用户的面前。摘录栏在blog标题和导航栏下方，分为左中右三个，你既可以在这里放Twitter饭否叽歪，也可以放blog feeds，将你和blog的个性自信的表现出来。小玩意儿坞总是在页面底部，它将大量的widgets收藏其中，只在用户点击时展开相应的widget，节省了网络带宽之外，更重要的是有Fisheye效果的dock，显然很酷。（wyt：不过，可怜的IE6不会看到这个效果，因为IE6不支持有透明度的png图片）
接下来将介绍三者的自定义方法。
导航栏 Navigation
导航栏在<div id="navigation" />中，每个tab应该是class="nabs"的SPAN。示例如下：
<!-- Begin Navigation -->
<div id="navigation">
<span id="homepage" class="navs">
<a href="<$BlogURL$>">首页</a>
</span>
... ...
</div>
<!-- End Navigation -->
摘录栏 Snippets
摘录栏在<div id="snippets" />中，它包括标题和列表，标题的class="snippet-title"，列表的class="snippet-list"。不过根据实际情况的需要，你也可以把列表改成一段文字或图片，只要小心不要超过原有的大小破坏页面布局，就可以了。示例如下：
<!-- Begin Snippets -->
<div id="snippets">
... ...
<!-- Right snippet -->
<h4 class="snippet-title">订阅我的博客</h4>
<ul class="snippet-list">
<li><a href="http://luliban.com/blog/feeds/atom.xml">原始feed</a></li>
<li><a href="http://feed.luliban.com/">Feedsky feed</a></li>
<li><a href="http://feeds.feedburner.com/luliban">Feedburner feed</a></li>
</ul>
</div>
<!-- End Snippets -->
小玩意儿坞 Widget Dock
Widget Dock比前面两者复杂一些，需要修改三个地方。首先是<div id="dock-container" />。Dock container中定义了所有dock item，是一个id="dock-name"的SPAN，其中IMG的SRC就是之前上传的图标URL，宽度默认为48，高度为72。其次是<ul id="widget-list" />。Widget list中有widgets的实际HTML代码，每个widget应由一个id="widget-name"和class="widget"的LI包装。最后是Javascript脚本haruhiv2.js，其中第二行中定义的widgets变量，包含了所有widget的name。模板中的dock container和widget list的name，必须和Javascript脚本中widgets的name相对应。
示例如下：
template.html
<!-- Begin Dock container -->
<div id="dock-container">
... ...
<span id="dock-profile">
<a href="<$BlogOwnerProfileURL$>" class="dock-item" onclick="return false;">
<img src="/images/profile.png" width="48" height="72" alt="Profile" />
</a>
</span>
... ...
</div>
<!-- End Widget dock -->
... ...
<!-- Begin Widget list -->
<ul id="widget-list">
<!-- Begin Widget profile -->
<li id="widget-profile" class="widget" style="display: none;">
<h4 class="widget-title">My Profile</h4>
<!-- Profile container -->
<$BlogMemberProfile$>
</li>
<!-- End Widget profile -->
... ...
</ul>
<!-- End Widget list -->
haruhiv2.js
// A list of widgets' names
var widgets = ['profile','search','recent-posts','gallery','favorite-blogs','rss','about'];
然后只需要将模板发布，就大功告成了。有什么意见，建议和砖头，欢迎留言。
P.S. 把feed换了个目录，Feedsky又要重新验证了：869bc65b
标签： blogger, 模版
