作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

此外，在“联系我们”页面，我还想加上百度地图，在地图上，让用户看到公司的所在位置。以前都是使用Google地图的，不过毕竟Google退出了中国，所以这里决定使用百度的。Drupal官方网站是有两个Gmap模块的，不过一个百度的也没有，我觉得Drupal在中国发展，离不开与本土系统的集成，这些都不是一个人可以完成的。

进入百度地图页面，http://map.baidu.com，在这里找到链接“地图API”，点击这个链接，进入页面http://developer.baidu.com/map，这是百度地图的开发者主界面。

 

点击左边的“插件与工具”，找到“地图快速生成器”，点击这个链接。在这里，选好中心点，在对应的位置添加标注，保存标注。

 

操作完成后，现在获取对应的代码：

 

点击这里的“获取代码”按钮，我们就可以看到生成好的HTML源代码：

 

    复制这些代码，直接将其粘贴到“联系我们”节点的正文字段里面，保存。现在地图就在Drupal中显示出来了。

 

我们这里，也可以这样做，分析一下复制过来的源代码，把JS的部分，放到html.tpl.php文件中，在正文字段中，只保留生成地图所用的div，即可。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我做网站的时候，根据需要，通常首先创建内容类型，这样可以方便的向里面添加内容。接下来，导航到admin/structure/types，我们创建内容类型“新闻”，配置如下：

 

名字	新闻
机读名字	news
发布选项	已发表/多语言禁用
展示设置	显示 “作者和日期信息。”
评论设置	关闭
菜单设置	无

在“新闻”的管理字段页面，admin/structure/types/manage/news/fields，为它添加一个已有字段“field_image”，注意，这两个地方的配置：

 

对于文件、图片字段，我们通常会为它设置一个文件目录，这样文件上传后，都会存储在这个目录下，这样的好处就是文件夹结构比较清晰。很多刚学Drupal的人不知道配置这个地方。

值的数量，我们这里设置为了“不限”。由于一个字段可以同时追加到多个实体上去，对于字段本身的配置，你在这里修改了，其它地方也会跟着改，这个需要注意。

导航到分类的管理界面，admin/structure/taxonomy，在这里添加一个新的词汇表，配置如下：

名字	新闻分类
机读名字	news_category

然后向这个词汇表，添加三个分类术语，这是添加好的样子：

 

现在，回到admin/structure/types/manage/news/fields，为“新闻”内容类型，添加一个“新闻分类”字段，具体配置如下：

标签	新闻分类
机读名称	field_news_category
字段类型	术语来源
控件	选择列表
词汇表	新闻分类
值的数量	1

 

创建内容类型“产品”，具体配置如下：

名字	产品
机读名字	product
发布选项	已发表/多语言禁用
展示设置	不显示 “作者和日期信息。”
评论设置	关闭
菜单设置	无

在“新闻”的管理字段页面，admin/structure/types/manage/news/fields，为它添加一个已有字段“field_image”。具体配置和前面新闻的一样。我们可以创建一个新的图片字段，也可以共用一个。

导航到分类的管理界面，admin/structure/taxonomy，在这里添加一个新的词汇表，配置如下：

名字	产品分类
机读名字	product_category

然后向“产品分类”词汇表，添加三个分类术语，这是添加好的样子：

 

  现在，回到admin/structure/types/manage/product/fields，为“产品”内容类型，添加一个“产品分类”字段，具体配置如下：

标签	产品分类
机读名称	field_product_category
字段类型	术语来源
控件	选择列表
词汇表	产品分类
值的数量	1

 

创建内容类型“解决方案”，具体配置如下：

名字	解决方案
机读名字	solution
发布选项	已发表/多语言禁用
展示设置	不显示 “作者和日期信息。”
评论设置	关闭
菜单设置	主菜单

 

创建内容类型“服务”，具体配置如下：

名字	服务
机读名字	service
发布选项	已发表/多语言禁用
展示设置	不显示 “作者和日期信息。”
评论设置	关闭
菜单设置	无

 

创建内容类型“成功案例”，具体配置如下：

名字	成功案例
机读名字	portfolio
发布选项	已发表/多语言禁用
展示设置	不显示 “作者和日期信息。”
评论设置	关闭
菜单设置	无

对于内容类型上面的字段，我们在后面的项目建设中，还可以进一步的完善。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

进一步的添加内容，添加新闻，产品，解决方案。这是我添加的内容：

 

 

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

