引子

最近看着自己博客单栏显得既单调又枯燥，于是想着能不能弄个多栏的, 之前一直用的是 pinghsu 主题，心想着能不能按照它的样式弄一个三栏的首页。有了这个想法之后就开始了折腾......

如何实现多栏？

下载了 pinghsu 的主题开始研究，发现它实现三栏的方式是用 box-sizing:border-box;width:33% 来实现的三栏，然后又请教了大佬，他说建议用 columns: 3。于是我查了下两个都可以实现多栏的效果，我采取了大佬的建议选择了后者。
然后我新建了一个 CLASS 样式：

.newspaper{
columns:3;
-moz-columns:3; /* Firefox */
-webkit-columns:3; /* Safari 和 Chrome */
}

这样就可以了。
然后再用 <div class="newspaper"></div> 包住单栏的样式就可以了。

单栏和多栏的自由切换

多栏实现了之后，接下来就是如何在单栏和多栏之间进行自由切换的问题了，还是参照了 pinghsu 的主题。在 functions.php 文件里面最下面放入以下代码：

// 首页样式选择
     $postListSwitch = new Typecho_Widget_Helper_Form_Element_Radio('postListSwitch',
        array('threeList' => _t('三栏'),
            'oneList' => _t('单栏'),
        ),
        'oneList', _t('首页文章列表设置'), _t('默认单栏，根据自己的喜好去做切换吧'));
    $form->addInput($postListSwitch);

然后在到 index.php 文件里面分别在单栏和多栏的样式放入以下代码：

<?php if ($this->options->postListSwitch == 'oneList'): ?>
单栏样式
<?php endif; ?>
<?php if ($this->options->postListSwitch == 'threeList'): ?>
多栏样式
<?php endif; ?>

这样一来就可以进行自由切换了。

细节部分

多栏之后首页的文章标题和文章摘要太长显得非常的别扭，这时候可以设置标题和摘要的字数来调整：
<?php $this->title(8) ?> 数字 8 就是标题的字数，可以自行更改；
<?php $this -> excerpt(20); ?>数字 20 就是文章摘要的字数，可以自行更改。

最后

下一个折腾的项目是：点赞功能！