IT博客汇 | Joe主题添加按钮分页功能

Joe主题添加按钮分页功能

JayHrn发表于 2023-12-19 09:35:28

本文实现的是在Joe主题中引入分页的功能，由于Joe主题原配的是加载更多来进行分页的，这样子我感觉体验不是很好，所以就找到了教程关于如何实现按钮分页。具体效果欢迎查看我的站点。

开始

首先需要引入JS，在public/config.php文件中的第一个script标签里面加入如下内容

1
2
3

document.addEventListener('DOMContentLoaded', () => {
        window.Joe.PAGE_INDEX = '<?php echo $this->_currentPage; ?>' || 1;
    });

最终呈现的是如下内容

<script>
    document.addEventListener('DOMContentLoaded', () => {
        window.Joe.PAGE_INDEX = '<?php echo $this->_currentPage; ?>' || 1;
    });
    localStorage.getItem("data-night") && document.querySelector("html").setAttribute("data-night", "night");
    window.Joe = {
        THEME_URL: `<?php Helper::options()->themeUrl() ?>`,
        BASE_API: `<?php echo $this->options->rewrite == 0 ? Helper::options()->rootUrl . '/index.php/joe/api' : Helper::options()->rootUrl . '/joe/api' ?>`,
        DYNAMIC_BACKGROUND: `<?php $this->options->JDynamic_Background() ?>`,
        WALLPAPER_BACKGROUND_PC: `<?php $this->options->JWallpaper_Background_PC() ?>`,
        IS_MOBILE: /windows phone|iphone|android/gi.test(window.navigator.userAgent),
        BAIDU_PUSH: <?php echo $this->options->JBaiduToken ? 'true' : 'false' ?>,
        DOCUMENT_TITLE: `<?php $this->options->JDocumentTitle() ?>`,
        LAZY_LOAD: `<?php _getLazyload() ?>`,
        BIRTHDAY: `<?php $this->options->JBirthDay() ?>`,
        MOTTO: `<?php _getAsideAuthorMotto() ?>`,
        PAGE_SIZE: `<?php $this->parameter->pageSize() ?>`
    }
</script>

修改分页按钮

在主题文件下面的index.php中将原本的<div class="joe_load">查看更多</div>t替换成如下内容

<?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 ?>

后台添加分页功能

在主题文件下面的functions.php文件中添加如下内容，添加位置随意，可以参考原来的文件添加开启各个功能的部分。

$JPageStatus = new Typecho_Widget_Helper_Form_Element_Select(
    'JPageStatus',
    array(
        'ajax' => '加载更多（默认）',
        'default' => '按钮分页',
    ),
    'default',
    '首页文章分页形式',
    '介绍：选择一款您所喜欢的分页形式'
);
$JPageStatus->setAttribute('class', 'joe_content joe_index'); // 如果无法显示设置，将joe_custom替换为joe_other
$form->addInput($JPageStatus->multiMode());

修改JS实现不同分页

修改assets/js/joe.index.js和assets/js/joe.index.min.js文件中的内容，不过主题启用的是joe.index.min.js文件，也可以只修改joe.index.min.js文件。

打开文件全局搜索page:，然后可以看到有三个被发现，修改page: 1的内容，将1修改成如下内容

1	window.Joe.PAGE_INDEX

这样子就可以实现两种分页效果啦，快去尝试下吧！