drupal主题

<

p>

这两天又折腾了一下 drupal 主题。N. Design Studio 有一款很不错的 wordpress 主题 koi，abthemes把它移植到了 drupal上，用了几天，找到了一些 bug，陆陆续续修正了，然后又做了一些我需要的更改，总算稳定下来。又安装了一些新的模块，譬如 Tagadelic，可以提供一个 tag 云 block （右下角）和一个tag 云的页面，这样blog里用的 tag 马上就多了一个维度出来，可以直观的看到各个话题所占的比重，譬如和历史相关的话题中，原来我这里关于三国，秦国，汉朝和清朝的 blog 数目最多，在数量上差不多和生活相关的话题里的酒与旅行一样多了。这倒正是一句古话：“一壶浊酒喜相逢。古今多少事，都付笑谈中。”

因为使用 Tagadelic block 的缘故，非常需要一款比较窄的字体，blog 的默认字体 Georgia 太宽大，使得 tag 云看起来很别扭，但是HTML普遍支持的字体中并没有窄字体，开始的时候想到了 Drupal 的Dynamic Rendering 模块（前阵子用它来生成 blog 标题所用的“华康丽黑”字体），它的原理是利用服务器端的字体生成 Flash 来替换原有的字体，但是这种方法的效率不高，也会拖慢网站的速度，正巧想起了 Google 前阵子推出的 Font API，试了一下，不仅效果很好，速度也很快。

Font API 通过调用 Google Font Directory 里的开源字体来达到在网页显示其他非常用高质量字体的目的。它的应用很简单，只需要一些简单的 CSS 知识，譬如我用的这款 Yanone Kaffeesatz 字体，只需要在我的 CSS 文档的开头加入字体的定义：

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

然后在需用使用这款字体的地方利用 font-family 来调用就可以了，我的 Tag 云 block 和 页面就是一个例子。在 blog 中也可以用嵌入的 CSS 任意调用：

Give a man a fish, you feed him for a day. Teach a man to fish, you feed him for a lifetime.

稍感缺憾的是现在只有对拉丁文字字体的支持，没有汉字字体。不过汉字字体除了文泉驿外，似乎其他开源并且美观的字体并不多，另外汉字字体文件的庞大尺寸也许会影响到网页的速度。当然还有另外一个最大的问题：如果 googleapis.com 这个域名被 GFW 喀嚓掉了，那再好的字体效果也显示不出来。哈哈，反正现在 GFW 还喀嚓着我的 blog，所以我倒可以无顾忌的放心使用了：）

PS：听说因为开世博会，GFW赦免了一大批网站，但是我的 blog 却不在其中，阿弥陀佛，看来我真的罪孽深重：）

在瘾科技上看到的 Adobe CS5 的新消息：

Dreamweaver CS5
Live View 浏览器，可以实时预览 PHP 程序，不用上传
和 Drupal、Joomla、Wordpress 进行整合
检查 + 启用／停用 CSS - 如题，如果有用过 Firefox 底下的 Firebug 的人可能会有概念 :p。
与 BrowserLab 在线服务整合 - 在线比较不同浏览器的差异

在 Drupal 的官方网站上发现一段演示的视频链接（Quicktime格式），视频中是以 Wordpress 为例，Drupal应该也差不多 。看样子为了支持 PHP 即时预览，Dreamweaver CS5 在计算机上同时安装了一个类似 XAMP 的本地服务器，这样就可以即时查看 PHP 的设计显示。这时一个不错的注意。前两天更改主题的时候，每改动一下，就要上穿到远程服务器看看效果。现在 Dreamweaver 直接支持 Drupal 预览，以后再作 Drupal 主题设计就方便多了。现在用的这个天蓝色的主题是以前被批评过后放弃的，但是发现还没有被我删除，就拿出来晒晒。

晚饭啃“赛百味”的时候，看到了一些矢量水墨国画，在 photoshop 里拼摆了一下，想创建一个新的 Drupal 主题风格，其实除了三只鸟以外，似乎也就是单纯的文本文字，这样也好，很清爽。等有时间，把这个构图转化为主题文件。

春天的周末，抽空重新作了一个 Drupal 的主题。很久没有亲自操刀了，图省事，用了不少官方网站直接提供的主题，但是实际上，也没有省多少事情，因为每一款主题安装后都要不断地修正。比如为英文网站设计的主题在显示中文的时候普遍文字过小，12px 的字体看上去很吃力，所以必须调整，还有各个组件的摆放，自己订制的 block 的显示等等。所以又重新装了 Adobe Master Suite CS4，自己动手。

