Difficultés de pagination entre spip3.2.19 et sp4.2.4

Wouarf · Août 12, 2023, 10:19

Passage d’un site en 3.2.19 en local sur Mamp 6.8 et PHP 7.4.33
vers 4.2.4 sur une 2e machine même Mamp 6.8 mais PHP 8.2.0
avec le même code de pagination : #PAGINATION{page_precedent_suivant}
j’obtiens 2 présentations très différentes et codes HTML très différents. J’ai créer un répertoire « modeles » dans « squelettes » du site en 4.2.4 avec les fichiers de paginations de « prive/modeles » de sp3.2.19 sans résultat (cache vidé à chaque essai). Essais de CSS infructueux. J’aimerai récupérer « page précédente », « page suivante »…
CapturSpip3219et424

Le code 3.2.19

page précédente | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9<span

class="tbc"><span
class='sep'> | </span>...<span
class='sep'> | </span></span><a
href='spip.php?page=archives&amp;debut_liste=1240#pagination_liste'
class='lien_pagination'
rel='nofollow'>63</a></span><span
class="next"><span class='sep'> | </span><a href='spip.php?page=archives&amp;debut_liste=20#pagination_liste' class='lien_pagination' rel='next'>page suivante</a></span></div> <!-- fin de .pagine haut -->

En 4.2.4

	<li class="pagination-item prev disabled"><span class="pagination-item-label on" aria-label='Aller &#224; la page pr&#233;c&#233;dente' title='page pr&#233;c&#233;dente'>&lt;</span></li>
	
	

	<li class="pagination-item on active"><span class="pagination-item-label on" aria-label='Aller &#224; la page 1 (Page actuelle)'>1</span></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=20#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 2'>2</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=40#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 3'>3</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=60#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 4'>4</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=80#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 5'>5</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=100#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 6'>6</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=120#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 7'>7</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=140#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 8'>8</a></li>
	<li class="pagination-item"><a href='spip.php?page=archives&amp;debut_liste=160#pagination_liste' class='pagination-item-label lien_pagination' rel='nofollow' aria-label='Aller &#224; la page 9'>9</a></li>
	

	 <li class="pagination-item tbc disabled"><span class="pagination-item-label">…</span></li>
	<li class="pagination-item"><a
	  href="spip.php?page=archives&amp;debut_liste=1240#pagination_liste"
	  class="pagination-item-label lien_pagination" aria-label="Aller &#224; la derni&#232;re page"
	  rel="nofollow">63</a></li>

	
	 
	
	<li class="pagination-item next"><a href='spip.php?page=archives&amp;debut_liste=20#pagination_liste' class='pagination-item-label lien_pagination' rel='next nofollow' aria-label='Aller &#224; la page suivante' title='page suivante'>&gt;</a></li>
	
</ul></div> <!-- fin de .pagine haut -->

Je cherche un coup de pouce pour comprendre et corriger. Merci à vous

RealET · Août 12, 2023, 10:21

Lire la doc ? Le système de pagination - SPIP

RealET · Août 12, 2023, 10:22

Et reprendre les styles présents dans theme.css de SPIP 4.2 spécifiques à la pagination

Wouarf · Août 12, 2023, 10:39

Cette page est encore ouverte mais malgré plusieurs lectures je n’y ai pas trouver d’aide. Je vais retourner dans les modèles et regarder les styles de « theme.css » au lieu de surcharger mon « perso.css » bien que je ne vois pas comment faire réapparaître les textes au lieu des flèches.

Wouarf · Août 12, 2023, 10:49

« theme.css » de ma clean installation de Spip 4.2.4 est identique à Spip 3.x
/* --------------------------------------------------------------

theme.css
Theme par defaut de SPIP 3.3
collectif SPIP

-------------------------------------------------------------- */

RealET · Août 12, 2023, 10:55

Wouarf · Août 12, 2023, 11:02

