如何为Drupal网站创建一个Magazine Style的首页

翻译并发表在自己博客上的关于如何为Drupal网站创建一个Magazine Style首页的文章，文章里面的图片可以去我的博客上看，我直接复制过来的文章：http://pantao.name/blog/2009/03/drupal-magazine-style-frontpage.html

杂志样式首页（Magazine Style Homepage）是一种应用很广泛的首页样式，它能很好的组织与展示大量的内容，尤其是图文混排的内容，这种样式我们在各种在线杂志、门户网站等等上面看到过很多，在CMS中，我们也见到过很多WordPress的Magazine Style Theme，但是我们确很少看到有Drupal使用的Magazine Sytle主题，这使得很多刚刚接触Drupal的人认为Drupal还没有WordPress的定制能力强。

本文为大家简略介绍一下，如何为Drupal创建一个Magazine Style的主题首页，这个首页有三个内容显示区块，左上区域为一个"首页头条"区块，在这个区块中，将显示一篇文章的摘要、文章的缩略图以及标题，这个标题是指向到文章页面的链接；右上区块为"推荐阅读"区块，在这个区块中，将显示被推荐到首页显示的文章的标题列表，每一个标题后带有该文章的缩略图；下方为"分类文章"区块，我们将四个分类的文章标题列表在这个区块中以文章分类为基础分开显示。如下图所示：

drupal-magazine-style-frontpage-snapshot

本文章对读者的主要要求有：

* 使用过Drupal一段时间，并且看过Drupal默认的主题的源代码（推荐）
* 了解如何安装Drupal模块与主题
* 了解一些基本的PHP、CSS以及xHTML知识

在本文章正式开始之前我们首先请大家安装好下列Drupal模块：

* CCK (Content Construction Kit)
* FileField
* ImageAPI
* ImageField
* ImageCache
* Views

我们在撰写本文时使用的是Drupal 6.10版，使用的主题是Framework theme。
使用ImageCache创建三个图片自动绽放动作

按下表所示信息创建三个ImageCache Preset：
ImageCache Preset Dimensions Namespace Width Height Actions
Large 640px 640px Scale And Crop
Medium 350px 350px Scale And Crop
Thumbnail 100px 100px Scale And Crop

ImageCache设置完成之后，我们现在可以通过CCK为Story内容类型增加一个图片字段，当我们在撰写文章时，如果作者通过此字段上传了图片，那么ImageCache将自动对图片进行绽放与裁切。
使用文章分类来使事情简单化

我们可以在网上随意搜索到很多WordPress的免费与收费的Magazine Style Theme，我们稍稍研究WordPress的这些主题就可以很简单的发现他们都是通过一个十分简单的方法来读取首页内容的，那就是"分类"，我们现在要实现相同的功能，所以也可以使用相同的方法。

首先我们创建一个词汇表，名为Tags（标签），将其设置成为"Tags"，这样我们就有了和WordPress或者Movable Type等博客程序一样的标签系统，将标签类型中的"Story"前面的复选框选中，点击保存；然后我们添加一个名称为"Category"（分类）的词汇表，将其设置成为"Mutliple Select"（多选），然后将"Story"添加到这个词汇表中，这样我就有了博客系统中的分类系统。接着我们在Category中添加几个词汇（项目）：

1. Headline（首页头条）：所有属于这个分类的文章都将在首页头条区域显示，当然，我们可以设置最多显示几篇；
2. Features（推荐阅读）：所有属于这个分类的文章都将在首页的推荐阅读区块显示；
3. 其它分类：
* 网站新闻
* 生活纪实
* 学习日记
* 建站手记
* ......

注册与创建区块（Create Regions）

到现在为止，网站、内容、模块与主题的基本配置已经完成，现在我们需要往更深层次学习了，首先，我们进入网站主题的文件夹（我们使用的是Framework），之后将page.tpl.php文件复制一个复本并将复本名称修改为page-front.tpl.php，Drupal将会自动使用这个模块文件来生成网站的首页。

