Collectif Jean de Neyman
La Résistance en mémoire

Site de recherches sur la vie de Jean de Neyman, Résistant, fusillé le 2 septembre 1944 à Saint-Nazaire (Heinlex) en Loire-Inférieure (Loire-Atlantique aujourd’hui) - France.

Webmestre

Les trucs et bidules informatiques qui ont aménagé ce squelette et vous a rendu la lecture plus aisée.

Article mis en ligne le 5 octobre 2023
dernière modification le 9 juin 2025

par Patrice

Avant tout nous voulons remercier les équipes de "SPIP", qui est le gestionnaire de contenus (C.M.S.) utilisé pour ce site. Il est entièrement gratuit contrairement à d’autres qui font payer des versions ou aides. Certes il est moins répandu que d’autres mais il tient la route [1] !
Et puis il y a l’habillage, appelé aussi "squelette" dans le jargon. Ici c’est "Escal" , développé par l’Académie de Lyon. Il est simple, fonctionnel et beau. Il répond à nos attente. De plus la réactivité de la personne est exceptionnelle (merci !). Mais il n’y a pas que l’habillage qui compte !
Le Collectif, via son site, s’est inscrit dans le travail collaboratif de l’association SpipFactory, dont il est adhérent.
Nous essayons au maximum de rendre ce site accessible, c’est à dire pour que les malvoyants, aveugles et handicapés puissent y accéder. Si vous remarquez des erreurs, à ce propos, et que nous sommes en mesure de les corriger, nous le ferons. Pour cela nous nous faisons aider par l’association ACIAH qui travaille bénévolement dans ce sens.
Tous ces petits trucs si çà peut aider quelqu’un pour son site, on reste dans l’esprit de partage.

Vous trouverez ci-après tous le p’tits trucs qui ont aménagé ce squelette. Si çà peut vous aider pour vos sites !...


Accès restreint

Le plugin Accès restreint est installé en "natif" avec le squelette Escal.
Sur ce site il est utilisé pour permettre de mettre des documents à disposition suivant des "Zones" réservées. Ces zones sont crées, par exemple, pour mettre des comptes-rendus de réunions, voire des propositions d’articles. Chaque personne déclarée "visiteur" peut y accéder avec des zones déclarées qui lui sont attribuées.

Créer une zone

  1. Faire une rubrique spécifique (ici c’est dans la rubrique "Espace réservé") et au moins un article.
  2. Sur la barre des menus, toujours en espace privé, aller dans Publication / Accès Restreint et Créer une nouvelle Zone.
  3. Cocher la case "Restreindre l’accès à cette zone dans la partie publique" (pour l’instant, il n’y a pas lieu à ce que des personnes accèdent à l’espace privé ; trop dangereux...).
  4. Cocher la rubrique concernée, qui vient d’être créée (avertissement : attention que cette rubrique ne soit pas cochée dans une autre zone !).

Déclarer

  1. Aller sur la fiche du Visiteur (ou autre...) qui est concerné par cet espace et ajouter (Édition / Auteurs).
  2. Ajouter une zone (ou plusieurs...). Note : c’est ici que vous déclarez les zones auxquelles le Visiteur à droit !

Identification
Déclarer le bloc qui est dans le squelette d’Escal. Ici il est dans la colonne de droite.


Un onglet spécifique a été créer en page d’accueil : Espace réservé.

Documentation
Escal


Alerte d’urgence

Le plugin Message d’urgence est très sympathique. Il permet de faire des annonces aux visiteuses et visiteurs. Il est paramétrable, dans la partie plugins. L’on peut mettre l’annonce que l’on désire (pas forcément catastrophique !), visible en haut de chaque article, que de la page d’accueil ou dans le texte.
Note : pour l’insertion dans le texte, utiliser la balise à l’endroit où vous voulez mettre votre message :<!-- inserer_alerte_urgence -->
Seuls les administratrices et administrateurs peuvent le mettre en activité.


Annonces défilantes

  • Celle défilante, en bandeau, au dessus des articles

L’habillage a été modifié dans squelettes/styles/perso.css

