Carnet Wiki

Voir et modifier un article en pleine page

Cette petite contrib’ vise à améliorer l’ergonomie de l’affichage des articles (en lecture et en modification) sans ajout de plugin ni surcharge de fichier de la dist.

Au fur et à mesure de la création et du développement de son site, on se retrouve avec plusieurs dizaines de plugins qui implémentent chacun (ou presque) une zone de formulaire supplémentaire dans la page d’un article - la page devient rapidement très chargée voire saturée, et on finit par avoir du mal à accéder au cœur de l’article, c’est-à-dire le texte ! Et même si on installe un plugin pour agrandir la largeur de page, cela ne suffit pas toujours.

Pour y remédier, on profite du fait que la « dist » ne fournit pas de fichier pour la zone « top » de l’article. On va donc créer une zone « top » et simplement y mettre deux onglets, l’un ne faisant rien, l’autre dirigeant vers un modèle d’article en pleine page. Ainsi, on garde toujours l’aspect natif (« dist ») et on pourra modifier son modèle de page « pleine page » comme on le souhaite par la suite.

Créer donc le dossier : squelettes/prive/squelettes/top s’il n’existe pas. Créer les fichiers article.html et article_edit.html dans ce dossier, avec le contenu ci-dessous :

[(#REM) Chemin: squelettes/prive/squelettes/top/ ]
#CACHE{0}
#FILTRE{compacte_head}
<!--#top-->

<div style="margin-left:auto;">
<div class="onglets_simple clearfix">
	<ul>
		<li>[(#SELF|parametre_url{display,''}|lien_ou_expose{<:pleinepage:info_afficher_article_complet:>,[(#ENV{display,''}|non)],ajax})]</li>
		<li>[(#URL_ECRIRE{article-brut}|parametre_url{id_article,#ENV{id_article}}|lien_ou_expose{<:pleinepage:info_afficher_article_texte:>,#ENV{article-brut},env ajax,<:pleinepage:pleine_page:>})]</li>
	</ul>
</div>
</div>
[(#ENV{article-brut}|oui) <INCLURE{fond=squelettes/prive/exec/article-brut, id_article=#ENV{id_article},env ajax preload}{self=#SELF} /> ]

<!--/#top-->

Ensuite on crée 2 fichiers pour l’article en pleine page : article-brut.html pour la visualisation et article-brut_edit.html pour la modification de l’article, dans le dossier squelettes/prive/exec. (le créer s’il n’existe pas).

Le principe de ces fichiers est simple.
Pour l’article en visualisation/lecture (article-brut.html) :

  • recopier à l’identique le fichier article.html de la « dist »
  • supprimer : 1) toutes les balises de formulaires (qui commencent par #FORMULAIRE_) et 2) la balise indicateur « affiche_milieu » (toute la balise : <!--affiche_milieu-->)
  • modifier les icônes de lien vers l’article : lien vers l’article en modification (en changeant l’adresse du lien par : article-brut_edit) et lien vers l’article en lecture (en changeant l’adresse du lien par : article-brut)
  • ajouter (éventuellement) une « hiérarchie » en haut de la page pour identifier le n° de l’article, le statut, la rubrique ; éventuellement les objets liés (nombre d’auteurs, nombre de mots-clés, etc.) ; éventuellement si l’article dispose ou non d’un logo.

Par exemple :

<div >
<span style="color:#888;">[[(#INFO_LANG{article,#ENV{id_article}})]]</span> <:article:>&nbsp;<b>N°&nbsp;#INFO_ID_ARTICLE{article,#ENV{id_article}}</b> |[ (#INFO_STATUT{article,#ENV{id_article}}|puce_statut{article,#ENV{id_article}}) ]| <:titre_cadre_rubrique|majuscules:> <a href="#URL_ECRIRE{rubrique,id_rubrique=#INFO_ID_RUBRIQUE{article,#ENV{id_article}}}">#INFO_TITRE{rubrique,#INFO_ID_RUBRIQUE{article,#ENV{id_article}}}[<small> (n°(#INFO_ID_RUBRIQUE{article,#ENV{id_article}}))</small></a>]
</div>
[(#REM) Toute la suite peut etre supprimee dans le fichier article-brut_edit pour alleger la presentation ]
<p style="font-size:85%;">[(#VAL{auteurs}|lister_objets_lies{article,#ENV{id_article},''}|count|singulier_ou_pluriel{info_1_auteur,info_nb_auteurs}).][ (#VAL{mots}|lister_objets_lies{article,#ENV{id_article},''}|count|singulier_ou_pluriel{info_1_mot_cle,info_nb_mots_cles}).][(#VAL{articles_lie}|lister_objets_lies{article,#ENV{id_article},''}|count|singulier_ou_pluriel{info_1_article_lie,info_nb_articles_lies}).][(#VAL{document}|lister_objets_lies{article,#ENV{id_article},''}|count|singulier_ou_pluriel{info_1_document,info_nb_documents}).]
[(#REM) Partie optionnelle : à supprimer si on n'utilise pas le plugin A2A Lier des articles ]
<BOUCLE_types_liaisons(DATA){source tableau, #TYPES_LIAISONS}>
<B_lies>
[(#CLE|a2a_traduire_type_liaisons)]
<BOUCLE_lies(ARTICLES_LIES){id_article?}{par rang}{type_liaison=#CLE}>
[((#VAL{articles_lie}|table_objet_sql|sql_countsel{id_article=#ID_ARTICLE}|singulier_ou_pluriel{info_1_article_lie,info_nb_articles_lies})).]
</BOUCLE_l>
</BOUCLE_lies>
</B_lies>
</BOUCLE_types_liaisons>
[(#REM) -- Fin de la partie optionnelle pour le plugin A2A]
[<br><i>(#LOGO_ARTICLE{#ENV{id_article}}|?{<:article_avec_logo:>,<:article_sans_logo:>})</i>]</p>

Pour l’article en modification (article-brut_edit.html) :

  • recopier la hiérarchie faite précédemment pour l’article en lecture (en l’allégeant si besoin)
  • ajouter le lien vers la totalité du fichier article_edit.html de la « dist » avec ce code :
    <INCLURE{fond=prive/squelettes/contenu/article_edit,env,ajax preload} />

Ne pas oublier de compléter le fichier de langue ecrire_fr.php (a minima) avec les nouveaux items de titre (ci-dessous, pour le fichier en français et en anglais).

Et c’est tout. Vous pouvez travailler confortablement, lire et modifier l’article en profitant de toute la largeur de votre espace privé SPIP.

N’hésitez pas à signaler toute coquille dans les fichiers si vous en voyez.
Evidemment, on peut aussi faire un simple bouton de lien vers l’affichage pleine page, au lieu de créer des onglets.

Les chaînes de langue à copier dans les fichiers adéquats du dossier squelettes/lang :

  • dans le fichier ecrire_fr.php :
    'article_avec_logo' => 'article avec logo', 
    'article_sans_logo' => 'article sans logo',
    'info_afficher_article_complet' => 'Article complet', 
    'info_afficher_article_texte' => 'Texte seul (pleine page)',
  • dans le fichier ecrire_en.php :
    'article_avec_logo' => 'article with logo', 
    'article_sans_logo' => 'article without logo', 
    'info_afficher_article_complet' => 'Full article', 
    'info_afficher_article_texte' => 'Text-only (full-page)',
naema - Mise à jour :10 avril 2019 à 13h25min