下面这一段代码是在Drupal模板文件中调用某个区块所使用的：

if ($the_region) {
print '
'; print $the_region; print '
';
}

上面代码中的$the_region变量可以代表任何内容，它是在模板的"Info"文件中注册的，其注册的格式为：regions[the_region] = My Region。其中的the_region是用来被机器识别的字段，而My Region是前面机器字段所代表的区块的人类识别用的名称，如下我注册两个名称为Headline和Features的区域，它们的机器识别字段分别为headline和features。

regions[headline] = Headline
regions[features] = Features

这个时候你并不能查看你的首页，因为上面注册了两个新的区块，这样一来，把Drupal默认注册的一些区块都给覆盖了，现在我们需要重新将Drupal默认注册的区块重新注册一次，如下：

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[headline] = Headline
regions[features] = Features

在区块注册这一步骤中的最后一步是将Headline和Features这两个区块添加到模板中，我们打开page-front.tpl.php文件，找到文件中的主区块（如果你使用的是Framework主题，那么就选择id为center的div为主区块），将这个盒子中原来的代码全部删除，再将下列代码添加到主区块中去：

print '';
if ($headline) {
print '';
print $headline;
print '';
}
if ($features) {
print '';
print $features;
print '';
}
print '';

为了在后面的工作中更加容易的样式化这块区域，我在这里为这个区块添加了一个CSS类：main，为Headline和Features区块都添加了一个CSS类：region。
通过CCK扩展Story内容类型

你想让Story类型与ImageCache模块的功能联系到一起，首先你需要使用CCK为Story添加额外的字段，至少需要一个"Image" （图片）字段，如果你还想为图片添加一些版权信息，你还可以添加图片作者字段或者图片来源字段，现在，请按下表为Story添加三个字段：
Label Field Name (prefixed field_) Type of Data to Store Form element to Edit Data
Image image Image Image
Image Author image_author Text Text Field
Image Source image_source Text Text Field

extend-story-fields-by-cck

添加这三个额外的Field的时候没有什么过多需要设置的，仅仅只需要注意的就是，添加Image字段的时候，我们需要为上传的图片选择一个保存目录，默认是使用网站文件根目录，为了管理与整理方便，我们在这里设置一个新的目录"images"，这样一来，所有上传的文件都会被保存到根文件目录的子目录"images"中。
创建Views

Views与CCK的配合使用可以说是Drupal应用的核心，所以，一般有CCK就一定会用Views，下面我们就要开始为我们的 Magazine Style Frontpage创建Views了。如果你不想自己一步一步添加，你只需要直接本文下方的导入文件直接导入到您的网站上去即可，不过我还是建议你一步一步自己动手来做。
Headline View

Headline View是用来展示你认为最重要的文章的，在这个区块中，它将显示一个固定大小的图片，还有文章的标题和摘要，文章标题链接到文章的页面，现在我们来添加 Headline View。进入View 添加页面（Site Building » Views » Add），View的名称为"Headline"，介绍你可以填写任何东西，一般就是介绍这个View的作用等，Tag就像文章的Tag一样，可以方便我们在网站有大量的View的时候查找特定的一个View，填写好了之后点击Next（下一步）：

drupal-magazine-style-frontpage-headline-view

进入下一页之后，首先在左上角的下拉菜单中选择Block，然后点击添加一个Block Display，之后按下面的信息来设置你的这个Display的基本设置（Basic Settings）：

* Name: Headline
* Title: None
* Style: Unformatted
* Row style: Fields
* Use AJAX: No
* Use pager: No
* Items to display: 1
* More link: No
* Distinct: No
* Access: Unrestricted
* Exposed form in block: No
* Header: None
* Footer: None
* Empty text: None
* Theme: Information

之后为这个Display添加Fields，点击Fields右侧的"+"号，按下表来添加三个Fields：
Field Notes
Content: Image: Image (field_image) Label: none
Format: medium image linked to node
Node: Teaser No additional configuration required
Node: Title Check Link this field to its node