设计非我所长，所以主要是参照了一款 Wordpress 的主题：Marine。有些不错的地方，很喜欢这个颜色的搭配，春天了；也有些我不需要的地方，所以还是按照习惯，在 Firework 里画了草图：

图画完，做起来就快了，base theme 用的是 zen，这是一款空白的 theme，只需要按照设计图写入 CSS 即可，不过因为主题的需要，我还是改动了 page.tpl.php 和 node.tpl.php，主要是圆边角的显示，为了以后更改的方便，所以没有采用一张背景图片的方法，而是使用了三个 div 拼接；也写了一小点儿的 PHP  code，因为我需要用到标题上那样的日期显示，Drupal 默认的日期是不行了，所以重新用 date() 函数format了 $created 变量。

然后就没什么了，按部就班，参照 Marine 的 CSS，所以省去了不少计算的麻烦，不过我的 header 因为和 Marine 不一样，所以还是不得不在 Maple 里算了尺寸长度（杀鸡用牛刀，呵呵）。header 上的花藤是一种叫做 Painted 的字体，比用 Photoshop 的 bursh 要方便很多，虽然形状比较单一。

就这些了，最后，我们为这个主题想一个深远的含义吧，就像分析小学课文一样：头顶的一丝蓝天与背景的大片黑暗 —— 所以小朋友要好好学习：）

在革命的纪念日前做完了Commune 这个主题 。看上去还不错。春天已经过去，再顶着“春天花花”有些不伦不类，所以火热的革命一下：）顺手找到了 Eugène Delacroix 的 Liberty Leading the People， 拿装点一下门面，算是为新的外观主题揭幕。尝试了按照 Zen 的标准去写这个主题，但是最后一步还是坐了一些改动。带着枷锁跳舞固然是一种享受，但是最终还不愿意被它束缚，去放弃页面下的 Related Blogs 的部分，以及不加区分的把 Tags 和分类放在一起。还是按照就的习惯来吧。其实我觉得 Zen 的框架设计的并不好。有些地方用起来不是很方便。

另外，对于 Blog 本身也做了些小小的改动，Blog 的正式名称更改为 寱语 。之所以把前面的 kzeng 去掉了，是因为我已经“垄断”了这个词在网络上的适用。在 Google 中文里搜索 “寱语” 会有 15500 个页面，搜索 “ 寱语 -kzeng ” （意思是包含 寱语  但是并不包含 kzeng）只有 1400 个页面。这个词大于 90% 的用途都在 kzeng 这里，所以就不必在重复了，//grin :-) 另外，网站的说明也改为“ kzeng's blog ” 了，写的东西挺杂的，不好再用一两个词来描述了。呵呵，翻开新的一页！：）

2006 年 4 月 4 日开始使用“春田花花”主题；2006 年 12 月 9 日对春田花花做了改进，一直用到了现在，所以想换一下了，昨天大致在 Firework 里设计了一下, PNG 的草样已经做好（上图）,现在需要做的就是移植到 Drupal 上。新的主题暂时命名为“公社　（commune）”吧，主要用深红，浅黄色和灰色三种颜色，有点革命的感觉？（^_^）。技术上没有太大的突破，不过想采用 Zen 的标准，所有的设计完全用 CSS 来控制，不再自己更改 *.tpl.php 和 PHPtemplate.php，这算得上是唯一的小挑战吧。新的主题会简洁很多，字也会大很多。呵呵，既然叫做 Commune，又赶在这个时间上，算是应景纪念了法国大革命吧。七月十四日攻陷巴士底狱。

重新设计了 blog 的外观主题，除了新年新气象，辞旧迎新以外，主要是为了让 blog 使用的主题更加像一个 blog 的主题，上一个“春田花花”主题是 port Zen Garden 的 Lonely Flower 的，Zen Garden 类似于 CSS 设计的概念网站，虽然很多主题很漂亮，但是并不是为 blog 专门设计的，所以分离式的主体与边栏看起来有些怪异。而这款新的主题（还没有想好叫什么名字）则是按照 blog 主题的“窠臼”：窄幅，一个边栏，圆边角，阴影投射。。。该有的都有了。

