文章进行双栏显示

AI摘要：这篇文章提供了一个教程，教读者如何通过修改functions.php和index.php文件以及添加一个新的css文件来实现文章的双栏显示效果。教程详细说明了每一步的操作，包括添加代码、创建新文件夹和文件，以及在特定位置插入代码。最后，作者提醒用户这种修改可能会导致首页右侧博主栏无法显示，并提供了关闭双栏显示的解决方案。

Powered by Moonshot AI

前言

此次修改需要更改两个文件，另添加一个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 星期三