给单栏博客加个多栏的选择，可以自由切换

引子

最近看着自己博客单栏显得既单调又枯燥，于是想着能不能弄个多栏的,之前一直用的是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就是文章摘要的字数，可以自行更改。

来源：https://laolion.com/archives/800.html