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

我们将zen目录下的STARTERKIT复制到sites\all\themes下面，然后将其重命名为yaiyuan；将sites\all\themes\yaiyuan下面的STARTERKIT.info.txt重命名为yaiyuan.info，注意文件后缀名，对里面的信息做以下修改：

name        = Yaiyuan

description = Yaiyuan theme.

打开template.php文件，将里面的STARTERKIT替换为yaiyuan；打开theme-settings. php文件，将里面的STARTERKIT替换为yaiyuan。这样我们的这个子主题就初步制作完成了。

导航到主题的管理界面，admin/appearance，将我们新建的这个主题启用并设置为默认主题。现在访问首页，看到样式还是乱的。

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

创建内容类型“首页幻灯”，并为它添加字段“幻灯图片”和“指向链接”，和Drupal实战里面的一样。

 

接着，安装Views slideshow模块。这个模块依赖于libraries模块，我们首先下载、安装、启用libraries模块，我这里使用的版本是libraries-7.x-2.1。接着安装Views Slideshow和它的子模块Views Slideshow: Cycle，这里使用的版本是views_slideshow-7.x-3.0。下载jquery.cycle，将其复制到了sites\all\libraries\jquery.cycle目录下面。

其实，我们这里涉及到一个软件复用问题，我们这里面的配置，在别的网站上已经配置好了，如何将它复制过来呢？这样，我们新建一个站点的时候，就不需要重复这里的配置了。在Drupal7下，最佳的解决方案是使用Features模块，比如这里的首页幻灯，我们就可以将它导出成feature。这样，新建一个Drupal站点的时候，通过安装这个Feature，所有的配置都会帮我们安装好了。对于内容类型的导入、导出，还有一个替代方案，就是使用Bundle copy，这个也不错，与Features模块相比，比较轻量级。

我们现在从网上书店中，将首页幻灯的视图导出：

 

   导出后的样子：

 

我们将文本域中的代码复制下来，进入yaiyuan1站点的Views管理界面，这里有一个导入链接：

 

点击这个链接，进入页面admin/structure/views/import，我们将刚才复制的代码粘贴过来即可：

 

之后点击导入按钮。进入已导入视图的编辑界面，点击视图的保存按钮。导入过程完成。原来的视图中，图片的显示是使用了图片样式的，而这个样式我们这里没有定义，所以我们这里采用了默认的原始图片，这个没有关系。我们现在定义这个图片样式。

以前，我们在网上书店的例子中，是这样定义图片样式的，660_250，这种方式有这种方式的好处，就是说一看就知道图片的大小。我们这里换种方式。导航到图像样式的管理页面admin/config/media/image-styles，在这里添加一个样式frontbanner，专门用于首页幻灯。添加好这个样式后，我们暂时不为它添加任何效果。对于前面视图中，幻灯图片的显示，我们就可以为它使用这个图片样式了。

 

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

我们这里顺带介绍一下Features模块的用法。下载、安装、启用Features模块，当前使用版本为features-7.x-2.0-rc1。启用后，导航到admin/structure/features，这是Features模块的管理界面：

 

当前还没有任何已经创建的features，我们可以点击右上角的“创建特性”（create feature）链接，进入页面admin/structure/features/create。

 

在名称里面输入“frontbanner”，版本里面输入“7.x-1.0-beta1”，在右边的组件中，为内容类型、views、图像样式选择frontbanner对应的部分：

 

此时，Feature会自动的为我们选好字段、字段实例、依赖关系：

 

点击左边的“Download feature”（下载特性）按钮，我们就可以下载这个特性了。下载后，我们得到这样一个文件：

 

将它解压缩，我们得到一个完整的模块：

 

我们现在可以将这个模块安装到我们的站点上了，或者当一个站点需要幻灯时，我们就可以直接安装这个模块。

Features模块，能够很好的解决将配置信息从数据库中导出成Drupal代码，方便功能在不同站点之间的迁移。现在，在Features模块的基础之上，又出现了Apps模块，现在的很多发行版都基于Apps的概念。

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

