在本节我们将介绍如何来做输出重写，并且实现图文列表页面。
如何来重写组件的输出
在模板中重写组件的输出步骤如下：
温馨提示：一般我们会从原先的布局中直接复制一份，然后再来做修改而不是完全新建。
planc模板重新文章组件的博客布局文件夹结构如下：
当在模板的html中按照重写规则布置好文件了，其实剩下的部分就和Joomla关系不大了，都是一些数据的调用和输出。不同程度的PHP水平在这里就会有所体现了。
3.1 对于商业模板
为了提供给使用者足够的灵活性，一般的组件输出文件中都会实现很多的控制参数，还有一些组件会实现插件的支持。这就使得布局文件变得相对的复杂。
在这里对一些通用的代码做一些说明：
1，触发插件的代码：
$dispatcher = JEventDispatcher::getInstance();
$this->category->text = $this->category->description;
$dispatcher->trigger('onContentPrepare', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$this->category->description = $this->category->text;
$results = $dispatcher->trigger('onContentAfterTitle', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$afterDisplayTitle = trim(implode("\n", $results));
$results = $dispatcher->trigger('onContentBeforeDisplay', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$beforeDisplayContent = trim(implode("\n", $results));
$results = $dispatcher->trigger('onContentAfterDisplay', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$afterDisplayContent = trim(implode("\n", $results));
如果在布局文件中看到类似的代码，那么大概可以判断这些代码是为插件输出准备。你不需要修改他们，保持他们在原有的地方即可。
2，layout的代码：
<?php $this->category->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
如果在布局文件中看到有类似layoutFile这样的代码。你并不能直接修改他们，你需要去重写layout。至于如何操作，后买细说
3，子模板的代码：
echo $this->loadTemplate('item');
这代码的意思是在这里将 当前布局如（blog布局）的 blog_item.php这个文件加载出来
4，分页代码：
<div class="pagination"> <?php echo $this->pagination->getPagesLinks(); ?> </div>
剩下就是一些简单的IF ELSE 或者FOREACH了。并不难于理解
3.2 非商业模板
如果你的模板只打算给自己用，并且已经有设计稿了，网站确认不会有大的调整，其实我们大可忽略掉所有的控制参数。使用最原始的方法完全重写布局。这样就会简单很多。此时你只需要关注数据对象，知道如何从数据对象调用需要的数据即可。
为了简单起见，我不打算实现组件的一些控制参数（也就是用户无法通过后台的对应设置来修改），直接重新写布局文件。
我需要展示的界面如图：
为了输出这些内容，我需要知道如何获得文章的图片，如何获得文章的标题，如何获得文章的描述，如何获得文章的发布日期，文章的作者已经文章的点击数。有了这些，我相信，实现这个布局就不是大问题。
1，从默认的布局文件中分析出数据的对象，然后使用print_r函数来查看这个对象的详细信息。
比如在博客布局中，可以看到数据对象有 $this->lead_items ，$this->intro_items，$this->link_items。通过后台的分析可以判断 $this->intro_items为我们需要的数据（具体哪一个，由后台的设置参数决定）。然后使用print_r来查看这个对象的具体属性。
echo "<pre>"; print_r($this->intro_items); echo "<pre>";
输出的结果如下：
Array
(
[0] => stdClass Object
(
[id] => 12
[title] => Joomla中文网 - 试用Joomla 4.0尝鲜版
[alias] => joomla-c
[introtext] =>
Joomla中文网正式启动官方众筹第二季。在本次众筹中，我们的目标是完成一套Joomla模板开发教程。
[fulltext] =>
这是全文
[checked_out] => 431
[checked_out_time] => 2019-01-18 13:44:23
[catid] => 9
[created] => 2019-01-08 13:56:34
[created_by] => 431
[created_by_alias] =>
[state] => 1
[modified] => 2019-01-18 13:44:23
[modified_by] => 431
[modified_by_name] => Super User
[publish_up] => 2019-01-08 13:56:34
[publish_down] => 0000-00-00 00:00:00
[images] => {"image_intro":"images\/sampledata\/parks\/banner_cradle.jpg","float_intro":"","image_intro_alt":"","image_intro_caption":"","image_fulltext":"","float_fulltext":"","image_fulltext_alt":"","image_fulltext_caption":""}
[urls] => {"urla":false,"urlatext":"","targeta":"","urlb":false,"urlbtext":"","targetb":"","urlc":false,"urlctext":"","targetc":""}
[attribs] => {"article_layout":"","show_title":"","link_titles":"","show_tags":"","show_intro":"","info_block_position":"","info_block_show_title":"","show_category":"","link_category":"","show_parent_category":"","link_parent_category":"","show_associations":"","show_author":"","link_author":"","show_create_date":"","show_modify_date":"","show_publish_date":"","show_item_navigation":"","show_icons":"","show_print_icon":"","show_email_icon":"","show_vote":"","show_hits":"","show_noauth":"","urls_position":"","alternative_readmore":"","article_page_title":"","show_publishing_options":"","show_article_options":"","show_urls_images_backend":"","show_urls_images_frontend":""}
[metadata] => {"robots":"","author":"","rights":"","xreference":""}
[metakey] =>
可以看到这个对象是一个数组，每一篇文章就是一个具体的对象，另外通过输出的结果可以大概了解到哪一些属性是我们需要的。
对于像
[images] => {"image_intro":"images\/sampledata\/parks\/banner_cradle.jpg","float_intro":"","image_intro_alt":"","image_intro_caption":"","image_fulltext":"","float_fulltext":"","image_fulltext_alt":"","image_fulltext_caption":""}
如果我们需要访问具体的属性值，那么就需要使用json_decode进行解码，然后再访问具体的属性。
在本版中，我们在模板的html中重新了文章组件的博客式布局，使得其输出我们期待的图文列表方式
5.1 代码片段如下：
<div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Blog">
<div class="blog-items-container">
<?php foreach($this->intro_items as $item):?>
<?php $img = json_decode($item->images);
$link = ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language)
?>
<div class="blog-item">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="/<?php echo $img->image_intro;?>" >
</div>
<div class="col-md-9">
<h4><a href="/<?php echo $link;?>"><?php echo $item->title;?></a></h4>
<p><?php echo $item->introtext;?></p>
<p class="text-muted">
<?php echo JHtml::_("date",$item->modified,"Y-m-d");?> <?php echo $item->author;?> 点击数:<?php echo $item->hits;?>
</p>
</div>
</div>
</div>
<?php endforeach;?>
</div>
<div class="pagination">
<?php echo $this->pagination->getPagesLinks(); ?>
</div>
</div>
5.2 执行的效果
新建一个菜单项，将菜单项的类型设置为类别博客风格，并且在博客布局选项中设置成如下参数：
刷新前台后，在前台显示的效果如下：
5.3 v0.0.15版本的代码
关于v0.0.15版本的代码，可以在此下载[下载文件:]tpl_plancv0.0.15_2019-01-18_for_j3x.zip
评论 (0)