创建新闻列表页面

 

     我们这里采用了内容摘要的形式，而没有采用字段的形式。在Views里面，字段的形式，是我更喜欢的，这个后面根据实际需要可以调整。我们在这里，最主要的是生成一个页面，有内容显示出来。我们这里使用了页面显示（page display）。

对于新闻列表，我通常采用这样的解决办法：

news

news/category/[tid]

这个时候，可以创建两个页面显示，一个负责所有的，一个负责具体分类下的。不过我们也可以采用这样的办法，只创建news一个页面显示，然后向它传递tid参数，这个时候只有一个内部路径，下面的路径都是有效的：

news

news/[tid]

这是两种不同的解决方式，注意两者之间的区别。除此以外，还有基于Panels的解决方式，我们在Drupal实战一书中，有了详细的介绍。

现在，我们向创建的视图里面添加一个上下文过滤器（contextual filter），在Drupal7里面，分类术语是以字段的形式出现的，新闻下面有一个新闻分类字段，我们按照这个分类字段过滤就可以了。找到这个上下文过滤器：

 

选中，并点击应用按钮。注意，在接下来的对话框中，有这么几个配置选项：

 

我们知道，新闻有三个分类：公司新闻、国内新闻、国际新闻。当显示对应的页面时，我们想让标题也显示成对应的。这个时候，我们可以使用这里的配置选项“覆写标题”（Override title）。这是我的配置：

 

%1表示第一个参数，%2表示第二个参数。

我们将这个视图的标题从“news”改为“新闻”，保存视图。

现在访问news页面，就可以看到内容了：

 

如果我们访问路径“news/4”，我们将会看到：

 

页面标题，在这里显示出来的是对应的tid，而不是对应的分类术语名称，这个以前的时候好像介绍过，也是很多人容易犯的小错误。

我们导航到视图的编辑页面admin/structure/views/view/news/edit/page，找到上下文过滤器，添加一个新的上下文过滤器：

 

在这里，“内容: Has taxonomy term ID”和“内容: Has taxonomy term ID (with depth)”都可以解决我们这里的问题，我更喜欢带有深度的这个。“内容: Has taxonomy term ID depth modifier”，这个是深度修正器，我很少用这个。

这里选中“内容: Has taxonomy term ID (with depth)”，点击应用按钮。这是我喜欢的配置：

 

 

我们将前面添加的上下文过滤器删除，只保留我们新增的这一个。保存视图。

现在访问news/4，此时将会得到：

 

此时的页面标题显示正确。

我们这里，注意体会这两个上下文过滤器之间的区别，一个不行换用另一个即可。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我们这里顺带讲解Views里面的一个基本配置，这个配置在前面的文章中没有介绍过。我们访问drupal.org，在它的首页，新闻部分，是这个样子的：

第一条，显示标题、时间、内容摘要，其余三条只显示标题。这是实际项目中，经常遇到的一个需求，使用Panels就可以很好的解决这个问题，创建两个view，一个取第一条，另一个取2，3，4条，两个加在一块，就可以解决这里的问题了。这是解决这个问题的基本思路，就是把它分成两个view。我们这里，给大家演示一下，具体的解决办法。

    这是我的初始配置，保存。

 

这是预览的效果，此时只列出来了三条，因为我们只有三条测试数据。

 

我们先做一个区块显示，列出只包含标题的最新新闻。接下来，我们添加一个新的显示，这次，我们对于显示类型，我们选择附件。

 

对于这个附件显示，我们首先为它添加更多的字段，注意这里只作用当前显示，这是添加后的样子：

 

这里面，对于body字段，我们覆写了它的输出，截取150字显示，只显示纯文本。不显示字段标签。对于Post date字段，这是我喜欢的一种配置：

 

对于“内容：链接”字段，我们这里主要配置了“Text to display”(要显示的文本)：

 

在分页器的配置里面，我是这样配置的：

 

实时的预览效果：

 

在“附件设置”里面，找到“追加到”（Attach to）配置选项。

 

当前是未定义状态，我们修改一下，将它追加到区块显示上：

 

附件的位置默认是“Before”（在前面），除此以外，还有另外两个配置选项：

 

我们这里，使用“Before”就可以了。现在切换到区块显示，实时预览的效果：

 

只不过，这里面，第一条新闻重复显示了。现在我们对区块显示的配置做出调整，这是原来的分页器的配置选项。

 

这是我修改后的：

 