我们继续前进，下载、安装、启用Panels模块，我用的版本是panels-7.x-3.3.zip。我同时下载、安装了panelizer模块，使用的版本是panelizer-7.x-3.1。Panelizer能够做很多Display suite模块做的工作，有机会的话，会简单的介绍一下Panelizer。我们这次启用以下模块：Page manager, Views content panes, Mini panels, Panelizer, Panels。注意Page manager, Views content panes是Ctools模块里面的子模块。

我们创建一个Panels页面，名字、路径都设置为frontpage，同时把这个页面设置为首页；布局采用1列通栏布局；禁用Drupal区块/区域；内容里面先后添加：首页幻灯、企业愿景、产品推荐、新闻等。

 

我已经做好了，先来看幻灯的效果：

 

首先是为图片样式frontbanner添加了一个缩放并裁切的效果，大小开始为950x300，后来调整为960x300。然后就是调整CSS，这里参考的是京东的效果。

 

#content .view-frontbanner  .views-slideshow-controls-bottom {

  float: right;

  margin-top: -35px;

  margin-right: 10px;

  position: relative;

  width: auto;

  z-index: 9;

}

#content .view-frontbanner  .views-slideshow-controls-bottom .views-slideshow-pager-fields {

  float: right;

  width: auto;

}

#content .view-frontbanner  .views-slideshow-controls-bottom .views-slideshow-pager-field-item {

  display: block;

  float: left;

  height: 20px;

  margin-right: 10px;

  padding: 0;

  width: 20px;

}

 

#content .view-frontbanner  .views-slideshow-controls-bottom .views-content-counter {

    background: none repeat scroll 0 0 #999999;

    border-radius: 12px 12px 12px 12px;

    color: #FFFFFF;

    cursor: default;

    display: inline-block;

    text-align: center;

    height: 22px;

    line-height: 22px;

    width: 22px;

margin-right:20px;

margin-bottom: 10px;

}

 

#content .view-frontbanner  .views-slideshow-controls-bottom .active .views-content-counter{

    background: none repeat scroll 0 0 #E4393C;

}

主要是把背景设置为了圆形，这里面没有使用背景图片，使用的是border-radius。

再往下是企业愿景，这里使用了Panels的自定义内容功能，没有使用静态区块；还使用了Panel窗格自带的圆角样式：

 

    可能部分读者不知道“自定义内容”在哪里，为Panels区域添加内容的时候，弹出框的左边下面部分的这个链接就是：

 

再往下是首页的产品列表，我在products视图里面创建了一个区块显示，用来显示首页的内容。我们先来看效果：

 

这是对应的视图显示：

 

这里使用了我们常见的Views字段，格式为Grid（格子），一行显示两个，总共显示4个。注意字段之间的先后顺序。我把图像放在了前面，其次是标题，最后是正文，这主要是为了调整CSS时方便；对于正文的输出，我们截取前面50个字；此外，我们还加了一个过滤条件，把产品分类中的开源模块部分过滤掉了。对应的CSS如下：

.view-display-id-block_1 td {

  padding-right:20px;

}

.view-display-id-block_1 td  .views-field-field-image{

  float:left;

  margin-right:10px;

}

.view-display-id-block_1 td  .views-field-field-image img{ 

  border: 1px solid #E0E0E0;

}

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

再往下是首页的新闻和联系我们：

 

我把这两部分放在了一个Mini Panel里面了。一个Mini Panel就是一个区块，只不过对于这个区块，我们也可以进一步的细化它的布局。

这是Mini panel的配置：

 

 

 

对于左边的这个新闻区块，我们使用的是test news这个视图，稍微做了一下调整，主要就是隐藏了时间、read more这两个字段，调整了一下正文截取的长度，这里取80个字。

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

我后来对主导航菜单的样式做了进一步的调整：