保留了原来“春天花花”的主色调，绿色和橙色，这两种颜色看起来比较喜庆（土！），同时该了一下灰色的色调，看起来不至于太费眼睛。另外，融入了一些中国的元素，譬如梅花，莲藕与竹叶。呵呵，毕竟不是搞设计的，所以只能凑合着看自娱自乐了。另外，恢复了 site name 的链接，不再使用图片，这样以来这个主题就可以很容易的供别人使用了。一点小感叹：IE 终于支持 min-height 了。没有 min-height 的支持，基于 div 的 column 很难保持同样的高度，虽然有各种各样的解决方式，但是都十分繁琐，还是依赖浏览器的改进比较省事儿。

另外，刚刚出炉的主题已经发现了一个 bug，我的 mission statement 不见了，呵呵，今天先到这里吧，回头慢慢的捉虫子。这个主题同时也制作了 Drupal 5.0 版本的，Drupal 5.0 的主题与 4.7 的主题略有不同，以后再详细说。

对 DrupalChinaGreen 这个主题的第一个版本做了一些小的修正，列表如下：

• 删除了第一个版本中忘记删除的 Google Analytics 代码 （DrupalChina 的那个代码我忘记移除了//blush）；
• 修正了左边栏下沉的问题 （因为 DrupalChina 只用到了右边栏，所以左边栏一直没有测试果）
• 优化了图片文件的大小，原来的主题文件压缩后仍然有700多K，而现在只有73K，大小只有原来的1/10，大大的加快了网站的速度；
• 添加了 screenshot.png ，现在在“管理->主题”中可以看到这个主题的缩略图

呵呵，如果有其他的bug，欢迎指出，最新的显示范例可以在我的测试网站看到：）另外，现在正在应大伙儿的要求制作银灰色调的主题，同时还在做一个适合 CMS 使用的组织网站的主题，希望快些完工：）更新的主题文件附在这篇blog后面。

很多人都非常喜欢我给 Drupal China 做的那款主题，但同时又想保持Drupal China的外观主题的独特性，所以就在Drupal China 的主题上改制出了绿色调的主题，暂时叫做 DrupalChinaGreen，提供给大家下载使用，左边有缩略图，可以点击看大图。另外，在我的测试网站可以看到实际的效果。这只是一个非常初步的测试版，我在我的测试网站上测试了它的运行，IE 6.0, Firefox 1.5, Opera 9.0 下都没有问题，不过很有可能它存在着我没有发现的问题，所以欢迎大家帮忙测试，下载文件附在这篇blog的后面。另外，建议在测试站点上使用，以防出现意外。

这款主题本着"简单"二字，删除了一些为 Drupal China 的主题所写的CSS （譬如 Album的CSS，因为并非所有的用户都需要用到这些模块）。如果需要做什么更改，欢迎改动。

最后，如果有什么 bug，欢迎在这里报告：）

Mitja Ribic就是我的网站的主题的设计者，这款 Lonely Flower 是他提交到 Zen Garden 的一款展示主题，后来我想把它转化为 Drupal 的主题，就写信向他请求许可，结果他很爽快的就答应了，所以才有了现在这款正在使用中的主题。前两天从 drupal.org 收到一个来自希腊的 Drupal 用户的一封信，他想拜托我帮他转化一款主题。主题已经设计完毕，是 PSD 格式的，需要移植到 Drupal 上，仔细看了主题的作者，原来也是 Mitja，所以就一口答应下来，决定帮这个希腊朋友的忙。今天收到了这个主题的 PSD 文件，呵呵，专业的网站设计师的手笔果然不同啊！，狠狠的赞一下！：）现在挺喜欢这种嫩绿色调的搭配的，给人一种清新的感觉，三栏式的设计，既增大的信息量，又注意避免了重复同样边栏的单调。呵呵，觉得这个任务本身也挺有挑战性的，因为要完全从 PSD 的蓝图开始，自己从头用 PHP 和 CSS 实现模板的效果。不过估计也挺耗时的，因为一些细节的地方，譬如导航菜单的高亮或是图片标记，众多的圆边角的设计都是细活儿，需要边计算边做的。现在再写开题报告，时间有限，所以刚才写信问了委托我的希腊朋友看看他能不能等，如果他肯等的话，我倒是很希望慢慢的把这个主题做好；如果他不愿等话，就没有办法帮他这个忙了。不过应该还是会仔细研究一下这个主题的设计，长些经验值：）因为这个主题是私人用途的，所以没有配发大图，不过从左边的缩略图还是能一览其美：）