此时，区块只负责显示3条，并且跳过第一条。这里，跳过的这条，就是附件所负责显示的那条。保存这里的配置，这是保存后的实时预览：

 

这个就是我们想要的。这里面，注意附件的用法，特别注意的是分页器里面的Offset的用法。Offset是跳过的意思：

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我们继续前进，按照同样的办法，创建产品列表视图，我这里是克隆现有的news视图，然后重命名修改而成。

 

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

现在，导航到菜单的管理界面，找到主菜单，我们可以为它添加更多地菜单项了。

 

我们这里主要添加产品新闻相关的菜单项，并调整了顺序。比如添加公司新闻这个菜单项的时候，输入路径时，要对准了，具体是哪个tid，不要写错了。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

现在，菜单显示出来，还是一级的，没有显示二级子项。很多时候，我们想显示动态下拉菜单，这个时候有两个模块可供选择，一个是Nice menu模块，另一个就是Superfish模块，我们这里采用后者。在Drupal7下，Superfish模块更流行一些。

我这里下载的版本是superfish-7.x-1.9。这个模块，依赖于一个jQuery库，下载地址：https://github.com/mehrpadin/Superfish-for-Drupal/zipball/master。在sites\all下面创建libraries目录，然后将下载的jQuery库解压缩，然后复制到sites\all\libraries\superfish目录下。

 

将superfish模块解压缩后复制到sites\all\modules目录下。现在启用superfish模块。启用后，导航到区块管理界面admin/structure/block，可以看到：

 

这是superfish模块提供的四个默认区块，我们这里使用第一个。点击它的配置链接，进入对应的区块配置页面，这里的配置选项很多。

 

我们在这里，可以选择使用哪个菜单。如果菜单比较大的话，我们可以选择一个菜单项。菜单深度，-1表示所有，我们采用默认的即可。“Take "Expanded" option into effect.”，这个采用默认的不选中即可，可能很多人对于这个“展开”选项不是很了解，对于一个菜单链接，它有这么一个配置选项，你编辑一个菜单链接的时候，会找到的：

 

我们这里不考虑核心的“展开”选项即可。

区块配置里面，接下来是superfish设置，里面的设置项很多：

 

我们首先看到的是菜单类型，它分三种：水平、垂直、导航条。我们采用水平即可。对于样式，我们暂时先采用默认的“无”即可，这里面自带了多个样式可供选择，选择“无”的话，我们可以自定义样式。

再往下是有关速度的两个配置选项：

 

我们采用默认的配置即可。

再往下是Path class和Path levels：

 

对于拿不准的配置选项，我们使用默认的即可。往下继续看：

 

“Slide-in effect”就是鼠标移到包含子菜单项的菜单项上时，隐藏的子菜单项显示出来所用的效果，包括垂直、水平、对话框，如果安装了jQuery Easing 插件的话，这里将会包含更多的效果选项。Auto-arrows应该表示自动加上箭头；Drop shadows应该表示下拉阴影，从字面意思理解。下面还有一个“more options”，展开后有更多两个配置选项。

再往下，还有：

 

我们这里就不逐个展开一一介绍了。采用默认的即可。我们把这个区块放到Bartik的Featured区域，保存。预览一下效果先：

 

功能有了，我们需要把原来的主菜单替换成现在的superfish区块。这又涉及到主题制作了。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我们在Drupal实战一书里面，安装过CKEditor模块，我们这里仍然使用这个模块，只不过对于文件上传，我们使用IMCE模块。这里简单的重复一下安装过程，我这次使用的版本是ckeditor-7.x-1.13，下载解压缩后，放到sites\all\modules目录下，这里原来已经有了一个，我们替换为最新的。接下来，去http://ckeditor.com/download下载最新的JS，我这里下载的是ckeditor_4.2_full，将它解压缩，复制到sites\all\libraries目录下。导航到模块的管理界面，启用CKEditor模块。现在，创建内容时，就可以使用所见即所得编辑器了。

此时，还有文件上传的问题，以前我们曾经使用过CKFinder，但是这个是收费的，破解也是有办法的，不过有时候还是需要替代的解决办法，其中一个是使用Insert模块，另一个就是使用IMCE模块。关于Insert模块，我曾经写过一篇教程，有兴趣的可以参考一下http://www.thinkindrupal.com/node/4993。我们这里使用IMCE。我这里使用的版本是imce-7.x-1.7。解压缩后，将其放到sites\all\modules目录下。启用后，我们可以导航到admin/config/media/imce，对它进行配置。

 