#navigation .sf-menu.sf-style-simple.sf-vertical li, #navigation .sf-menu.sf-style-simple.sf-horizontal li li, #navigation .sf-menu.sf-style-simple.sf-navbar li li li {

    border-bottom: 1px solid #E0E0E0;

}

 

#navigation .sf-menu.sf-style-simple.sf-horizontal > li:first-child {

    border-bottom-left-radius: 0px;

    border-top-left-radius: 0px;

}

 

#navigation .sf-menu.sf-style-simple.sf-horizontal > li:last-child, #navigation .sf-menu.sf-style-simple.sf-horizontal li li > ul > li.firstandlast, #navigation .sf-menu.sf-style-simple.sf-vertical li li > ul > li.firstandlast, #navigation .sf-menu.sf-style-simple.sf-navbar li li li > ul > li.firstandlast {

    border-bottom-right-radius: 0px;

    border-top-right-radius: 0px;

}

 

#navigation .sf-menu.sf-style-simple li {

background-image : none;

height:45px;

}

主要是因为菜单项部分的背景图片高了一小点，把下面的幻灯图片遮住了一点。通过调整解决了这个问题。我有一个客户告诉我说，做Drupal开发，主要就是调CSS比较麻烦。说得很有道理。

最后说一个问题，前面我们在联系我们页面加了一个百度地图不是，现在这个地图显示不出来了：

     原来可以显示，现在显示不了了。怎么办？我们可以把主题切换到默认的Bartik上去，结果可以正确显示。遇到问题，我们首先清除缓存，其次可能就是切换主题了。那现在怎么解决呢？需要在主题层解决。不过对于这个问题，我们不必深究。再变通一下，使用QQ截图功能，把生成的地图转成图片的形式，我们这里通过图片来显示地理位置，同样可以解决问题。

    这样，我们的这个企业站，基本上就做完了。还有几个功能，比如客户、成功案例没有实现。此外产品列表页面，产品详细页面也需要美化一下，这些从技术上来讲，都已经讲过了。我们接下来，把精力放在多语言功能的实现上面来。

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

 

我们两次输出了主菜单，可以把默认的输出给禁用。导航到默认主题的配置界面，admin/appearance/settings/yaiyuan，找到配置选项：

将这两个禁用，保存。这样就只显示一次了。

 

我们配置这个区块，将区块的标题设置为“<none>”，这样就可以不显示“Main menu”两个字了。此外，将这个区块，放到“Navigation bar”区域里面。

导航到默认主题的配置界面，admin/appearance/settings/yaiyuan，找到配置选项：

 

将Logo禁用，我不想显示“禅”。现在整个界面，还是比较朴素的。

 

我们要调CSS样式。首先来调这个主菜单的样式，我们前面提到Superfish自带了，多个样式，我们配置这个superfish区块，将它的样式设置为“Simple”，保存。效果如下：

 

这是我最满意的一个效果了。有多满意，90%的都是我想要的。我是怎么知道使用“Simple”这个样式的呢？我是一个一个的测试出来的，它自带了这么多的样式：

 

我是从上到下，逐一测试后，感觉Simple这个样式，最符合我们这里的需要。除了一些常用的和我用过的模块以外，对于其余的模块，我并不比大家高明多少，很多时候就是这样，对于所有的配置选项，逐一测试，然后从中选出来自己认为最合适的。

此外，我觉得Spring这个样式，也还不错，只不过不是我这里想要的。

打开yaiyuan.info文件，找到CSS的部分，向里面追加这么一段话：

stylesheets[all][] = css/custom.css

然后在sites\all\themes\yaiyuan\css下面创建文件custom.css。我们将我们覆写的CSS代码都放在这个文件中。向里面添加以下代码：

#main #navigation #superfish-1 {

 margin-left:300px; 

 

}

#main #navigation{

  background: url("../images/simple-background-active.png") repeat-x scroll left top #EEEEEE;

   border-bottom-right-radius: 8px;

   border-top-right-radius: 8px;

   border-bottom-left-radius: 8px;

   border-top-left-radius: 8px;

       -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    border-color: #E0E0E0 #E0E0E0 #E0E0E0 #FFFFFF;

    border-image: none;

    border-style: solid;

    border-width: 1px;

