11.4 重写组件输出 -v0.0.15版本

在本节我们将介绍如何来做输出重写，并且实现图文列表页面。

1，本节目标

如何来重写组件的输出

2，如何重写组件的输出

 在模板中重写组件的输出步骤如下：

• 确认你的模板的根目录下有一个html文件夹。如果没有，那么就新建。
• 确认你需要重写的组件。比如文章组件（com_content），那么就在html下面新建一个文件夹，并取名为com_content
• 确认你需要重新的视图。比如文章列表视图（category）,那么就在com_content下面新建一个文件夹，并取名为category
• 确认你需要重写的布局。比如博客布局（blog.php），那么就在category下面新建一个blog.php文件。
• 一切OK后，你在blog.php文件中按照你的要求重写即可。

温馨提示：一般我们会从原先的布局中直接复制一份，然后再来做修改而不是完全新建。

planc模板重新文章组件的博客布局文件夹结构如下：

3，如何写出我们需要的布局

 当在模板的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 非商业模板

如果你的模板只打算给自己用，并且已经有设计稿了，网站确认不会有大的调整，其实我们大可忽略掉所有的控制参数。使用最原始的方法完全重写布局。这样就会简单很多。此时你只需要关注数据对象，知道如何从数据对象调用需要的数据即可。

4，实现图文列表的布局

为了简单起见，我不打算实现组件的一些控制参数（也就是用户无法通过后台的对应设置来修改），直接重新写布局文件。

我需要展示的界面如图：

为了输出这些内容，我需要知道如何获得文章的图片，如何获得文章的标题，如何获得文章的描述，如何获得文章的发布日期，文章的作者已经文章的点击数。有了这些，我相信，实现这个布局就不是大问题。

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","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进行解码，然后再访问具体的属性。

5，v0.0.15版本

在本版中，我们在模板的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