今天红烧肉同学看了Joomla 3 基础指南之图解博客式排版之后问我，如果要在 Joomla 默认的响应式模板上面实现多列的文章列表布局该怎么做？并给了我一个示意图:

还按照定制 Joomla 模板时如何隐藏组件输出区隐藏了组件输出区，想把列表填充到中间的空白区域，要实现这样的布局，需要对protostar模板做一点小小的修改。打开templates/protostar目录下的index.php文件，10行defined('_JEXEC') or die的下面添加：

$home = 0;
$menuitem = & JSite::getMenu();
if ($menuitem->getActive() == $menuitem->getDefault()) {
$home = "1";
}

然后找到这段：

<main id="content" role="main" class="<?php echo $span;?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>

修改为：

<main id="content" role="main" class="<?php echo $span;?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<div class="row-fluid">
<!--这里添加了一个新的模块位-->
<jdoc:include type="modules" name="position-10" style="xhtml" />
</div>
<?php if(!$home): ?>
<jdoc:include type="message" />
<jdoc:include type="component" />
<?php endif; ?>
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>

模板部分修改完成，接下来就要添加模块了。至于这种文章列表模块有非常多的选择，这里我就用一个非常简单的新闻列表模块来演示。

这里我们假设你已经有了几个文章分类，并且里面有了若干内容，并且为每一个分类建立了一个对应的菜单，安装好新闻列表模块。打开网站后台【模块管理】-【新建】-【新闻列表模块】，做一些简单的设置，这里就不啰嗦了，位置发布在position-3，这就是上面的那个列表。

下面再建立两个同样的列表，位置发布在position-10，在模块设置里面的【高级】-【模块CSS类后缀】里面填上：span6，注意前面要加个空格。这样就可以保证在电脑屏幕上是2列，手机屏幕上是1列了。

友情链接模块就简单了，在友情链接组件里面建立好友链，然后建立一个友情链接模块（Joomla 3以后改称网站链接），发布在position-7就行。

转载自星仔码头