之后，再按下表添加Filters
Field Notes
Node: Published True
Taxonomy: Term Vocabulary: Categories
Selection Type: Drop down
Operator: Is one of
Select terms from vocabulary Categories: Headline

如下图所示为添加好之后的界面：

drupal-magazine-style-frontpage-headline-view-settings

之后别忘记点击保存按钮了。
Features View

Features区块将显示最新三篇被标记为Features的文章，每一篇文章都有自己的缩略图和摘要。现在再添加一个名称为Features的View，类型继续为Node（节点），并按下面几个表格进行设置：
Basic settings

* Name: Block
* Title: Features
* Style: List
* Row style: Fields
* Use AJAX: No
* Use pager: No
* Items to display: 3
* More link: No
* Distinct: No
* Access: Unrestricted
* Exposed form in block: No
* Header: None
* Footer: None
* Empty text: None
* Theme: Information

Fields
Field Notes
Content: Image: Image (field_image) Label: none
Format: thumbnail image linked to node
Node: Teaser No additional configuration required
Node: Title Check Link this field to its node
Sort criteria
Field Notes
Node: Post date asc
Filters
Field Notes
Node: Published True
Taxonomy: Term Vocabulary: Categories
Selection Type: Drop down
Operator: Is one of
Select terms from vocabulary Categories: Featured
Posts by Category

这个View与前面的两个View有一些不一样，它会展示相关分类的最新十篇文章标题列表，每一个标题又链接到文章页面，它与前面两个View最大的不同点在于，你不需要将这个View添加到哪个区块中，你需要直接在FrontPage模板文件中添加相关的 calls 来调用相关的内容，添加一个新的Node类型的View，你只需要使用Default（默认）的Display即可。
Basic settings

* Name: Defaults
* Title: None
* Style: List
* Row style: Fields
* Use AJAX: No
* Use pager: No
* Items to display: 5
* More link: No
* Distinct: No
* Access: Unrestricted
* Exposed form in block: No
* Header: None
* Footer: None
* Empty text: None
* Theme: Information

Arguments
Field Notes
Taxonomy: Term Action to take if argument is not present: Display all values
Validator:
Action to take if argument does not validate: Hide view/Page not found (404)
Fields
Field Notes
Node: Title Check Link this field to its node
Filters
Field Notes
Node: Published True
Views Templates

如果前面的内容你都亲手操作并完成得相当漂亮，那么现在可以进入更深入的层次了，我们在这一小节里面将制作Views Templates（Views 模板），用来定制内容的输出。Views有很好的模板支持机制，在你没有为特定的View创建模板时，View将调用主题默认的模板，但是当你为View 创建的特定的模板时，这个View将使用你创建的模板来生成View的内容。
Headline Template

Headline

将上面的这一段代码复制到名为views-view-fields--Headline--block.tpl.php的文件中，再将这个文件复制到你的主题文件夹里。这个文件会被Views模块自动调用并分配到Headline View的输出过程中。
Features Template

将上面的这一段代码复制到名为views-view-fields--Features--block.tpl.php的模板文件中，再将此文件复制到主题文件夹，现在你已经有了完全由你控制输出的Headline和Features区块。
Categories Template

这里是本小节的一个难点，但是也是很有用的一点，所以，在这里大家认真的学习，因为在这里，你将需要在page-front.tpl.php文件中添加一些代码：

将上面这些代码复制到page-front.tpl.php文件中主内容区块里，即Features区块的下方，这一个循环会向Posts_by_Category View发出请求，根据Vocabulary来生成内容。
样式化

如果你完成按照我们的要求来做，那么现在你可以发布一些文章来测试了，如果没有出错，首页将会按我们的要求输入一个Headline和一个 Features，并且会将存在内容的几个Category输出，每一个分类一个区块，每一个区块内都有文章标题列表，现在要做的工作就是对这些内容进行样式化。样式化在这里不属于Drupal的专业内容，所以本文不作探讨，如果你不知道如何样式化这些内容，请去查阅与CSS相关的文章或者教程。