前不久本站撰文介绍了史上最牛的 Joomla! 文章展示模块 Display News by BK，该模块参数丰富，但是对于外观样式的控制参数却很少。因此本站高级会员 yooyooh 在论坛提出了几个有关 Display News 模块的样式调整问题。经过测试，我发现这几个问题都能通过对应的 CSS 命令来实现。

Display News Module Parameters

在开始讲具体的 CSS 命令之前，我想描述一下我这个门外汉对于 CSS 的一个通俗的理解：CSS 能够控制外观样式，就像电灯的开关能够控制灯泡的亮与灭，甚至高级的开关还有亮度调节功能。在网页上，不仅有文章标题、撰写日期 、作者、段落、正文、链接、小标题、文字引用、代码引用等等各种不同组成部分，还可能有图片、幻灯、视频等内容。我们可以将这些不同成分比作大小不一、形状各异、颜色不同的灯泡，如果一个房间里面装满了这么多灯泡，肯定让人眼花缭乱，现在我们想要控制其中某一盏灯，或者某几盏灯的亮或灭，或者闪烁，或者亮度，是不是有点无从下手的感觉？其实只要找到能够控制该灯泡的开关，问题就迎刃而解。

因此，如果你想要通过 CSS 来控制网页的样式，首先要找到真正能够指向你想控制的那个部分的样式代码，准确来讲，就是 CSS 的类或 ID，或者 HTML 元素。

今天我们的任务就是解决 yooyooh 在论坛提到的那几个问题：

1. Display News 模块是否支持中文模块名称？
2. 是否可以更改模块中文章标题的长度？
3. 是否可以更改模块中文章标题的文字颜色、大小、行间距等样式？
4. 模块标题后面的日期是否可以右对齐？
5. 如何实现首页上的“中国式新闻门户版块列表”？

可以看出，这几个问题都是围绕 Display News 模块来说的。因此我们的 CSS 调控范围也就限于这个模块。

首先，我们在 Joomla! 1.5.8 中文版中安装 Display News by BK 模块。安装之后将它发布到前台。此模块默认展示的内容较多，我们在后台修改“格式字串”为 “%t %d”，就代表只展示“标题 日期”。同时，我们直接将模块名称从原来的英文修改为“中文标题”，另外，在参数中选择“标题可链接”为“是”，然后保存。现在前台的样式是：

Display News Module frontend

从上图中可以看出，第一个问题“中文标题”已经解决了，这个模块完全支持中文标题。至于文章标题的长度，实际上此模块中也有对应参数，直接填写数字即可。看看下面的文章标题和日期，由于标题长短不一，标题跟在后面确实不漂亮。日期差不多都是一样长度，如果我们把顺序调整为“日期 标题”，那么可能还好看一些。但是 yooyooh 想要的是“标题 日期”的顺序，而且日期要靠右对齐。这个在模块参数中没有对应项目，因此只能修改 CSS 了。

我们在上图中看到的就是“灯泡”，下一步就是要找到控制这些灯泡的“开关”。从哪里找呢？很简单，查看页面源代码即可。

在页面上点击右键，选择“查看页面源代码”，从源代码中很容易就找到与 Display News 有关的那部分代码，这是因为该模块作者已经在源代码中特意作了标记：

Display News Module Source Code

可以看出，作者用注释的方式在 Display News 模块源代码的开始和结尾都作了标记，非常容易辨认。 —— 插句话，我建议所有的扩展开发人员都向这个作者学习，在源代码中充分使用注释来给用户提醒。

我们来看看这段代码中可以找到哪些“开关”：

• HTML 元素包括：Div , Span, a, 总共 3 种；
• CSS 类包括：contentpaneopen， contentheading， contentpagetitle，createdate， 总共 4 种。

我们现在要做的就是用这些“开关”来控制模块的外观。写入 CSS 代码的文件是网站当前模板的 template.css 文件。

打开 /templates/rhuk_milkyway/css/template.css 这个文件，在末尾插入下面的代码：

在上述代码中，通过 CSS 调整了：文章标题的字号为 12px；颜色为红色；标题链接在正常状态及鼠标指向时、鼠标点击后，都没有下划线；日期靠右对齐，每一行的行高为 180%。

你可以对照这个例子来操作一下，保存 template.css 文件后，刷新前台，就会发现 Display News 模块的样子不那么难看了：

Display News Module CSS modified

在上面新增的 CSS 代码中，你也可以继续增加项目来实现你想要的其它样式，或者更改示例中的每一项冒号后面的值来满足你自己的样式要求。

 当然，有人会说：我怎么知道用哪个 CSS 命令呢？我又怎么知道冒号后面都可以用哪些值呢？这就需要了解一些 CSS 知识了。不要担心，谁也不是生下来就懂这些，不学习，怎么会懂呢？如果你没兴趣、没时间学，那就付费请人给你设计吧；如果愿意自己学，那么点击页面底部的链接来下载《CSS 2.0 中文手册》去认真学吧。

