文章进行双栏显示

前言

此次修改需要更改两个文件，另添加一个css文件

注意

请提前备份好以下文件（functions.php/index.php）

教程

第一步

首先打开functions.php文件，在 <div class="joe_config__notice">请求数据中...</div> 之后添加以下代码

$joe_list  = new Typecho_Widget_Helper_Form_Element_Select(
        'joe_list',
        array(
            'on' => '开启',
            'off' => '关闭（默认）',
        ),
        'off',
        '开启双栏显示',
        '介绍：用于文章进行双栏显示'
    );
    $joe_list->setAttribute('class', 'joe_content joe_global');
    $form->addInput($joe_list->multiMode());

第二步

在assets/css目录下新创建一个文件夹，命名为list_min.css，并填写如下代码

.joe_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 15px;
}
@media(max-width: 768px){
html .joe_list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    -webkit-column-gap: 15px;
    column-gap: 15px;
    
}
}

第三步

找到index.php文件中 <script src="https://fastly.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script> ，并在其后添加下列内容

<?php if ($this->options->joe_list === 'on') : ?> 
    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/list_min.css'); ?>">
    <?php endif;?>

第四步

在index.php的末尾用 <div></div> 包裹住以下代码

<?php if ($this->options->joe_list === 'off') : ?> 
            <?php $this->need('public/aside.php'); ?>
            <?php endif;?>

最后一步

最后，保存上述修改的文件，在后台全局设置里面开启双栏显示，刷新网页即可

结语

此次修改会导致首页右侧博主栏无法显示，如果对此介意，在全局设置中关闭双栏显示即可。
2023-03-22 23:46:56 星期三