height:51px;

}

 

我们还需要把simple-background-active.png图片，从sites\all\libraries\superfish\style\simple\images目录下，复制到sites\all\themes\yaiyuan\images。我原来还以为这个图片是放在modules目录下面的，找了一下没有找到，通过Firebug，查看CSS代码的出处，才找到了这里。

其实，我就是想让主导航居中显示，同时为整个导航条加个背景。也就是在默认的基础上，再美化一点而已。我第一次见到border-bottom-right-radius的用法，以前真不知道可以这样设置圆角。这是调整后的样子。

 

做到这里的时候，主题的响应式已经被我破坏掉了，所以我们还采用固定宽度布局，960，这种最常见的布局。

打开yaiyuan.info文件，找到CSS里面的这段代码：

stylesheets[all][] = css/layouts/responsive-sidebars.css

将它注释掉，然后在它的下面，加上：

stylesheets[all][] = css/layouts/fixed-width.css

然后将主导航的margin-left从300改为250。先这样吧，后面会继续调整样式。

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

我们来看另一个功能，当我们访问产品页面products，希望左边显示一个区块，这个区块里面列出产品分类的链接。就是把这部分内容：

 

同时显示在左边栏。这个是一个非常常见的需求，在很多企业站里面，随处可见。Drupal里面，有一个现成的模块，可以做这件事。这就是Menu Block模块。

我们下载、安装、启用这个模块，我这里使用的版本是menu_block-7.x-2.3。启用后，导航到区块的管理界面admin/structure/block，此时会看到这样的一个链接：

 

我们点击“Add menu block”链接，创建一个菜单区块。

 

这是菜单区块的基本配置选项，里面包括选用哪个菜单，开始的层级，最大深度。如果点击上面的高级选项标签，将会显示更多的配置选项，比如：

 

 

 

对于这些，我们采用默认的即可。我们将这个新建的区块放在第一边栏区域里面，保存。

 

     这里的“主菜单 (levels 1+)”就是我们新建的菜单区块。我们把这个区域里面的其它区块禁用，我们不想把它们显示在这里。现在，访问产品页面products，左边是这个样子。

和预期的有区别。我们对这个区块进行再配置，将开始层级改为2：

 

这下好了：

 

访问新闻页面，我们得到：

 

访问“关于我们”页面，访问“解决方案”页面，左边都做相应的变化。这就是我们想要的，只不过样式需要调整。

以前的时候，我是怎么解决这个问题的呢？为产品、新闻、关于我们、解决方案，分别创建一个菜单，然后将这个菜单对应的区块放在左边栏，根据区块的可见性设置，控制每个区块的显示，也能够实现同样的效果。但是都没有我们这里的这种方式简洁。

如果，我们多点几下的话，还是会发现更多一些的问题的。比如我们访问产品分类页面products/1，products/2，products/3，这些都是没有问题的，左边都会显示。

 

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

如果，我们点击进入一个产品节点，或者一个新闻节点的时候，左边的这个区块消失了。左边栏（第一边栏）没有了。

 

这个不是我们想要的，如果采用前面我们所说的土办法，没有任何问题，不过现在就不行了。怎么解决这个问题呢？此时我们可以尝试一下Menu Position模块。

我们下载、安装、启用Menu Position模块，我这里使用的版本是menu_position-7.x-1.1。安装后，我们可以导航到它的管理界面admin/structure/menu-position。

 

我们点击这里的添加链接，来添加一个“菜单位置规则”（menu position rule）。这样就进入了页面admin/structure/menu-position/add：

     首先看到的是管理标题和父菜单项。

 

接着看到的是条件设置，也就是在什么条件下激活上面选中的菜单项。这里又分5种情况，内容类型、页面、用户角色、语言、分类。

