『转载』『教程』Joe主题新增首页文章分页功能

前言

转自执念博客，仅做备份！

对于Joe主题无法实现分页按钮分页设计可能有很多人无法接受，本教程将实现首页分页按钮可实现分页功能

成品效果

{tabs}
{tabs-pane label="前台"}

{/tabs-pane}
{tabs-pane label="后台"}

{/tabs-pane}
{/tabs}

修改教程

一、修改 index.php 文件

修改 index.php ，文件路径： usr/themes/Joe

1、第一部分：

添加以下代码：

{tabs}
{tabs-pane label="代码"}

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

{/tabs-pane}
{tabs-pane label="添加位置"}

{/tabs-pane}
{/tabs}

2、第二部分：

替换以下代码，或者添加后注释掉原来的代码

{tabs}
{tabs-pane label="代码"}

{hide}

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

{/hide}

{/tabs-pane}
{tabs-pane label="添加位置"}

{/tabs-pane}
{/tabs}

二、修改 functions.php 文件

直接在 functions.php 最后添加以下代码

如有 Joe/public/custom.php 也可以加在这个文件里

{tabs}
{tabs-pane label="代码"}

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

{/tabs-pane}
{tabs-pane label="添加位置"}

{/tabs-pane}
{/tabs}

三、修改joe.index.min.js文件

修改 Joe/assets/js/joe.index.min.js

{tabs}
{tabs-pane label="代码"}

截图中的两部分将数字 1 改为以下代码

window.Joe.PAGE_INDEX

{/tabs-pane}
{tabs-pane label="修改位置"}

{/tabs-pane}
{/tabs}

结束

教程结束，快去后台开启刷新看看效果吧！