You are here

主题制作(以Vancl 为例) 1

g089h515r806 的头像
Submitted by g089h515r806 on 星期二, 2010-01-26 12:02

我们接着前面的,继续往下.下面的一个div为list,它包含两个子div,leftNavi,rightCon。LeftNav表示左边导航,rightCon表示主内容。

我们可以把leftNav1,rightCon处理为两个区域。我们就可以直接的将这两个div中的静态html删除。注意,这里rightCon使用了系统自带的content,正文内容区域在Drupal中是必须的。
另外我们还添加了一些杂七杂八的东西,这些可能有些是没有用的,不过我们在这里先带上,将来如果没有用,再删除。
<?php print $breadcrumb; ?>
          <?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
          <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
          <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
          <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
          <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
          <?php if ($show_messages && $messages): print $messages; endif; ?>
          <?php print $help; ?>
如图所示。
标题变量$title,我们用不到,所以这里提前删除了。$mission我们的站点也用不到,所以也提前删除了。
 
我们继续往下。下面的div为bottom,它包含了两个子div,helpIntro和bottoms,
这部分比较简单,直接处理为两个区域就可以了。
替换后的代码如图所示:
最后我们把下面的script标签删除。我们非常高兴得看到,下面的script使用的是jQuery。这是我们都熟悉的。
最后在body结束标签前面加上 $closure变量,这在Drupal中是必须的,也是常常被初学者所忽略的。如图所示:
 
这样我们页面模板就制作完成了。
 
我们在制作页面模板的过程中,用到了很多区域,我们需要把这些区域放到info文件中,这包括$welcome,$site_nav,$topright,$tophot,$tele_car,$leftNavi,$content,$helpIntro,$bottoms共9个区域。我们在实现首页,产品页面的时候,会根据静态html的div对区域再做一些调整。调整后的区域如图所示:
我们还用到很多的js,css文件。也需要单独的拿出来,并在info文件指出其路径。我们在主题目录下创建两个文件夹,一个为js,一个为css。如图所示,然后把下载到的js,css分别放到着两个文件夹下。
 
最后,我们通过info文件,来加载这些js,css文件。代码如图所示:
现在还差节点模板和区块模板。以及评论模板。我们这里先说区块模板。在此以前,我们先复制garland里面的这些模板文件到vancl主题下面。
 
       经过上面的分析,我们可以看到Vancl网站中的区块都没有标题,很不符合Drupal的习惯。不过没有关系,它没有使用区块标题,我们就不输出区块标题就可以了。大部分都是这样的,少部分带有标题。那么我们可以采用这样的解决方式,在区块模板中直接输出区块内容,如果某一个区块需要输出标题,我们可以直接把它放到内容中去。这样我们就获得更大的灵活性,当然也是有牺牲的,那就是区块模板直接不能重用。但是在这个站点中,需要重用的不多。
 
       所以我们不能一成不变的墨守Drupal的一些习惯,必须根据具体实际作出适合我们需要的选择。这样Block.tpl.php中,就只有一句代码了:如图所示:
 
 
       对于节点和评论模板,我们暂时先借用garland的。我们看到了产品页面,默认模板是不行,对于帮助页面,也需要调整。评论模板也是这样。最后我们创建一个空的template.php文件。
       还有很多一些细节的工作,需要调整。我们目前关于Drupal主题的工作就先介绍到这里。我们初步根据产品列表页面,实现了Drupal的主题。

论坛: