[Typecho]joe主题添加分页功能

宗同学
2025-03-01 / 0 评论 / 243 阅读 / 本文纯文字:203 字
温馨提示:
本文最后更新于2026年03月22日,已超过211天未更新,内容或图片可能失效。

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

m7q5dehw.png


听歌:


分页切换演示图:
m7q33oob.png

修改到的文件 表情

  • 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 t="1774180365449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13001" width="32" height="32"><path d="M686.186667 85.333333c-21.034667 0-42.389333 7.594667-58.432 23.317334L279.210667 450.56c-17.088 16.789333-24.234667 39.36-23.104 61.333333-1.130667 21.973333 5.994667 44.522667 23.104 61.290667l348.544 341.909333a83.285333 83.285333 0 0 0 116.181333 0 79.488 79.488 0 0 0 0-113.962666L449.066667 511.872l294.869333-289.258667a79.488 79.488 0 0 0 0-113.962666A81.642667 81.642667 0 0 0 686.186667 85.333333z" fill="#47A1EE" p-id="13002"></path></svg>',
            '<svg t="1774180345706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12847" width="32" height="32"><path d="M337.813333 938.666667c21.034667 0 42.389333-7.594667 58.432-23.317334L744.789333 573.44c17.109333-16.789333 24.234667-39.36 23.104-61.333333 1.130667-21.973333-5.994667-44.522667-23.104-61.290667L396.245333 108.906667a83.285333 83.285333 0 0 0-116.181333 0 79.488 79.488 0 0 0 0 113.962666L574.933333 512.128 280.064 801.408a79.488 79.488 0 0 0 0 113.962667A81.642667 81.642667 0 0 0 337.813333 938.666667z" fill="#47A1EE" p-id="12848"></path></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

m7q3g8en.png

如上图所示,添加代码到相应位置:
文件地址:/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>-->

m7q46nd1.png


修改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());
// 分页结束


如下图所示:

m7q51r31.png


m7q3j8wa.png


修改joe.index.min.js

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

m7q4m1lo.png

m7q4oc13.png


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

window.Joe.PAGE_INDEX,

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


总结 表情

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

11

评论

博主关闭了所有页面的评论