今天Q群里的朋友问了一个问题:如何用Joomla3.8做出类似这样的一个效果?

20180725144505

要求有标题、摘要、摘要图片、日期、浏览量等等什么的,Joomla默认是做不出这样的效果的。在之前我做的星仔果园的网站上就用的类似的效果。

星仔果园网站截图

首先要重写文章组件的模板,这个案例里面我使用的是“文章摘要”这个菜单项,因此要重写 com_content/category 目录下的 blog_item.php 。如何重写?请参考这篇文章。代码如下: 

<?php
/** 
* @package     Joomla.Site 
* @subpackage  com_content 

* @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved. 
* @license     GNU General Public License version 2 or later; see LICENSE.txt */
defined('_JEXEC') or die;
// Create a shortcut for params.
$params = $this->item->params;JHtml::addIncludePath(JPATH_COMPONENT . '/helpers/html');
$images = json_decode($this->item->images);?>
<?php if (isset($images->image_intro) && !empty($images->image_intro)) : ?>
<figure class="thumbnail">
<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>" rel="nofollow">
<img
<?php if ($images->image_intro_caption) : ?> <?php echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_intro_caption) . '"'; ?>
<?php endif; ?> src="/<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl"/>
</a>
</figure>
<?php endif ?>
<dt>
<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>" itemprop="url">
<?php echo $this->item->title; ?>
</a>
</dt>
<?php if ($this->item->metadesc): ?>
<dd class="intro_text<?php if(!empty($images->image_intro)){echo " yes";} ?>">
<p><?php echo $this->item->metadesc; ?></p>
<div class="item_info<?php if(!empty($images->image_intro)){echo " yes";} ?>">
<i class="fa fa-clock-o fa-fw" aria-hilien="true"></i>
<time datetime="<?php echo JHtml::_('date', $this->item->created, 'c'); ?>" itemprop="dateCreated">
<?php echo JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3')); ?>
</time>
<i class="fa fa-eye fa-fw" aria-hilien="true"></i>
<meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
<?php echo $this->item->hits; ?>
</div>
</dd>
<?php endif ?>

细心的你可能已经注意到代码里面使用 metadesc 来代替文章摘要了,为什么这样做?

首先,在文章里面手动插入 Read More 是很不人道的做法,一点都不灵活。

其次,joomla自带文章组件如果不借助第三方SEF组件,无法自动生成“元描述”,所以我干脆将人工填写的元描述作为文章摘要显示出来,这样一举两得。

其他的CSS样式请自己根据实际情况编写。