Ajout d'un mode sombre

Un nouveau mode sombre a fait son apparition sur le blog et est utilisable via le switch en haut à droite (PC) ou en entre le titre et la navbar (téléphone).

Les modifications ont été poussées sur Github et sont directement utilisables.

Il y a quelques petites améliorations à prévoir encore. Mais c'est fonctionnel et, je l'espère, lisible.

J'ai publié mon thème Bludit

J'ai publié mon thème Bludit

J'utilise le thème Andy que j'ai amélioré pour mes besoins personnels

On retrouve notamment par rapport à l'original :

  • Une meilleure pagination (présentée ici : https://blog.nibel.fr/une-pagination-custom-sur-bludit)
  • Un chargement des CSS et JS amélioré avec un chargement asynchrone
  • Une amélioration des respects des standards W3C même si c'est encore loin d'être parfait
  • Affichage étendu jusqu'aux écrans 4K
  • Quelques traductions françaises en dur
  • Quelques fix de CSS

Je prévois encore quelques petites améliorations au fil du temps. J'aimerai notamment être totalement respectueux des standards W3C, on verra si c'est possible. En l'état c'est utilisable et ça fonctionne aussi bien sous Chrome que Firefox.

Soyez libre de l'utiliser, l'améliorer, le modifier, le partager à votre convenance :

https://github.com/perru/andy-enhanced/releases

Une pagination custom sur Bludit

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 :

Screenshot pagination exemple

Activer / Désactiver rapidement la vue TinyMCE dans l'admin Bludit

Activer / Désactiver rapidement la vue TinyMCE dans l'admin Bludit

Petit script à placer dans Plugins --> Code HTML --> Paramètres --> Admin Area --> Header :

<script>
    /// Fires when an editor is added to the EditorManager collection.
    tinymce.on('addeditor', function( event ) {
        $("<button id=\"switch-tinymce\" class=\"btn btn-sm btn-success\" type=\"button\" onclick=\"tinymce.execCommand('mceToggleEditor',false,'jseditor'); $('#switch-tinymce').toggleClass('btn-success btn-danger');\">ON/OFF</button>").insertAfter("#jsbuttonPreview"); 
        $("#switch-tinymce").before(" ").append(" ");
    }, true );
</script>

Le script est un peu dégueu mais le rendu est largement acceptable :

Screenshot 1 - ON

Screenshot 2 - OFF