有备无患：Blogger传统模板：红黑「春日」v2

这是一个简洁风的单栏外加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