这一节，我们将使用joomla模块来实现网页侧边栏的内容，并且优化显示效果

1，本节目标

学习如何使用模块来产生设计图中的内容

2，侧边栏的内容

2.1，搜索部分

我们在后台新建了一个搜索模块，然后发布到前台的sidebar这个位置

2.2 为您推荐部分

这一部分使用文章组件的 新闻轮播模块，然后同样发布到sidebar这个位置

2.3 更多文章部分

这一部分使用文章组件的 文章类别列表模块，然后同样发布到sidebar这个位置

显示的效果如下：

 上面，已经成功的展示出来了数据。下一步就是为这些数据写css代码了。具体细节就不说了。

优化后的效果如下:

4，v0.0.11版本

在本版本中，我已经侧边栏输出的内容进行了css调整，让他美观一点。（实际上，模板开发的大部分工作就是写CSS代码，请大家记住这一点）。

4.1 代码如下：

/*新闻轮播部分的CSS样式*/
.newsflash {
    border: solid 1px #f2f2f2;
    padding: 5px;
}
h4.newsflash-title {
    border-bottom: solid 1px #f2f2f2;
    padding: 5px;
}
/*搜索部分的CSS样式*/
.search {
    margin: 20px 0px;
    padding-bottom: 20px;
    border-bottom: solid 1px #eee;
}
.search label {
    display: none;
}
.search input[type=search] {
    border: 1px solid #ddd;
    width: 100%;
    padding: 5px 10px;
    border-radius: 20px;
}
/*分类模块*/
ul.categories-module {
    margin: 0px;
    padding: 10px;
}
ul.categories-module li{
	list-style:none;
}

4.2 学习模板开发的方法

• 第一步在后台向位置放置功能模块，产生内容。
• 第二步设置模块的参数，使得内容和设计稿基本符合。
• 第三步在模板中写css代码，优化模块的显示。最终完全实现和设计稿一样的效果

4.3 v0.0.11版本的代码

关于v0.0.11版本的代码，可以在此下载 [下载文件:]tpl_plancv0.0.11_2019-01-14_for_j3x.zip