它默认包含两个配置好的profile，一个是专为用户1准备的，另一个应该是为普通用户准备的。如果这两个不够用的话，可以新建一个。

 

我们可以按照用户角色，为它分配profile，对于管理员，我们可以为它分配User-1；对于注册用户，可以为它分配Sample profile；对于匿名用户，可以不分配。实际上，对于一个企业站，特别是小企业站，里面只有一个用户。

我们编辑User-1，进入页面admin/config/media/imce/profile/edit/1，此时可以看到很多的配置选项。

 

这里可以设置单个文件的大下，目录的大小限制，单个用户的文件总大小。以前曾经有朋友问过我类似的问题，就是为每个用户分配一个文件夹，这个文件夹是有大小限制的，和这里的很类似。

 

再往下，可以配置文件的扩展名，允许上传哪些文件；文件的最大尺寸限制；一个操作可以作用于多少个文件。我们这里采用默认的即可。

 

目录，对于用户1，默认使用跟目录，这个我们可以改一下，将它改为：

 

定义文件夹名字的时候，除了%uid可用以外，还可以使用PHP，比如“php: return 'users/'.$user->name;”，就定义了目录“users/USER-NAME”。我觉得这里可以改进一下，支持token，这样会更方便一些。

再往下，是定义好的缩略图，但是我不知道这和核心自带的图片样式是否有直接关系。

 

除了Profile的设置以外，在admin/config/media/imce页面，这里还有IMCE的常见设置：

 

一般情况下，我们采用默认的即可，我觉得这里比较有用的是绝对路径这个配置选项。

我们讲了这么多，现在还是无法上传图片的，我们把这个问题解决了，导航到admin/config/content/ckeditor，找到：

 

我们对“Advanced”进行编辑，在编辑页面，找到文件浏览器设置，展开后，可以看到

 

我们这里，在文件浏览器类型里面选择IMCE，保存即可。为CKEditor的Full profile做同样的操作。

如果使用IMCE，在所见即所得编辑器里面，点击图片按钮，我们将会看到这么一个弹出框：

 

点击这里的浏览服务器按钮，有一个探出框：

 

在这里，我们可以上传、编辑、删除、插入图片。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

有一个小问题，是关于文本格式的，默认总是使用Filtered HTML,怎么才能将它改为Full HTML呢？

 

以前在Drupal6的时候，有这样一个模块Better Formats可以解决这个问题。在Drupal7下，为了解决这个问题，我首先想到的就是这个模块。但是后来，通过实践，我发现，不装这个模块，也可以配置出来。这里介绍一下我的解决办法，导航到admin/config/content/formats，在这里可以看到：

 

注意，这里，我们是可以通过拖拽调整文本格式之间的相对位置的。这是调整后的样子：

 

调整后，保存即可。这样“Full HTML”，就成为了默认的文本格式了。

 

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

有时候，我们创建区块的时候，想使用“Full HTML”，但是又不想使用CKEditor，因为CKEditor会帮我们做一些我们不想要的工作。此时，我们可以创建一个新的文本格式：

 

不为它启用任何的过滤器：

 

如果，我们不在CKEditor的配置界面，做相应的配置的话，当我们选用“区块专用Full HTML”文本格式的时候，就不会加载CKEditor。

 

     这个在实际项目中，也是很有用的。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我们导航到admin/structure/types，在这里添加一个新的内容类型“关于我们”，我喜欢为菜单上的每个栏目创建一个内容类型。具体配置如下：

 

16:10:45

关于我们
机读名字	about_us
发布选项	已发表/多语言禁用
展示设置	不显示 “作者和日期信息。”
评论设置	关闭
菜单设置	主菜单

对于字段，我们使用默认的即可，现在导航到node/add/about-us，创建第一篇节点。在正文、标题里面输出相应的内容；文本格式选用Full HTML；

 

为这个节点指定一个菜单链接，菜单链接标题设置为“关于我们”；

 

将它的URL别名设置为“aboutus”。OK，保存。

 

这是保存后的效果：

 

是的，这是真实的内容，我们在搭建一个真实的网站。接下来，创建“我们的团队”节点，还是使用“关于我们”内容类型。对于这个节点，它的配置，和前面的基本一样。注意在设置菜单链接的时候，我们把它的上级菜单项设置为了“关于我们”（node/1）。

 

