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