修改 Blogger 模板初体验
4/16/2009 01:47:00 上午 发帖者 流水弦歌
写这篇有关 Blogger 模板DIY的技术总结文章,似乎稍显过早。因为本人使用 Blogger 也不过才三个多月时间,其间到处搜找有关 Blogger 模板的修改资料,试验学习。算是一点个人的心得体会吧,暂录于此。
目前最流行的两类博客后台系统,一个是 Blogger,另一个是 WordPress(简称WP),个人独立架设站点的博客多采用WP,因为其采用PHP编程,后台程序(Program)、应用数据(Data)和界面(UI)都完全可控,插件众多,功能最为灵活强大。而 Blogger 方式则只能通过模板方式对开放的应用数据(Open Data)和界面(UI)进行控制,由于无法直接介入后台的程序,功能相对要稍弱一些。但对于非独立建站的博客,选用 Blogger 系统还是可行的,其功能的扩展主要通过 Javascript 脚本对开放数据的处理来完成。
一个初始的 Blogger 站点形式非常简单,如果你刚刚申请,从未对缺省模板进行改造的话,你甚至可能对其非常失望——异常单调的界面,所有的帖子在首页都是全文输出(无论多长),除了光秃秃的“博客归档”之外再无其他多余的功能,你甚至不知道如何修改一下它的样式,一切的一切,都不知道从何做起。
然而正是这样一个最简陋的开始,才能给广大 Blogger 们提供乐此不疲的改造空间——模板的内容只要符合XML的格式规范,其内容是不作任何限制的。你可以随心所欲地修改页面的样式,加入自己喜欢的JS代码,只要你愿意,你可以用能够读取出来的开放数据搭建出几乎任何你希望输出的内容,从这个意义上讲,它的开放性与WP几乎是不分伯仲。
(1)于是我的动手就是先从选择一个喜欢的模板开始,我是从 http://btemplates.com/
上面根据分类找到自己中意的模板的,每个模板的缩略图点进去后,都是一个以该模板生成的样例站点,你可以仔细观察,选择好之后下载模板。
然后进入 Blogger 的管理页面“布局”->“修改HTML”,就可以将已下载的模板上传,操作成功之后,你的博客便立刻换样子了!
(2)将首页改为摘要输出
对于像我这样每篇动不动就上千文字的家伙,如果首页显示全文,那简直就是密密麻麻,读者根本就没法看了。Blogger 没有提供一个简单的方法在后台直接设置该属性,于是我只好参考了链接中提到的方法,将首页的每篇改为固定高度的摘要输出。(唯一的一个毛病是如果帖子里有嵌入视频,这个方法并不能遮盖视频)。
(3)设置“标签云”
Blogger 自带一个小工具也可以显示所有标签,但是那个方式是纯列表型的,上百个标签一下拉得老长,对于像我这样喜欢给文章打上一堆标签的人,那简直就是噩梦。
所以这个链接里的“标签云”代码,我相对比较满意,不同频度的标签也可以设置不同大小的字体,我怕中文界面下不太好看,一直也没设置。于是暂时就按照出现频度大小排序分多行排列在那里。
这里还有一个更炫版的Flash三维版“标签云”,如果不嫌这个太哗众取宠的话,我倒是也想有时间的时候试验一下。
(4)在每篇帖子正文后添加“相关文章”
这是我对新浪博客最诟病的地方,点进每个帖子后无法看到该作者与此相关的主题,从而也无法实现博文的黏性。
通过上贴时给博文打标签,在显示文章时就可以检索相关标签的匹配程度,从后台博文列表中获取到“相关文章”。目前我设置显示的是10篇相关文章,由于我的标签比较多,所以这段代码运行起来稍有点慢,我正在考虑是不是稍微缩减合并一些标签,提高这部分的显示速度。
注:后来我又发现了一个更好玩一些的相关文章代码,我打算有时间学习一下代码,尝试之后如果可以,也搬到自己站上来。请见“水瓶尤加利的 DIY 小天地”(这个站好东西极多!强烈建议对JS和Blogger感兴趣的同学逐篇学习)。
(5)随机文章 Stuff-a-Blog
很简单的小工具,只要到该站点上 Bstir里面输入自己博客网站的首页地址,它就会自动生成一段JS代码,将之放到侧栏的空位上即可。它可以动态或静态两种方式显示,本站首页的右栏便有这样一个动态的例子。
(6)随机文章跑马条
也是参考了水瓶尤加利的DIY文章,将这一功能照猫画虎地在本站底部实现。这是利用了Blogger 本身提供的“博客归档”模块中的文章列表,通过JS程序读出并随机显示于底部的实现。目前只能最多追溯到50篇,同(5),所以要追溯更早的文章还是个问题——我现在已经有352篇帖了!以后有时间的话再想想办法吧。
(7)右上角的“正在加载”
参考了阿瓦的这篇小技巧,主要是为了当页面载入时间过长时,给读者一个心理的缓冲。
(8)其他的Widget小工具
现在在页面上嵌入 Widget 小工具,数据应用能够相互开放交流,这是Web 2.0时代的潮流趋势,Blogger 除了自身有上百种小工具可待选之外(“布局”->“页面元素”->“添加小工具”),许多 SNS、Feed、微博客等网站也提供自己的小工具,将自己的数据开放出来,便于其他外部应用使用。目前我自己的侧栏上便嵌入了 FriendFeed 和豆瓣收藏秀各自提供的 Widget,将我在豆瓣上的影音图书,以及 FriendFeed 上收集我个人所有的网上活动,都以Widget的方式加以显示——当然,这其中离不开 JS 的功劳,因为这所有代码的实现,都是 JS 的。
写到这儿有人可能要说了,嘿,你写了这么多JS的方法,可我的博客网站不支持 JS 怎么办?别急呀,我上一篇不就给出过“解决新浪对JS代码的屏蔽”吗?这方法其实对所有屏蔽JS代码的网站都适用的。不妨试试看,别看我也只是个初学者,可这些也算抛砖引玉啊,人的想象力是无穷的,只要尽情发挥,不要习惯性地被某些人为的束缚限制住了手脚,说不定你也可以给自己的小窝添块砖加块瓦呢,你说是不是呢?
——————————————————————————————
其实写到这里,不知道你注意到了没有,在Web 2.0 时代,信息共享和发布的方式已经较几年前有了巨大的变化。越是开放性好的服务,就越能得到发展的优势。以往那些将数据封闭起来、只允许自己网站程序使用的方式已经越发显得落伍了,而取而代之的是开放API,开放平台,开放数据,定制化、个性化的应用发展趋势,使得用户发布和获取信息越来越简洁,越来越直接。
以前人们使用的是IE一种浏览器,现在更有生命力的是Firefox加上功能强大的扩展。信息接收端面对的是越来越多样的平台和浏览器,只有实行开放统一的标准才能在这样的信息流中畅行无阻。
以前人们发布信息的方式是论坛,只是非常有限的地域和受众,现在一条有价值的信息可以通过 Feed 和SNS 社会化网络的传播推送到非常遥远的地方,转眼让成千上万的人接收到——而这条信息的起源,甚至可能只不过是一条通过手机发送的 Twitter 信息。
以前人们分享信息是通过邮件、聊天工具,点对点的传播,而现在的信息传送渠道是通过人群关系,以定向广播的方式蔓延铺散开来,其扩展面和传播的高效率是论坛方式所不能比拟的。
这一切,标志着世界在信息时代的扁平化趋势。信息的开放、共享、交流,在这一趋势中起到越来越巨大的推进作用,这是任何势力也无法遏制和阻隔的。
所以我也希望每个人都能够顺应这个时代趋势,因为我相信只有自己更加开放,更愿意共享,更善于交流,才有可能从这个世界中得到更多的回报。
——————————————————————————————
延伸阅读:
- Blogger Template 标记详解 (英文)
- Blogger Template 帮助中心 -> 定制化模板 (英文,内容超多)
2009年4月16日 07:24
很不错的工具^_^
而且很惊喜的是这篇没有问题,都是技术普及~
2009年4月16日 11:17
嗯嗯,我仔细看了看“延伸阅读”里面的定制化模板,还有不少有趣的内容可以挖掘。有时间的话可以慢慢看,争取每一两个月搬弄点小花样出来。
2009年8月11日 14:50
谢谢,我刚刚正发愁呢~ :)