“我们的团队”，现在还只是一个静态页面，将来可以进一步的改进，比较加上团队成员的照片，采用更好的样式。如果将来公司发展起来了，人员比较多，可以专门的创建一个内容类型，比如说“员工（staff）”，用来列出员工的详细信息，而这个“我们的团队”页面，则可以替换成一个列表页面。这些都是后话。

这是创建好的样子。

 

 

创建“公司历程节点”：

 

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

接下来创建“联系我们”节点，这个节点里面包含一个表单。我们可以考虑使用webform模块，我这里使用的版本是webform-7.x-3.19。安装启用好了webform模块以后，我们就可以导航到node/add/webform，添加内容了。

首先，我们输入标题“联系我们”，正文里面输入以下内容：

“

<h3>地址：</h3>

北京市海淀区上地十街辉煌国际4号楼1308室。

地铁13号线，西二旗站下车，A口出，即辉煌国际大厦。

<h3>联系人：崔克俊 </h3>

Mobile: 13681445347

QQ: 372948992

”

文本格式选择“Full HTML”。指定一个菜单链接，并将上级菜单项设置为“关于我们”。这样就进入了webform的配置界面。

 

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我们首先，来看这个企业站。这个网站，就是为我自己的公司做的，所以做好做坏都一样，没有特别大的压力。做网站，首先需要有个需求，你这个网站，有哪些页面组成，每个页面的结构，最好写个文档。然后由设计人员做出设计图，然后再由美工人员做出静态页面，最后将它们转到Drupal上来。

 

有个软件Axure，用来画网站的原型图，比较方便，我安装了一个试用版，画了几个原型图，这样设计人员、美工人员以这些原型图为参考，做静态页面的话，就比较方便了。

主要内容包括：产品列表、产品详细信息、新闻列表、新闻详细信息、联系我们、解决方案、首页等页面。将来根据需要会有一些的调整，总体来讲比较简单。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我们先来看首页，它主要包含以下内容：

（1），菜单是可以下拉的，鼠标移上，显示子菜单项。

 

 

 

（2），首页主导航下面是一个幻灯效果，4张图片轮播，包括一个THINK in Drupal中文资料的图片、Drupal培训班的图片、开源模块的图片、一个有关网上书店系统的图片。

（3），在下面是产品列表，三个推荐到首页的产品，包括图片，简单的描述。

（4）再往下，左边是新闻列表，右边是两个静态区块。

（5），最下面是页脚导航链接、页脚的版权信息等等。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

产品列表页面的原型图：

 

 

 

注意：上面的绿线，是我截图的时候，不小心加上去的，应该没有这条线的。上半部分和下半部分是连在一起的，我截图的时候，屏幕太小，只能分开截取。后面都是这样的，分成上下两部分。

 

    这里面，左边是一个产品分类导航链接，包括三个分类：Think in Drupal、Drupal培训班、开源模块。我把自己写的模块也算作产品了，虽然不赚钱，但是也是自己的作品。将来这个产品分类有可能会调整。左边的这个区块，就是主菜单里面“产品”菜单项的子菜单项。我们这里面，可以考虑使用menu block模块实现这个功能。右边是一个产品列表，每个产品项都有三部分组成，图片、标题、摘要描述。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

产品详细页面的原型图：

 

 

 

这里面，左边仍然是一个产品分类导航链接；右边是产品详细，里面包括产品的标题、图片、正文。如果有多张图片的话，可以加个幻灯效果。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

联系我们页面的原型图：

 

 

在这个页面的左边，是“关于我们”下面的子菜单项，包括公司历程、团队建设、联系我们等等。右边是联系信息，联系信息下面，是一个表单，用户可以通过这个表单，发送邮件信息。这里，我们可以考虑使用webform模块。

除此之外，还有解决方案，新闻列表页面、新闻详细页面，我们采用相同的结构即可。这个企业网站搭建好了以后，然后再多语言化，也就是支持英文版的。

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

我下载了一个新的Drupal，解压缩后，放到了htdocs下面的yaiyuan1目录下面，这个名字后面加了一个1，是因为我前面已经做过一些测试用了，前面使用了yaiyuan这个名字。创建一个名为yaiyuan1的数据库，将Drupal安装起来。这个过程我们都熟悉。

接下来是，一些常见的配置，这些配置在Drupal实战一书里面都有介绍。比如，配置时区、配置日期格式、配置文件系统，特别是临时文件目录。

还有，就是安装Locale模块，然后启用简体中文，将简体中文设置为默认语言，导入简体中文的语言包。