8.2 优化组件输出 - v0.0.10
上一节已经能够输出组件的内容了，但输出的效果（外观）实在不好看，在这一节中我们就来优化这个输出
1，本节目标
优化组件输出内容的外观
2，工作方向
调整组件的输出和调整模块的输出是一样的。由Joomla系统来提供数据，由我们的模板来负责输出外观。那么现在我们要做的就是为系统的输出增加一些CSS，调整它的外观。具体的CSS代码，在此就不列出了。
3，v0.0.10版本
3.1 修改说明
在本版本中，我仅仅只是增加了一些针对文章组件的外观优化的CSS.
3.2 优化后的效果
如图：
3.3 关于v0.0.10版本的代码
关于v0.0.10版本的代码，可以在此下载 tpl_plancv0.0.10_2019-01-13_for_j3x.zip
4，说明
本版本仅仅只是优化了文章详情页面的外观，其他页面的外观大家依照上面的方法，一一完成即可。
作者：张敏
原文：http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1542-first-template-15?tmpl=component&zhuanti=1
Joomla模板开发教程
- 第1章:C计划的诞生
- 1.1 C计划 - 模板开发教程
- 1.2 课程约定
- 1.3 出发前的准备
- 第2章:准备知识
- 2.1 知识储备
- 2.2 HTML
- 2.3 CSS
- 2.4 JS
- 2.5 PHP
- 第3章:Joomla模板机制
- 3.1 Joomla的模板机制
- 第4章:最简单的模板
- 4.1 最简单模板-planc
- 4.2 模板成功安装意味着什么
- 4.3 使用模板
- 第5章:解析模板结构
- 5.1 创建自己的第一个模板
- 5.2 给模板增加CSS文件，JS文件
- 5.3 通用的编码规范
- 第6章:向着目标前进
- 6.1 我们的目标
- 6.2 当面对设计稿的时候，该如何下手
- 6.3 色块法完成页面的布局
- 6.4 使用前端框架
- 第7章:模块位置的定义
- 7.1 定义模块的位置
- 7.2 注册模块位置
- 7.3 向模块位置输出内容
- 7.4 为模块设置样式
- 第8章:组件内容的输出
- 8.1 输出组件的内容
- 8.2 优化组件输出
- 第9章:和目标对比
- 9.1 和目标对比
- 9.2 Joomla视角看设计图
- 9.3 填充侧边栏内容模块
- 第10章:模块风格
- 10.1 消失的模块标题
- 10.2 标准的模块风格
- 10.3 定义自己的模块风格
- 10.4 隐藏没有发布模块的位置
- 10.5 countModules用法详解
- 第11章:模板的输出覆盖机制
- 11.1 更深层次对页面的定制
- 11.2 Joomla如何确定确定生成页面的代码
- 11.3 模板输出覆盖
- 11.4 重写组件输出
- 11.5 重写模块输出
- 第12章:模板的参数
- 12.1 为模板增加参数
- 12.2 实现多风格模板
- 第13章:让模板支持多语言
- 13.1 模板的多语言
- 第14章:模板的深度定制
- 14.1 自定义网站图标
- 14.2 自定义错误页面
- 14.3 自定义离线页面
- 14.4 自定义组件输出页面
- 第15章:商业级的模板
- 15.1 标准的模板templateDetail.xml
- 15.2 让模板支持系统消息的输出
- 15.3 建议的模板代码
- 第16章:结束语
- 16.1 结束语