/* RÉGLAGES ANNONCE DÉFILANTE */
.annoncedefil img {
background-color: #82ADE2;
color: #731515;
margin-bottom: 2px;
margin-left: 0px;
max-width: 10%;
}
.une-annonce-defilante, .spip_surligne{
background-color: #82ADE2;
color: #ffffff;
}
.annoncedefil{
background-color: #82ADE2;
color: #731515;
}
.annonce-titre{
margin-bottom: 2px;
margin-left: 0px;
}
  • Celle défilante dans le texte

Source : WikiHow et pour la couleur : HTML color codes->https://htmlcolorcodes.com/fr/tutoriels/couleur-de-texte-html/].
Exemple sur ce site "Septembre 2024 - 80e anniversaire de son exécution - Programme "Changement de lieu".

Changement de lieu
<center><marquee width="200" scrollamount="200" scrolldelay="2000" loop="5" style="color:red">{{Changement de lieu}}</marquee></center>

Paramétrage (remplacer les apostrophes par des guillemets (") :

  • <marquee>Mon texte défilant...("Changement de lieu")
  • width='200' la largeur de l’annonce
  • scrollamount='200' donner la même valeur que la largeur
  • scrolldelay='2000' vitesse du défilement
  • loop='5' nombre de fois que cela doit s’afficher*
  • style='color:red' couleur du texte (ici - red - en rouge)

Blocs dépliables

Outil du plugin Des blocs dépliables activé sur ce site.

Pour harmoniser graphiquement des lignes au-dessus et en dessous éventuelles, une commande Html a été crée (remplacer les apostrophes par des guillemets (") :

<p class="retrait2">
Mon texte
</p>

Elle dépend du CSS dans le fichier perso.css :

.retrait2 {
    background: url(../images/right.svg) no-repeat scroll left center transparent;
    padding-left: 25px;
    background-size: 16px;
    clear: left;
    cursor: pointer;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 25px;
    margin-top: 4px;
    padding: 0 0 0 20px;
    font-size: 1.1em;
    letter-spacing: 0.8px;
    margin-left: 45px;
}

À noter  :

  • Conflit observé entre les plugins "Blocs dépliables" et "Sommaire automatique". En cas d’utilisation de Sommaire automatique, il faut rester sur un seul niveau de celui-ci, sinon le second bloc perd son style CSS :
    • soit on choisis "1 niveau" pour la profondeur dans la config du plugin (mais ce sera valable pour tous les articles),
    • soit on rajoute <Asommaire|niveau_max=1>(enlever le "A") au début de ton article pour limiter la profondeur à cet unique article (solution préconisée sur ce site).
  • Harmoniser les interlignes avec ceux du pluging "Blocs dépliables" : la valeur de la commande margin-bottom: 0.1em; était à "0.1em". Elle a été portée à "25px ;" pour avoir le même interligne.

Merci encore à Escal pour ce travail.


Coloration code

Plugin Coloration code pour mettre des couleurs dans le code (ou cadre).
Il est paramétrable.

Exemples sur cette page.

Balise :  class="lan­gage">Mon code

Note : Le plugin Coloration du code ne fonctionne pas avec le plugin Manuel de rédaction.


Charte graphique

Les couleurs sont celles d’origine à Escal :
Bleu foncé : #336699
Bleu : #82ADE2
Bleu clair : #DAE6F6


Cookies

Pour se conformer à législation, le plugin Tarteaucitron a été installé. On peut le paramétrer pour aménager le popup qui s’ouvre à l’ouverture du site.


Édito trop long

Dans le cartouche, l’édito apparait entier, donc si c’est un long texte, cela fait descendre le cartouche très bas. La solution est fournie sur l’article d’Escal (dans les commentaires en bas de page). Je l’ai appliqué à ce site.

Le nouveau fichier a été placé dans squelettes/inclusions/inc-edito.html


Encadrés

Utiliser le plugin Cibloc qui possède un bouton spécial en mode écriture.

Il fait partie des plugins installés d’office.

Escal

  • Mises à jour
    • On peut consulter ce qui est mis à jour sur les nouvelles versions de ce squelette.

Facteur

La "Page contact" ne fonctionnant pas, il a fallu installer le plugin Facteur.

Le message : Erreur : à cause d’un problème technique, l’email ne peut pas être envoyé.
Certains hébergeurs désactivent l’envoi automatique de mails depuis leurs serveurs (c’est le cas d’O.V.H. chez qui ce site était hébergé auparavant). Dans ce cas, la page contact ne fonctionne pas.


Fil d’Ariane

Mon problème était que je ne visualisais pas le Fil d’Ariane dans le squelette proposé par Escal...
En fait il manquait des petites flèches entre chaque bloc (à mon avis...).

La solution proposée (et qui fonctionne !)

  • Copier les fichiers /plugins/auto/escal/inclusions/inc-hierarchie_art.html et /plugins/auto/escal/inclusions/inc-hierarchie_rub.html [2] dans le dossier /squelettes/inclusions
  • dans ces 2 fichiers, rajouter cette ligne
    <img src="#CHEMIN{images/fleche_droite.svg}" alt="<:escal:fleche:>" />

    juste avant la ligne commençant par

    <a href="...
  • rajouter dans ton fichier squelettes/styles/perso.css le code suivant
    .ariane img {
      height: 10px;
      width: 15px;
    }
  • Ajouter le fichier de l’image de la flèche dans squelettes/images [3].

Frise chronologique

Il nous a semblé que la confrontation des dates était important. Pour ce faire, nous avons opté pour un générateur de frise chronologique gratuit dans sa version"primaire" (Get premium).
L’application TIMEGRAPHICS est de plus possible en français. Elle est simple d’utilisation.
Pour la mettre en ligne, cela se fait par intégration d’une "Iframe" (bouton "</> intégrer dans le site web").
Vous pouvez trouver en ligne un tutoriel fait par l’académie de Versailles.
Note : Au bout "d’un certain temps", l’application demande que l’on paye, car on aurait atteint la limite... Fermer et rouvrir et cela semble en ajouter !


Galerie d’images

Nous nous efforçons de rendre le site le plus fluide et agréable possible. Pour les images, nous avons fait le choix du plugin Galleria.
À mettre à l’endroit où vous désirez la galerie (XX étant le n+de l’article où la transcription est faite et |lightbox=true pour afficher dans une autre"boîte" la photo en grand)

<galleriaXX|lightbox=true>
<small><u>Note :</u> {Le} "{{i}}" {bleu en haut et à gauche qui apparaît sur certaines images vous donne une information sur le document présenté.}</small>
<br>

Image en page d’accueil

Elles ne sont pas toujours sages...
En page d’Accueil l’image affichée sera prise "au hasard" (je ne connais pas le choix d’Escal ou SPIP !).
Pour être sûr du choix de l’image de l’article qui sera affiché en page d’Accueil, il faut numéroter le titre de celle-ci ; mettre un chiffre + un point + une espace et son titre.
Par exemple :


Image en début d’article

S’il y a un Sommaire (du plugin Sommaire automatique) et que l’image se trouve en début d’article, elle sera décalée vers la gauche si elle est demandée centrée. C’est normal, car elle est centrée entre le bord du cadre de l’article et le sommaire déroulant. Ce dernier est en position fixe à droite et l’habillage se fait autour.
Le problème est que la légende, dessous, ne suivra pas l’image, mais tiendra compte du sommaire ! Elle sera centrée par rapport au côtés gauche et droit de l’article, donc décalée par rapport à l’image...
Pour l’instant la seule solution est d’utiliser la balise Html de passage à la ligne <br>. Exemple :

<html><br><br><br><br><br></html>
<doc218|center>


Notes : il faut mettre autant de <br> qu’il est nécessaire pour passer sous le Sommaire. Bien sûr, si le Sommaire est grand, la question ne se pose pas...
La balise Html peut être remplacé par la tilde " " dans Spip :

~
~
~
~
~
<doc218|center>

Images les unes à côté des autres

Avec SPIP 3 si vous codiez <docXX><docYY><docZZ> les images se mettaient les unes à côté des autres. Avec SPIP 4, elles se mettent les unes en dessous des autres !

Toujours avec la super aide du forum d’Escal (squelette de ce site), il faut ajouter dans son squelettes/styles.perso.css :

.spip_document_left, .spip_doc_inner {
        margin: 1px 2px 0 0;
}

Tous les documents comportant le paramètre "left" seront alignés à côté du texte.
...mon texte <docXXXX|left> mon texte...
"XXXX" étant le numéro de votre document.

Exemple avec l’article sur la liste des biographies sur ce site. Les flèches pour remonter en haut de page sont juxtaposées à coté des lettres.

Pour les Escaliens une adaptation a été faite avec un codage propriétaire :

...mon texte <docXXXX|inline> mon texte...
"XXXX" étant le numéro de votre document (inutile de mettre "doc" devant le numéro).

Les images seront intégrées à un texte ou qui se suivront les unes à côté des aitres.


Images trop lourdes

Voila un site internet qui vous permet de réduire le poids de vos images jusqu’à 80% le poids des images PNG et JPG (gratuit) :

Compresseur de PNG/JPG

Après essais :

Il y a 3 types de compression :

  • Basse : 6,1 Mb → 1,2 Mb (Gain 79%)
  • Moyenne : 6,1 Mb → 614,2 Kb (Gain 89%)
  • Haute : 6,1 Mb → 342,5 Kb (Gain 94%)

Dans les 3 cas :

  • Avantage : Suite à agrandissement de mon image à 200%, je ne constate aucune perte de qualité.
  • Inconvénient : Perte de toutes les métadonnées.

Logos du site

Les images sont créées par nous-même et libres de droits (sauf les portraits - hors historiques - qui n’appartiennent qu’à la personne).


Manuel de rédaction

Pour alimenter ces pages, il existe une partie dite "privée" de ce site. C’est le fameux SPIP !
Elle n’est accessible qu’aux webmestres, Administratrices et Administrateurs, Rédactrices et Rédacteurs de ce site.
Comme il y a un peu de code (très peu par rapport à celles et ceux qui construisent en langage informatique) un article spécifique est construit spécifiquement pour y mettre nos trucs et bidules.

Il s’agit du plugin https://contrib.spip.net/Manuel-de-redaction-du-site.

Notes :

  • Le plugin Coloration du code ne fonctionne pas avec le plugin Manuel de rédaction.
  • Il peut y avoir un mauvais affichage si le code comporte des guillemets. Il est préférable de les remplacer, dans ce cas, par une apostrophe et le signaler en préambule.

Notes de bas de page

Cela facilite l’utilisation des notes de bas de page en les affichant dans des infobulles plutôt que de faire des allers et retours entre la note et le bas de page.
Le plugin Bigfoot a été installé sur ce site.

Note : Conflit entre Escal 5.0.9 et Bigfoot 1.3.7 depuis la mise à jour en SPIP 4.2.6 : en partie publique, 2 bulles s’affichent.
La méthode trouvée sur le fil de discussion du plugin Bigfoot consiste à mettre une ligne de code CSS dans son squelettes/styles/perso.css :

/* Pas de double occurence pour le plugin bigfoot */

span.littlefoot-footnote__host:nth-child(2n) {
display : none
}

Conflit réglé avec la version 5.0.11 (novembre 2023) d’Escal.


Partenaires

Nous pouvons avoir à afficher des logos de partenaires ou d’évènements. Ceux-ci sont affichés en pied de page d’accueil. les fichiers squelettes/styles/perso.css et squelettes/inclusions/inc-pied.html.

Les images sont à mettre dans le dossier squelettes/images/ - 96Dpi et 1,50cm de hauteur.

perso.css

/* Logos partenaires */
.partenaires {
	margin: 10px;
	background-color : #ffffff ;
        padding: 5px;
}

inc-pied.html
Code à mettre en dessous de footer

<!-- bandeau partenaires -->
<div class="partenaires">
   <!-- Partenaire 1 : -->
      <a href="https://adresse"><img src="#CHEMIN{images/image.png}" alt="texte alternatif" title="descriptif qui sera en info-bulle"></a>
   <!-- Partenaire 2 (exemple sans lien) : -->
      <img src="#CHEMIN{images/image.png}" alt="texte alternatif"  title="descriptif qui sera en info-bulle">
</div>
<br>

Pdf

Certaines et certains souhaitent conserver une version type "papier" d’un article. Le plugin Article PDF installé sur ce site permet d’afficher une icône "Pdf" en haut des articles afin d’en créer un.
Toutefois ce plugin ne permet pas de mettre en Pdf des objets animés (ou leur copie écran), tels qu’un lecteur d’images ou une frise chronologique, par exemple.


Plugins

Avec le squelette ESCAL, ils sont de trois types : actifs, inactifs ou verrouillés.
Sur ce site :

  • Actifs
    • Article PDF
    • Bigfoot
    • Cibloc (installé d’office)
    • Crayons
    • Fulltext
    • Galleria plugin pour SPIP
    • LinkCheck
    • Manuel de rédaction du site
    • MathJax pour SPIP !
    • pdf.js
    • Social tags
    • Tarteaucitron
  • Inactifs
    On ne peut pas intervenir (pour l’instant...). La liste peut être modifiée à tous moments par le webmestre ESCAL.
  • Verrouillés
    Ils sont aussi actifs, mais verrouillés ! On peut donc les utiliser à tous moments.

Recherches

Le moteur de recherches s’est vu attribué le plugin Fulltext qui permet de chercher aussi des mots dans tous les documents joints (Pdf, etc...) ; bien-sûr il faut que ceux-ci puissent être lus (reconnaissance de caractères - OCR).
Une fois le plugin installé dans le répertoire plugins/ et activé à partir de la page « Gestion des plugins », la recherche fonctionne exactement comme avant. Pour l’installation proprement dite, il faut créer des index FULLTEXT sur les tables ; pour cela, il suffit de se rendre sur la page ecrire/ ?exec=fulltext, et de valider les opérations proposées.


Rédaction en partie "publique"

Pour alimenter les pages, les rédactrices et rédacteurs doivent se connecter en partie "privée". Le plugin Les crayons a été ajouté. les contenus peuvent être directement édités « en place » sur les pages publiques du site, par les personnes autorisées.


Rollover

Le "rollover" permet, au passage de la souris (sans cliquer), de faire apparaître une autre photo.
Un modèle a été monté et nommé rollover.html et un second nommé rollover_descriptif.html si l’on veut afficher les Titre, Descriptif et Crédit..

rollover.html

<BOUCLE_document (DOCUMENTS) {id_document=#ENV{doc1}}>
	[(#SET{width,[(#FICHIER|image_reduire{[(#CONFIG{escal/config/largeurimage,400})]}|extraire_attribut{width} )]} )]
	[(#SET{height,[(#FICHIER|image_reduire{[(#CONFIG{escal/config/largeurimage,400})]}|extraire_attribut{height} )]} )]
</BOUCLE_document>
 
 
<style>
.rollover#ENV{doc1} {
	width: #GET{width}px;
	height: #GET{height}px;
	margin: auto;
	background: url("<BOUCLE_document1 (DOCUMENTS){id_document=#ENV{doc1}}{doublons}>#FICHIER</BOUCLE_document1>");
	background-size: cover;
}
.rollover#ENV{doc1}:hover {
	background: url("<BOUCLE_document2 (DOCUMENTS){id_document=#ENV{doc2}}{doublons}>#FICHIER</BOUCLE_document2>");
	background-size: cover;
}
</style>
 
<div class="rollover#ENV{doc1}">
</div>

Explications
La première boucle récupère la largeur et la hauteur d’une des 2 images après traitement par image-reduire en fonction de la valeur définie dans la configuration d’Escal.
Ensuite, on définit la taille de la div "rollover" en fonction de ces valeurs, on centre avec margin:auto et on définit comme fond le doc1 qui couvre toute la div.
Puis on remplace ce doc1 par le doc2 au survol.

L’appel dans le texte se fait avec la syntaxe :
<rollover|doc1=XX|doc2=YY>
XX et YY sont les numéros/identifiants des 2 images.

rollover_descriptif.html

<BOUCLE_afficher (DOCUMENTS) {id_document=#ENV{doc1}}>
<div class="spip_documents spip_documents_center">
<figcaption class='spip_doc_legende'>
	[<div class='spip_doc_titre'><strong>(#ENV*{titre,#TITRE*|supprimer_numero}|propre|ptobr)</strong></div>]
	[<div class='spip_doc_descriptif'>(#ENV*{descriptif,#DESCRIPTIF*}|propre|PtoBR)</div>]
	[<div class='spip_doc_credits'>(#ENV*{credits,#CREDITS*}|propre|PtoBR)</div>]
</figcaption>
</div>
</BOUCLE_afficher>

L’appel dans le texte se fait avec la syntaxe :
<rollover_descriptif|doc1=XX>
XX est le numéro/identifiant de l’image dont le descriptif est pris en compte (celle en premier plan).

Ce qui donne en exemple de combinaisons "passage de la souris et lien vers une autre photo en cliquant dessus :

Classe de 1ère B - Lycée Pasteur 1930-1931.
© Photo Archives Départementales des Hauts-de-Seine, 2452W172.

Codes appelés :

[<rollover|doc1=373|doc2=372>->doc371]
<rollover_descriptif|doc1=373>

Sauvegardes

Pour sauvegarder la configuration en cas de besoin de rétropédalage, suite à une mise à jour de plugin ayant échouée par exemple, le plugin Importeur / Exporteur de configurations a été installé.
Pour sauvegarder la configuration, à partir du menu de l’espace privé de SPIP : Maintenance/Exporter des données.
Pour importer la configuration, à partir du menu de l’espace privé de SPIP : Maintenance/Importer des données.
Par sécurité, nous sauvegardons toutefois les dossiers à la racine

  • IMG (via FTP)
  • squelettes (via FTP)
  • plugins (via FTP)
  • la base de données (à partir du menu de l’espace privé de SPIP : Maintenance/Sauvegarder la base)

Bon à savoir : Une récupération peut être faite aussi chez l’hébergeur (en occurrence la société O.V.H. pour ce site).


Sommaire automatique

Outil du plugin Sommaire automatique activé sur ce site.

Pour n’avoir que les première lignes de paragraphe dans les sommaires, mettre cette balise en tête de l’article :

<!-- Enlever le "A" devant "sommaire" et cette ligne -->
<Asommaire|niveau_max=1>

À noter  :

  • Conflit observé entre les plugins "Blocs dépliables" et "Sommaire automatique". En cas d’utilisation de Sommaire automatique, il faut rester sur un seul niveau de celui-ci, sinon le second bloc perd son style CSS :
    • soit on choisis "1 niveau" pour la profondeur dans la config du plugin (mais ce sera valable pour tous les articles),
    • soit on rajoute <Asommaire|niveau_max=1>(enlever le "A") au début de ton article pour limiter la profondeur à cet unique article (solution préconisée sur ce site).

Tableaux

J’ai modifié les couleurs initiales des tableaux

/* Couleurs des lignes et texte, ainsi que son alignement, dans les tableaux */ 

/* Lignes d'ent$ete */
table.spip tr.row_first th{
background-color: #336699;
text-align: center;
color: #FFFFFF;
}
/* Lignes impaires */
table.spip tr.row_odd.odd{
background-color: #DAE6F6;
}
/* Lignes paires */
table.spip tr.row_even.even{
background-color: #82ADE2;
}

J’utilise les tableaux transparents, notamment pour mettre 2 objets les uns à côté des autres, comme, en exemple le téléchargement Pdf et la visualisation Calaméo du journal Match dans l’article sur Le Cid.

Dans mon fichier Perso.css j’ai mis :

/* Pour faire des tableaux transparents */
.tableau-transparent th, 
.tableau-transparent td, 
.tableau-transparent tr{
	background-color: transparent !important ;
	border-color: transparent !important ;
}

Donc maintenant pour en créer un il suffit de codifier dans son article :

<div class="tableau-transparent">
 
|{{Colonne 1}}|{{Colonne 2}}|
|texte |là aussi|
|encore|et toujours|
 
</div>

Astuce(s) :

  • Écrire un pipe dans un tableau : <a>&#124;</a>

Tout ce codage et d’autres sur le site Escal.


Tabulations

<div style="text-indent:3em;">Mon texte en retrait de 3e niveau</div>
<div style="text-indent:6em;">Mon texte en retrait de 6e niveau</div>

Donne :

Mon texte en retrait de 3e niveau
Mon texte en retrait de 6e niveau

Exemple dans l’article sur le Docteur JAGOT (dans la transcription de la note du tribunal).


Traducteur Google

On n’aime pas Google, mais c’est pratique quand même des fois... et puis nous avons besoin de proposer la traduction des pages pour le sujet de recherches sur la Seconde Guerre Mondiale !
On trouve le script à l’adresse : https://docs.google.com/forms/d/e/1FAIpQLSfAyBtxLmBe3s1m-6nkSBcs7W_8EAUmwmPTEXlSqctg1QCRBw/viewform

Remplir les 2 premiers formulaires

Traduction des explications Google de la dernière phase, en français

Demandez à Google Translate de traduire un site Internet

Merci de soumettre la demande. Vous pouvez maintenant utiliser le Traducteur de Site Internet sur votre site, avec les instructions ci-dessous.

  1. Déterminez le code de langue de vos pages de site Internet.
    Allez à https: // translate.google.com/, choisissez la langue de votre site comme la langue source, alors le paramètre ’sl’ est le code de langue à être utilisé.
    Par exemple, le code de langue française est entre les ’demi-cadratin’ (fr), l’anglais est ’en’ et le japonais est ’ja’.
  2. Copiez le code suivant à la partie appropriée de votre site. Remplacez le code de langue ’demi-cadratin’ avec celui que vous recevez du 1, si besoin il y a.
<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'fr'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Copier/coller le code et le placer dans l’article de la rubrique cachée avec comme mot clé "acces-direct" [4].


Travaux

En cas de travail important sur le site le plugin En travaux a été installé. Il suffit de l’activer en cas de besoin.


Variables

Une variable, comme son nom l’indique, permet de faire varier des données. Là, elles permettent de changer en une seule fois plusieurs objets.
Sur ce site, je l’ai utilisée, entre autre, pour indiquer © Fonds <a href="https://bu.unistra.fr/opac/resource/le-prolo-de-la-bruche-1935/BUS4932078">Bibliothèque Nationale et Universitaire de Strasbourg</a> - Collection du Collectif <acronym title="Jean de Neyman">J.d.N</acronym>. dans les postscriptum du Prolo de la Bruche.
Si l’adresse web de la bibliothèque change (rupture de lien), je ne change que mon modèle qui répercutera sur toutes les pages qui possèdent cette variable d’indiquée.

2 méthodes sont possibles :

  • Les modèles
    S’ils n’existent pas, créer, à la racine de www, les dossiers squelettes/modeles. Faire un fichier variable_bib_bnus.html avec à l’intérieur écrit le texte :
    © Fonds <a href="https://bu.unistra.fr/opac/resource/le-prolo-de-la-bruche-1935/BUS4932078">Bibliothèque Nationale et Universitaire de Strasbourg</a> - Collection du Collectif <acronym title="Jean de Neyman">J.d.N</acronym>.
    Mettre ce fichier dans le dossier squelettes/modeles.
    • Pour appeler cette variable dans Spip, écrire <variable_bib_bnus|>
      Il faudra faire un nouveau fichier pour chaque variable.
      Note : le nom du fichier doit être en minuscules (bas de casse) et ne doit pas avoir de chiffres.
      Pour en savoir plus sur les modèles.
  • Utiliser "les chaînes de langues"
    Là, c’est du langage php. L’avantage est que tu n’as qu’un seul fichier pour toutes les variables.
    S’ils n’existent pas, créer, à la racine de www, les dossiers squelettes/lang. Faire un fichier local_fr.php avec à l’intérieur écrit le texte :
        <?php
        // fichier de variables
     
        if (!defined('_ECRIRE_INC_VERSION')) {
                return;
        }
     
        $GLOBALS[$GLOBALS['idx_lang']] = array(
     
        'variable_bib_bnus' => '© Fonds <a href="https://bu.unistra.fr/opac/resource/le-prolo-de-la-bruche-1935/BUS4932078">Bibliothèque Nationale et Universitaire de Strasbourg</a> - Collection du Collectif <acronym title="Jean de Neyman">J.d.N</acronym>.',
        'variable_deux' => 'Espérons que cette variable 2 fonctionne',
        'variable_trois' => 'Soyons fous avec une troisième',
     
        );
    • Pour appeler la variable "variable_bib_bnus" dans Spip, écrire <:escal:variable_bib_bnus:>
    • Pour appeler la variable "variable_deux" dans Spip, écrire <:escal:variable_deux:>
    • Pour appeler la variable "variable_trois" dans Spip, écrire <:escal:variable_trois:>

Encore merci à "Escal" et SpipFactory ...


Dans la même rubrique

Mode d’emploi
le 12 novembre 2023
par Patrice
Conditions de publications
le 26 octobre 2023
par Patrice
Charte graphique
le 18 novembre 2023
par Patrice
Commémorations 2024 - Site labellisé
le 22 mars 2024
par Patrice