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的内容模块实现起来会简单一些。