K2分类列表如何使用Bootstrap的栅格系统?
在Joomla后台,你可以设置K2的分类的每行文章数量(列数)。虽然这样操作也很方便,但因为Bootstrap的前端框架应用广泛,很多Joomla模板都会用到Bootstrap,导致我们很多时候,也希望K2分类的文章列表也使用Bootstrap的栅格系统进行排版,这样我们就可以得到更加统一的样式,进行定制或继承样式都会更加方便。
在考虑如何实现这功能之前,我们先进行简单分析。例如我们的文章数量为6,我们设置为3列,那么就是我们实现的栅格结构可能是这样:
<div class="row">
<div class="col-md-4">
文章1
</div>
<div class="col-md-4">
文章2
</div>
<div class="col-md-4">
文章3
</div>
<div class="col-md-4">
文章4
</div>
<div class="col-md-4">
文章5
</div>
<div class="col-md-4">
文章6
</div>
</div>
但这样实现的方式,会出现不少问题,例如当每篇文章内容长度不同,会导致外层DIV的高度不一样,就会出现排版上混乱。所以我们选择这样的实现方式:
<div class="row">
<div class="col-md-4">
文章1
</div>
<div class="col-md-4">
文章2
</div>
<div class="col-md-4">
文章3
</div>
</div>
<div class="row">
<div class="col-md-4">
文章4
</div>
<div class="col-md-4">
文章5
</div>
<div class="col-md-4">
文章6
</div>
</div>
区别在我们手动给文章分成了两行的结构,这样来说,更符合Bootstrap的栅格系统规范。但是如果要这样处理,我们的考虑的情况就更为复杂,就是前台用户输入文章列数时,无论输入什么数字,我们都要让模板自动生成符合Bootstrap的栅格的结构。
假设用户设置的列数为x,我们只要找出每行的开始文章和结束文章,然后给它们添加对应外层DIV就可以。具体就是使用文章key对x整除,又因为Key的值是0开始的,所以把第一行排除掉,从第二行开始,开始文章为k%x==0
,结束文章就是(k+1)%x==0
。如果不太理解,可以假设文章数为14,每行文章数为3,以k值排列文章,是这样的:
(默认第一篇添加DIV结构)0,1,2(2+1整除3)
(3可以整除3)3,4,5(5+1整除3)
(6可以整除3)6,7,8(8+1整除3)
(9可以整除3)9,10,11(11+1整除3)
(12可以整除3)12,13(13+1不能整除3,但它是最后一篇文章)
<!-- x=3,以上排列的为文章key值,即每行一篇文章key值可以整除x,每行的最后一篇key值加1可以整除x -->
然后,我们还要考虑的情况是,最后一篇文章就算不符合(k+1)%x==0
的条件,它也应该添加闭合的DIV。
因为K2的分类文章列表有多种输出结构,例如leading、primary或secondary,这里只以secondary作为示例,其他的结构的原理是一样的,现在我就给出具体的解决方案:
修改模板文件category.php
<?php if(isset($this->secondary) && count($this->secondary)): ?>
<!-- Secondary items -->
<?php foreach($this->secondary as $key=>$item): ?>
<?php
/* 定义每页面显示的最后一栏的样式 */
if( (($key+1)%($this->params->get('num_secondary_items'))==0 ) || (($key+1) == (count($this->secondary))) )
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<?php if ((($key >= ($this->params->get('num_secondary_columns'))) && ( $key % ($this->params->get('num_secondary_columns'))==0)) || ($key == 0)) : ?>
<!-- 按设定的每栏文章数量分配文章,插入row样式的div标签 -->
<div class="row<?php echo $lastContainer; ?> catItemRow">
<?php endif; ?>
<?php
/* 加载category_item.php文章模板 */
$this->item=$item;
echo $this->loadTemplate('item');
?>
<?php if((($key+1)%($this->params->get('num_secondary_columns'))==0) || (($key+1) == (count($this->secondary)))): ?>
<!-- 为每栏添加row样式的闭合div标签 -->
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
修改模板文件category_item.php
;因为Bootstrap的栅栏是为12份,所以每篇文章占的份数为12除以每栏文章数(但当每栏文章数不能被整除时,会出现错误)
<div class="col-md-<?php echo 12 / $this->params->get('num_secondary_columns'); ?>">
</div>
假如你使用的是目录模式,子分类也是要定制的,同样是修改模板文件category.php
<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<!-- Subcategories -->
<div itemtype="http://schema.org/Blog" itemscope="" class="blog itemListSubCategories">
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<?php
// Define a CSS class for the last container on each row
if( (($key+1)%($this->params->get('subCatColumns'))==0))
$lastContainer= ' subCategoryContainerLast';
else
$lastContainer='';
?>
<?php if ((($key >= ($this->params->get('subCatColumns'))) && ( $key % ($this->params->get('subCatColumns'))==0)) || ($key == 0)) : ?>
<div class="row">
<?php endif; ?>
<div class="subCategoryContainer col-md-4 <?php echo $lastContainer; ?>">
<div class="subCategory">
<?php if($this->params->get('subCatImage') && $subCategory->image): ?>
<!-- Subcategory image -->
<a class="subCategoryImage" href="/<?php echo $subCategory->link; ?>">
<img alt="<?php echo K2HelperUtilities::cleanHtml($subCategory->name); ?>" src="/<?php echo $subCategory->image; ?>" />
</a>
<?php endif; ?>
<?php if($this->params->get('subCatTitle')): ?>
<!-- Subcategory title -->
<h2>
<a href="/<?php echo $subCategory->link; ?>">
<?php echo $subCategory->name; ?><?php if($this->params->get('subCatTitleItemCounter')) echo ' ('.$subCategory->numOfItems.')'; ?>
</a>
</h2>
<?php endif; ?>
<?php if($this->params->get('subCatDescription')): ?>
<!-- Subcategory description -->
<p><?php echo $subCategory->description; ?></p>
<?php endif; ?>
<!-- Subcategory more... -->
<a class="subCategoryMore" href="/<?php echo $subCategory->link; ?>">
<?php echo JText::_('K2_VIEW_ITEMS'); ?>
</a>
</div>
</div>
<?php if((($key+1)%($this->params->get('subCatColumns'))==0) || (($key+1) == (count($this->subCategories)))): ?>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
同样的思路,我们还可以应用于K2的内容模块,相对来说,K2的内容模块实现起来会简单一些。