Voir et modifier un article en pleine page

Version 5 — Avril 2019 — naema

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 < code>article le fichier article .html et

article_edit.html&lt;/code >  html  dans ce dossier, avec le contenu ci-dessous : 
<cadre>
[(#REM) Chemin: squelettes/prive/squelettes/top/ ]
#CACHE{0} 
# FILTRE{compacte_head} #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-->
</cadre>
Ensuite on crée 2 fichiers pour l'article en pleine page : &lt; code>article-brut   l'un  pour  la  visualisation  et  l'autre  pour  la  modification  de  l'article  dans  le  dossier  squelettes/prive/exec .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).(fichiers à télécharger en pj.ci-dessous)

Le principe de ces fichiers est simplesi vous voulez le faire vous-même .
Pour l’article en visualisation/lecture (article-brut.html) :

recopier à l’identique le fichier < code>article « article .html</code > 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 : )
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. [1]

Par exemple :

<div >
<span style="color:#888;">[[(#INFO_LANG{article,#ENV{id_article}})]]</span> <:article:> <b>N° #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 < code>article_edit article_edit .html</code > 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 < code>ecrire_fr ecrire_fr .php</code > (a 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)',

Retour à la version courante

Voir et modifier un article en pleine page

Toutes les versions