9.3 填充侧边栏内容模块 - v0.0.11版本

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

1,本节目标


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

2,侧边栏的内容


2.1,搜索部分

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

2.2 为您推荐部分

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

2.3 更多文章部分

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

显示的效果如下:

c计划侧边栏

 上面,已经成功的展示出来了数据。下一步就是为这些数据写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



作者:张敏
原文:http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1545-first-template-18?tmpl=component&zhuanti=1

Joomla模板开发教程

© 野草工作室版权所有 | 粤ICP备13002429号

基础学习教程

站内链接