Blog de Nibel

Une pagination custom sur Bludit

La pagination par défaut de Bludit n'est pas terrible. Voici comment l'améliorer.

Dans son thème, remplacer la partie pagination par : (ex pour moi : bl-themes/andy/php/home.php) :

<!-- Pagination -->
<?php if (Paginator::numberOfPages()>1): ?>
<div class="paginator-label">
    Pages : 
</div>

<nav class="paginator">
<?php 
    if(!isset($_GET['page'])){
        $getPage = 1;
    } else {
        $getPage = $_GET['page'];
    } 
?>
    <ul class="list-group flex-md-row">

        <!-- Previous button -->
        <?php if (Paginator::showPrev()): ?>
        <li class="list-group-item">
          <a class="btn" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><< 
            <?php echo $L->get('Previous'); ?></a>
        </li>
        <?php endif; ?>

        <?php if ($getPage >= 4) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>">Début</a>
        </li>
        <li>...&nbsp;</li>
        <?php } ?>

        <?php if ($getPage >= 3) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage - 2; ?>"><?php echo $getPage - 2; ?></a>
        </li>
        <?php } ?>

        <?php if ($getPage >= 2) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage - 1; ?>"><?php echo $getPage - 1; ?></a>
        </li>
        <?php } ?>

        <?php if ($getPage) { ?>
        <li class="list-group-item">
            <a class="btn btn-selected" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage; ?>"><?php echo $getPage; ?></a>
        </li>
        <?php } ?>

        <?php if (Paginator::numberOfPages()-1 >= $getPage) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage + 1; ?>"><?php echo $getPage + 1; ?></a>
        </li>
        <?php } ?>

        <?php if (Paginator::numberOfPages()-2 >= $getPage) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>?page=<?php echo $getPage + 2; ?>"><?php echo $getPage + 2; ?></a>
        </li>
        <?php } ?>

        <?php if (Paginator::numberOfPages()-3 >= $getPage) { ?>
        <li>...&nbsp;</li>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH).'?page='.Paginator::numberOfPages(); ?>">Fin</a>
        </li>
        <?php } ?>

        <!-- Next button -->
        <?php if (Paginator::showNext()): ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?> >> </a>
        </li>
        <?php endif; ?> 

  </ul>
</nav>
<?php endif ?>

Et ajouter le CSS :

.btn {
    padding: 2px 10px 0 10px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 3px;
    font-size: 17px;
    }

.btn-selected,
.btn:hover {
    color: #fff !important;
    background-color: #036BAA;
    font-weight:600;
}

.paginator-label {
  float: left;
}

Ce qui offre ce rendu :