joe主题之前是点击加载方式加载文章，我在网上看到教程，跟着教程走实现了分页加载功能！

听歌：

分页切换演示图：

修改到的文件

• index.php
• functions.php
• joe.index.min.js

需要添加的php文件

• pagination.php

在/usr/themes/Joe/public文件夹下创建一个 pagination.php 的文件，粘贴下面代码到新建的文件里面：

<?php if ($this->options->JPageStatus === 'default') : ?>
    <?php 
        $this->pageNav(
            '<svg class="icon icon-prev" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z"/><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312.512zm-564.224-63.488c0-3.584 0-7.68.512-11.264h-.512v-714.24h.512c-.512-3.584-.512-7.168-.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-.512 11.264h.512v714.24h-.512c.512 3.584.512 7.168.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"/></svg>',
            '<svg class="icon icon-next" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z"/><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312.512zm-564.224-63.488c0-3.584 0-7.68.512-11.264h-.512v-714.24h.512c-.512-3.584-.512-7.168-.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-.512 11.264h.512v714.24h-.512c.512 3.584.512 7.168.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"/></svg>',
            1,
            '...',
            array(
                'wrapTag' => 'ul',
                'wrapClass' => 'joe_pagination',
                'itemTag' => 'li',
                'textTag' => 'a',
                'currentClass' => 'active',
                'prevClass' => 'prev',
                'nextClass' => 'next'
            )
        );
    ?>
<?php else : ?>
    <div class="j-joe_load" data-type="article">
        <div class="joe_load">查看更多</div>
    </div>
<?php endif ?>

修改index.php

如上图所示，添加代码到相应位置：
文件地址：/usr/themes/Joe/index.php

 <!--分页功能-->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
        window.Joe.PAGE_INDEX = '<?php echo $this->_currentPage; ?>' || 1;
    });
</script>

继续添加代码到相应位置：
文件地址：/usr/themes/Joe/index.php

        <!--分页功能2-->
        <?php $this->need('public/pagination.php'); ?>
        <!--<div class="joe_load">查看更多</div>-->

修改functions.php

文件地址：/usr/themes/Joe/functions.php
将代码粘贴到相应位置：如下图所示

// 分页
$JPageStatus = new Typecho_Widget_Helper_Form_Element_Select(
    'JPageStatus',
    array('default' => '按钮切换形式（默认）', 'ajax' => '点击加载形式'),
    'default',
    '选择首页的分页形式',
    '介绍：选择一款您所喜欢的分页形式'
);

$JPageStatus->setAttribute('class', 'joe_content joe_other');
$form->addInput($JPageStatus->multiMode());
// 分页结束

修改joe.index.min.js

文件地址：/usr/themes/Joe/assets/js/joe.index.min.js

将代码替换到上图的相应位置：

window.Joe.PAGE_INDEX,

就是将1改为上述代码而已，仔细观察就找到了，有cdn缓存的话改完之后记得去刷新预热一下啊！

总结

本站使用的程序是：typecho1.2.1，主题是joe7.7.1，修改和添加完相应代码即可在后台启用分页功能，快去试试吧