C’est le code que j’utilise comme indiqué dans mon premier message. J’obtiens bien le même alignement horizontal en 3.2.19 mais vertical en 4.2.4 avec le texte remplacé par des quotes < >. J’ai essayé toutes les versions de filtres : toujours vertical en 4.2.4…

RealET · Août 12, 2023, 11:05

Pour le vertical : dist/theme.css at master - dist - SPIP on GIT :

/* Pagination */
.pagination .pagination-items {list-style: none;display: flex;flex-wrap: wrap; flex-direction: row; justify-content: center}
.pagination .pagination-item {  margin: 0em; flex-basis: 7.5%; display: flex;align-items: center;}
.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
.pagination .pagination-item + .pagination-item {  margin-left: 0.5em }
.pagination .pagination-item-label { display:block; flex-basis: 100%; background: #f0f0f0; text-decoration: none; padding:.5em; border-radius:.25em; text-align: center;}
.pagination .on .pagination-item-label,
.pagination a.pagination-item-label:hover,
.pagination a.pagination-item-label:focus,
.pagination a.pagination-item-label:active { background: var(--dist-color-accent-hard); color: #fff; }
.pagination .on .pagination-item-label {font-weight: bold;}
.pagination .pagination_precedent_suivant .disabled {visibility: hidden}
.pagination .pagination-item.disabled {}
.pagination .pagination-item.disabled .pagination-item-label {color:#888; font-weight: normal;}
.menu_articles .pagination strong {font-size:1em;}

Wouarf · Août 12, 2023, 11:15

.pagination a.pagination-item-label:active { background: #c41558; color: #fff; }

Seule ligne différente entre la dist que j’ai installée et le CSS cité. Je tente mais je doute que cette différence sur couleur de fond puisse faire qlq chose.

Wouarf · Août 12, 2023, 11:21

#PAGINATION{page_precedent_suivant}
#PAGINATION{precedent_suivant}
#PAGINATION{page}

Mêmes passages à la ligne de chaque item de la liste qlq soit la balise et son filtre…

Wouarf · Août 12, 2023, 11:35

Dans le code HTML en 4.2.4 la pagination est faite avec une liste

Wouarf · Août 12, 2023, 11:43

Dans le code HTML en 4.2.4 la pagination est faite avec une liste <ul><li>
<ul class=« pagination-items pagination_page_precedent_suivant »>
et je ne trouve nul part la classe CSS « pagination_page_precedent_suivant ».

Dans le code HTML en 3.2.19 pas de liste mais du texte différencié par des <span class>

Luc_Mamin · Août 12, 2023, 12:11

Bonjour,
Juste pour le « vertical ».
Depuis Spip 4, il faut changer la balise englobante :
SPIP 4.0 - SPIP.

Wouarf · Août 13, 2023, 11:32

Merci pour ce conseil. J’ai corrigé la syntaxe. La variante avec « page précédente » et « page suivante » semble ne plus exister (c’est tout au moins ce que j’ai compris de l’article indiqué), malheureusement ça ne règle pas l’alignement vertical des items au lieu d’horizontal. A suivre…

iaka · Août 13, 2023, 12:27

La balise englobante doit désormais être <nav class="pagination">.

Jusqu’à SPIP 3.2, on écrivait par exemple :

[<p class='pagination'>(#PAGINATION)</p>]

Avec SPIP 4.0, il faut maintenant utiliser :

[<nav class='pagination' role='navigation'>(#PAGINATION)</nav>]

Il n’existe plus qu’un seul modèle de pagination. De ce fait, les différences de rendu de la pagination se font en lui passant des arguments.

Wouarf · Août 13, 2023, 12:40

Mon code
[<nav class="pagination paginhaut" role="pagination">(#PAGINATION{type_pagination=page_precedent_suivant})</nav>]

Wouarf · Août 13, 2023, 2:24

RESOLU La nouvelle syntaxe de pagination fonctionne suivant la nouvelle présentation de Spip 4. Le cache navigateur ne m’a pas aidé dans cette affaire.

Merci pour votre soutient et vos conseils.