我们先测试一个简单的，在管理标题里面输入“产品”，父菜单项选择“产品”，内容类型里面选中“产品”，保存这个规则。现在访问一个产品节点，左边的区块显示了出来：

 

只不过，除了显示出来以外，还多显示了一些信息，竟然把节点标题也显示在左边的区块里面了。

我们回到admin/structure/menu-position，看右上角，有两个标签链接：

 

点击这里的“设置”标签，进入页面admin/structure/menu-position/settings：

 

这里只有这么一个配置，里面包含三个选项：把当前页面的标题插入到菜单树中；把规则的父菜单项标记为“active”；不为任何菜单项标记“active”。默认选中的是第一项，我们把它改为第二项，保存。这样访问刚才的页面，问题解决了：

 

如果细心一下，可以使用Firebug查看一下页面源代码，此时我们可以看到，主菜单里面的“产品”菜单项，里面多了一个类“active”。 

 

这是Menu position模块追加进来的。我们这里只是没有为active定义样式而已，在实际项目中，访问一个产品节点页面，激活产品列表页面对应的菜单项，这个需求也很常见，Menu position模块就是用来解决这个问题的。

我们现在再进一步，当访问节点“Drupal培训班--------Drupal主题制作”（node/9）时，我们不去激活“产品”菜单项，而是去激活它的子菜单项“Drupal培训班”（products/2）。

我们创建一个新的menu position规则，在管理标题中输入“Drupal培训班”，在父菜单项中选择“Drupal培训班”，内容类型中选择“产品”，我们这里除了内容类型以外，还设置一下分类，具体配置如下：

 

设置好了以后，保存。重新访问node/9页面。没有任何变化，和原来一样。这个时候我猜测，是前面创建的规则在起作用。所以可以把它禁用（或者删除）了先。

 

在规则列表中，有“启用”这么一列，取消选中，保存即可。现在访问node/9，一切正常了：

 

通过Firebug可以看到这个菜单项的链接上面，有了active: 

 

这里值得一提的是，面包屑也正常了，就是我们想要的。我们已经知道具体的实现方法了。接下来，重复这一过程。将产品下面剩余的两个分类和新闻下面的三个分类，都创建类似的规则。这是添加好的样子：

 

经测试，新闻节点页面，左边区块正常，面包屑正常：

 

这里顺便说一下，北大图书馆的网站，也是使用的Drupal，左边区块也是使用的Menu Block，但是他们没有使用menu position模块，比如他们的图书馆新闻节点页面，就无法显示左边区块。

我点击多个页面，所有的面包屑都是正确设置了的，这个时候，我们就不需要去安装Custom breadcrums, path breadcrumbs这样的模块了。

在当前主题的配置页面，admin/appearance/settings/yaiyuan，里面有面包屑的配置选项： 

 

这是主题层提供的配置选项，包括是否显示面包屑，面包屑的分隔符，在面包屑中显示首页链接，在面包屑的最后，追加一个分隔符，在面包屑的结尾追加内容标题。我们把最后这个复选框选中，保存。

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

做企业网站的时候，比如对于产品列表页面，很多客户有这样的需求，想控制列表中的产品的位置，能够随心所欲的控制先后顺序，把重要的产品显示在前面。比如对于公司的团队成员，如果每个成员对应一个节点页面的话，那么对于成员的列表页面，这个先后顺序也是很重要的，大领导排在前面，小领导排在后面。这个时候，就无法按照节点的发布日期、修改日期排序了。

这一问题的解决方案很多，常见的有Weight模块、DraggableViews模块、Nodequeue模块。我们这里面介绍Nodequeue模块，我在实际的项目中，使用过这个模块，而且这个模块的安装量比前面两个要高出一些。

我们下载、安装、启用Nodequeue模块，我这里使用的版本是nodequeue-7.x-2.0-beta1。启用后，我们导航到它的管理界面admin/structure/nodequeue，

 

点击这里的添加链接“Add simple queue”，进入页面，admin/structure/nodequeue/add/nodequeue，这是我的配置：

 

 

 

