9.2 Joomla视角看设计图

在 当面对设计稿的时候，该如何下手 这一篇文章中，我们介绍了应该如何将设计图分割成模块。在本节中，我们需要解决另外的一个问题，如何给这些模块位置安排适当的数据。也就是如何判断模块位置该放置什么模块

1，本节目标

学习如何将设计图中的内容块使用Joomla的模块来对应

2，内容的产生

首先，我可以很负责的告诉大家，Joomla可以实现任何外观样式的网站，也就是说，任何的设计图我们都可以将它变为joomla的模板！这一点，大家无需怀疑！

在前面已经完成了模板位置的定义，但仅仅定义了模块的位置，是不足以完成一个设计图的。在 和目标对比 一文中，了解到，目前我们的模板和目标最大的一个差距就是设计稿是一个内容丰富的网站，而我们的模板仅仅只是将该放置内容的地方安排了模块位置。 接下来的问题就是 这个模块位置该安排什么模块，才能实现和目标一样的效果呢？

说了这么多，其实我只是想表达一个意思：如何将设计稿的内容，使用Joomla的模块/组件来输出。

在joomla中，模板开发只负责页面的外观。内容输出部分是由Joomla来为我们提供的。

joomla的内容输出有组件输出和模块输出。组件输出，就是页面上最主要的内容，最常用到的组件就是文章组件。这个组件的实质是内容发布解决方案，也就是向外展示内容的解决方案。只要你需要向外展示内容，那么这个组件就可以帮你输出数据。我们要确认哪一部分能够输出这些数据。

3，思维转换

闲话少说，进入正题。现在设计稿就是这个样子：

当我看到这个设计稿的时候，第一感觉就是：

• LOGO部分，我可以使用自定义HTML模块来实现。（这个部分的实质就是输出一个图片即可）
• 登录部分，我可以使用登录模块来实现，或者使用自定义HTML模块来实现
• 对于导航部分，我可以使用菜单来实现。
• 对于次级导航部分，我可以使用自定义HTML模块或者菜单模块来实现。
• 主要的内容部分，这个主要展示某一个类别中的一系列文章。我可以使用文章组件的 类别中文章这种菜单项类型来做（这种类型可以展示一个分类中的所有文章）
• 右边1 这个部分展示的是一个搜索框，这可以使用搜索模块来实现
• 右边2 这个部分展示的是一系列的内容的标题，并且点击后可以进入详情界面。这可以使用  文章组件的 相关文章模块 或者 新闻轮播模块来实现
• 右边3 这个部分展示的是一些小型分类，点击之后可以进入查看这个分类中的所有消息。这个可以使用 文章组件的 文章类别列表 模块来实现。

有了上面的判断，我心中已经有了整个网页的实现方法了。这就是一种思维方式的转换。

TIPS:对于所有的展示类内容，我们都可以使用核心的文章组件来做为其内容的产生者。不管这个网页的名字是叫新闻 还是其他，只要还是展示内容，在joomla中都统一使用称为文章。

4，解惑

4.1，为什么我能够马上知道应该使用什么模块呢？

这是因为，在此之前，我对joomla的一些常用的模块都很熟了，知道了他们能够解决什么问题。

掌握常用的功能模块是Joomla建站的基础。如果你现在还不具备这种能力，那么我建议你先熟练一下joomla自带的一些模块。

4.2 Joomla自带的菜单展示的效果（竖着的，且没有特效）和设计稿（要求炫酷的效果）差很多，这个问题该怎么解决？

这是一个很好的问题。对于这个问题，我的建议是：

首先我们要考虑的是数据的产生，其次才应该考虑界面的问题。在所有的程序设计中，都会强调数据和界面分开，这点在Joomla中得到了很好的实践。你只需要确定能否产生客户需要的数据即可。比喻对上面的导航，我知道系统的菜单是可以实现用户需要的菜单结构的。至于说动画，特效，等等，大可不用理会。因为，这些外观样式我们都可以在模板中进行重写。