现在来讲讲最后一个问题。关于网站首页中部多个模块并列展示多个类别文章标题的排版布局，已经有很多人在论坛提问过。我认为最佳方案就是针对每个人的网站来设计专门的模板，或者通过 Joomla! 1.5 特有的 HTML 优先输出原理 来设计一套布局方案。但是这两种方法都需要涉及模板设计知识，以及 Joomla! 的有关源代码。我的能力绝对做不到。今天我只能用一种比较傻瓜的方式来模拟出这样的效果。

基本思路：在网站首页只显示一篇文章，在该文章中利用特殊插件插入多个 Display News 模块（ N 行 2 列），仿制出一个“中国式新闻门户首页”。

如何解决多个模块各自展示不同类别的文章？这个简单，可以在后台的“模块管理”中用“复制” 的方式得到 N 个 Display News 模块，然后在每一个模块中分别指定显示特定单元或类别的文章即可。

如何解决多个模块 N 行 2 列的对齐问题？在文章中用一个 N 行 3 列的表格，中间一列用作间隙，两边两列的单元格里面放置引用模块的标记代码即可。

需要安装特定的插件来在文章中插入模块吗？不用。因为 Joomla! 1.5 已经自带了这样的插件。你进入后台的“插件管理”，可以找到一个名为“Content - Load Module”的插件，就是干这事的。点击此插件名称，可以在介绍部分看到它的标记语法是：{ loadposition user1 } （请注意：为了防止触发，我在两个大括号旁边都多插入了一个空格，你实际应用时不能有那个空格）。这个标记代码中的 user1 就是你想要插入的模块所在的位置。

具体操作方法：

在后台的“模块管理”中，用“复制模块”的方法，得到 N 个同样的 Display News 模块（N 这个数字取决于你想要在首页显示的标题版块个数，最好是偶数，这样才能是 2 列的排版看起来漂亮）；针对每一个模块分别指定要显示的文章来源（单元或类别）；分别在每一个模块的参数页面上，在“位置”这一项，不要选择 left 或者 right 等预设位置，而是直接删除当前显示的位置，然后手动输入 news-001、news001、news003 …… news00N。

这一点非常重要！ 一定要确保：

1. 每个新闻模块的位置都是唯一的，不与其它任何模块位置，包括模板中预设的位置冲突；
2. 手动输入位置时不能有空格，也不要用中文，就用 news001 这样的英文，最多加一个连字符形如 my-module-789；

在后台的“文章管理”中打开首页的最上面那篇文章 Joomla! Community Portal，将该文章的原有内容全部删除。在文章中插入一个 N 行 3 列的表格，表格边框宽度为 0，边框颜色不要；中间一列不填写任何东西；在两侧两列的各个单元格中一次填写（实际照抄时别忘记删除大括号内多余的那两个空格）：

{ loadposition news001 }     { loadposition news002 }

{ loadposition news003 }     { loadposition news004 }

……

这样布局完成之后，继续调整文章编辑页面右侧的参数：不要显示文章标题；不要显示文章作者；不要显示撰写日期时间和最后更新日期时间；不要显示 PDF、打印、email 这三个图标；保存。

然后从后台的菜单管理中进入“main menu”，可以看到主菜单上的各项，点击 Home 这个菜单项目，进入其参数页面，在右侧调整：“基本参数”中选择 头条文章 1，引言 0，分栏 1，链接数 0；“高级参数”中选择 分页 隐藏，分页结果 隐藏；“系统参数”中选择 显示页面标题 为 否。保存。

现在刷新前台，应该可以看到类似下图的样子：

News Portal modules

看上去是不是很接近新闻门户网站的首页了？如果你想再漂亮点，完全可以再次通过 CSS 来调整。不过提醒一下：现在这些模块都是 Display News，那么互相之间要想实现不同的 CSS，就必须用到 模块 CSS 后缀 这个参数了。只要给每个模块指定唯一的 CSS 后缀，就可以针对单个模块来进行样式调整了。

有时候会看到新闻门户网站这样的文章标题版块上下相邻两层之间会有一个横向的 banner ，或者彩色条带等等，我们能做到吗？可以！在刚才文章中的表格里面，在需要插入 banner 的地方，给表格多插入一个空行，然后将该行三个单元格合并，在中间想插入什么都可以了。

再提醒一下：这样用“文章”来冒充首页布局之后，再撰写其它文章的时候，就不要选择“发布到首页”了。即使选了意义也不大，因为我们在 Home 这个菜单里面已经设置首页只显示一篇文章了。

最后可能有人问：文章开始的插图有什么意义吗？那个插图中显示了 Display News 自身已经带有 4 种 CSS 方案，更换方案后，则源代码中的 CSS 类也会相应改变。本文的示范都是按照第一种方案来操作的。如果你选择了其它方案，就不要照抄本文的代码，你可以通过“查看页面源代码”来找到正确的 CSS 类。—— 总之，任何时候都不要忘记，查看源代码是一种很好的检查和学习方式。