寱语 kzeng's blog

在革命的纪念日前做完了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 很难保持同样的高度，虽然有各种各样的解决方式，但是都十分繁琐，还是依赖浏览器的改进比较省事儿。

对 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的后面。另外，建议在测试站点上使用，以防出现意外。

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

Cartson 做了几个 Drupal China 的 brochure，非常的漂亮，所以想循环的在 Drupal China 的首页逐一显示，通常这个可以通过 javascript 来实现，但是为了网站的整体考虑，打算用 PHP 来实现，所以就写了一段最简单的显示代码：

$img = array();
$img[] = '';
$img[] = '';
$max = count($img);
$count = rand(0,$max);
print $img[$count];
?>

但是却遇到了一个问题，Drupal 的 Mission Statement 中自动滤掉了PHP代码，导致无法正常显示，但是好在 Drupal 异常的灵活，可以很方便的解决这个问题。下面是一个简单的解决方案。嗯，其实就一句话：把mission statement的内容放在一个新创建的 mission.tpl.php 文件中，然后将 page.tpl.php 中的 print $mission 修改为 include 'mission.tpl.php' 即可。这样做其实也有一个好处，可以更方便的编辑 Mission Statement，因为它现在有一个单独的模板文件控制，而无需再在 管理->设置 中的文本框中书写 Mission Statement 。效果见Drupal China的首页。

不过发现了一个小问题：用 rand() 函数生成的 random display 效果其实并不是很好，可能是因为只有两个brochure的缘故，每个的显示几率都是 50% ，连续两次显示同一个brochure的几率是 25% 还是挺大的，如果brochure多一些，那么每次刷新页面得到的图片重复的几率就小了。

继续关于Drupal主题设计的讨论，讲一讲Drupal的Header部分的三个元素（Logo, Site-Name 和Site-Slogan）的摆放。如果你对CSS不是很熟悉，希望这对你有所帮助；如果你是CSS的高手，希望你能提出改进的意见：）

通常，我们会需要Logo, Site-Name 和 Site-Slogan 按照左图的结构摆放：把Logo放在最左边，然后Site-Name与Site-Slogan并列。在过去，这个通常使用table来实现，只要定义一个类似形状的table，把元素放进去就可以了，但是根据现在网站设计的标准，我们需要使用CSS来控制完成。首先需要将Logo图片放在左边，这个可以通过以下CSS定义实现：

OK，我们继续研究Drupal的Theme。各位同学手上都有Foundation Theme了，现在我们要解剖这个Theme：把它的CSS Class的脉络搞清楚，这对主题的设计非常有用处，所以我们从page.tpl.php的Header部分开始，page.tpl.php主要由三个div组成，下面是 Header部分的结构图（见下图），"."表示是class 名称，"#" 表示是ID 名称，你可能注意到了这个神秘的$layout变量，它对于纯粹的div 主题设计非常有用处，它的用处我们会在随后的几讲中阐述。

本教程突出两个特点：1）超级；2）简明。所谓超级，就是说你不需要任何关于PHP或是Drupal编程的知识；所谓简明，从这一句起我不再说废话：）使用本教程之前，请准备三样东西：

1. 空白的Drupal主题，也就是Foundation Theme，可以在这里下载zip文件。这个主题定义了所有的CSS式样，但是它Style.css是空白的，方便你填补。
2. Firefox 浏览器；
   

   <script type="text/javascript"></script>
   <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>

3. Firefox的Web Developer插件；

第一步，把空白的Foundation Theme的zip文件解压，放在一个名字叫做example的文件夹中（文件夹可以任意命名），然后上传到你的Drupal的Themes目录下，用安装了Web Developer插件的Firefox浏览器打开你的网站（最好是测试网站），在管理-〉主题中启用这个叫做example的主题，如果是你的正式网站，那么在你的个人账户中把主题设置为example，这样并不影响访客正常访问的你的网站。保存设置后你可以看到下图：