其它采用默认配置。保存。现在，当我们访问一个产品节点的时候，就会看到一个nodequeue标签：

 

而在这个节点的下面，我们可以看到这样的一个链接：

 

点击这个链接，就会刷新这个页面，当前节点就会被添加到我们创建的队列中来。此时，这里的链接就变成了：

 

现在点击“Nodequeue”标签，进入页面node/6/nodequeue，我们会看到：

 

也可以在这个标签页面下面，把节点添加到队列中或者从队列中删除。我们把所有的产品节点，都添加到我们创建的产品队列中来。现在查看这个产品队列。我们看到：

 

此时，可以通过拖动，来调整节点之间的相对位置，这个我们就比较熟悉了。此外，在这个页面，还有下面的这些按钮：

 

Reverse表示反向的意思，shuffle表示随机的意思。

现在，导航到Views的管理界面，我们可以看到与Nodequeue相关的视图。

 

每当创建一个队列的时候，系统会自动的创建一个视图。我们编辑一下这个视图，看一下它有什么特别的配置。有两个地方需要注意：

 

首先是关联关系这里，加了一个从节点到队列的关联关系。其次是排序标准：

 

明白了这两点以后，我们完全可以不使用这个视图，而采用修改原有视图的办法。我们编辑视图products，为它添加关联关系“Nodequeue: Queue”，做以下配置：

 

为它添加排序标准“Nodequeue: Position”，并按照升序排列，删除原来的排序标准“内容: Post date (desc) ”。保存视图。现在产品列表页面中，产品就会按照我们队列中的先后位置排序了。

每当创建一个队列的时候，会自动的创建一个视图，如果你觉得自动创建的这些视图没有什么用处的话，我们可以取消这个自动创建视图的功能。在Nodequeue的配置页面，admin/structure/nodequeue/settings： 

 

取消对最后一个复选框的选中即可。

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

样式调整

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

我们下载、安装、启用Site map模块，我这里使用的版本是site_map-7.x-1.0。导航到admin/config/search/sitemap，这是我的配置：

 

 

其余的采用默认配置。Site map模块能够基于菜单、分类生成站点地图，在生成站点地图时，我们可以选择包含哪些菜单、哪些分类，对于分类的话，可以进一步的控制。我们这里是基于主菜单生成的站点地图。这个时候访问页面sitemap，就能够看到站点地图了。我们的站点地图是根据主菜单生成的。显示出来的效果是这样的：

 

在这个页面的左边，没有区块，所以通栏只有主内容，有点单薄。此外，上面的“Main menu”也不是我们想要的。现在，我们可以将这个页面的链接内容复制下来，创建一个page类型的节点，复制过去，保存。然后将站点地图这个菜单链接的URL指向新建节点。禁用Site map模块。

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

我们创建“联系我们”区块，将它放在第一边栏里面，区块的正文中输入以下信息：

 

保存后，调整一下CSS代码：

#main #block-block-2 {

    border-right: 1px dashed #B4BDC4;

margin-top: 20px;

}

 

#main #block-block-2 h2{

    background: none repeat scroll 0 0 #E9E9E9;

    border-bottom: 1px solid #D5D5D5;

    border-top: 1px solid #F2F2F2;

    font-size: 100%;

    font-weight: bold;

    text-align: center;

}

#main #block-block-2 ul li {

  font-size:12px;

}

这是调整后的样子：

 

这个基本满意了，我看到站点名字“亚艾元”三个字比较小，我们这里也没有使用Logo图片，不够显眼。这里通过CSS将字体调的更大一点：

#header #site-name {

    font-size: 4em;

margin-left:20px;

}

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

整个网站，我已经基本满意了，唯一的不足是字体的配置比较灰，这个不影响功能。除此以外，还差什么呢？首页还没有做呢。是的，做网站的时候，可以先做首页，也可以放在后面。首页用什么？我还是用Panels。幻灯用什么？我还是用Views slideshow。