进入专题模式查看 >>

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

1,本节目标


如何来重写组件的输出

2,如何重写组件的输出


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

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

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

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

planc重新博客布局.png

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,实现图文列表的布局


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

我需要展示的界面如图:

图文新闻列表.png

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

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

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 执行的效果

新建一个菜单项,将菜单项的类型设置为类别博客风格,并且在博客布局选项中设置成如下参数:

joomla博客布局的设置.png

刷新前台后,在前台显示的效果如下:

joomla图文列表.png 

5.3 v0.0.15版本的代码

关于v0.0.15版本的代码,可以在此下载tpl_plancv0.0.15_2019-01-18_for_j3x.zip

用户评分: 0 / 5

不活动星星不活动星星不活动星星不活动星星不活动星星
 

评论

  • 未找到评论