Wiki Archipel des Confluences : Aide "expert" à l'édition stylée de contenu

Labo et notes expert

Aide "expert" à l'édition stylée de contenu

Cette page ne concerne que les utilisateurs connectés ET ayant une autorisation en édition sur la page en rédaction

Mode édition

Accès au mode édition
Tout simplement par un double-clic dans le texte !
Nom Wiki
Pour éviter la prise en compte automatique d'un nom Wiki, entourer le mot d'un double guiullement (")
Exemple pour AdC : AdC
Mémo du langage markown
https://www.markdown-cheatsheet.com/

Page

Nom d'une page
Le nom d'une page est le mot se situant après le ? dans l'url de la page.
Par exemple pour cette page, son nom est Aide2

Création d'une page
Saisir l'URLhttps://www.archipel-confluences.org/WikiAdC/? et ajouter le nom de la page.
Par exemple https://www.archipel-confluences.org/WikiAdC/?MaNouvellePage
Valider (touches Entrée ou Retour)
Cliquer sur "créer la page"

Pour définir le nom de la page :

en minuscule, majuscule et chiffre
ne pas mettre d'espace
de préférence ne pas mettre d'accent ou de caractères spéciaux pour éviter d'éventuels bugs d'accès
de prérence mettre une majuscule au début de chaque mot pour faciliter la visualisation dans les listes de page

Par exemple MaNouvellePage ou PirogueXxxActualite

Rédaction

Créer une ancre

(un lien qui envoie sur une partie d'une page)

Code pour chaque ancre
Coder une ancre, par exemple d'identifiant "1" :

<a href="#ancre1">Texte d'appel vers l'ancre</a>

puis placer ce code juste au dessus du paragraphe cible :

<div id="ancre1">Texte au niveau de l'ancre</div>

Création d'un sommaire avec les ancres
Sommaire (par exemple en haut de page) :

""<a href="#ancre1">Doc 1</a>""
""<a href="#ancre2">Doc 2</a>""

etc ...
Puis placer avant le doc 1 :

""<div id="ancre1">Retour au sommaire</div>""

et avant le doc 2 :

""<div id="ancre2">Retour au sommaire</div>""

etc ...

Texte en couleur

Par défaut la couleur est noir.
Pour mettre du texte en couleur, insérer une ligne de code de type incluant le texte à colorer :

""<span style="color:#votrecodecouleur;">texte à colorer</span>""

ou #votrecodecouleur = nom de la couleur en anglais (sans # et en un mot) ou code hexa (#nnnnnn)
Exemple : texte en rouge ou bien en texte en vert
Quelques codes couleur
green ou #008000 = vert
red ou #ff0000 = rouge
darkred ou #8b0000 = rouge foncé
orange ou #ffa500 = orange
blue ou #0000ff = bleu
moccasin ou #FFE4B5 = moccasin = rgb(255, 228, 181)
Codes hexa des couleurs
Voir les 140 noms de couleurs acceptés par les navigateurs classiques :
https://htmlcolorcodes.com/fr/noms-de-couleur/

Créer un tableau

Exemple :

Nom	Prénom	Localisation
Dupont	Albert	Lyon
Durand	Pierre	Paris

Nom	Prénom	Localisation
Dupont	Albert	Lyon
Durand	Pierre	Paris

Remarque : codage identique ...bug Wiki ?

Menu horizontal avec n items

{{nav links="ItemA, ItemB, ItemC, ItemD" titles="Nom de l'item A, Nom de l'item B, Nom de l'item C, Nom de l'item D"}}

ce qui donne :

Caractères spéciaux

Copier/coller le code HTLM ou ASCII avec les guillemets :

caract	HTLM	ASCII	Clavier	Nom
	`"" ""`	`"" ""`	Alt-0160	Espace insécable
Ç	`""Ç""`	`""""`	Alt-128	C cédille majuscule
É	`""É""`	`""É""`	Alt-144	E majuscule accent aigu
É	`""È""`	`""È""`	Alt-212	E majuscule accent grave
Ê	`""Ê""`	`""Ê""`	Alt-210	E majuscule accent circonflexe
À	`""À""`	`""À""`	Alt-183	A majuscule accent grave
·	`""·""`	`""·""`	Alt-250	Point médian

https://www.leptidigital.fr/productivite/caracteres-speciaux-html-2-19297/

Bazarliste

https://yeswiki.net/?ActionBazarliste
nb : Nombre de fiches affichées. Ex :nb="3"

Fichier/Composants

Image

Insérer une image ou une photo
En mode éditionplacer le curseur où positionner l'image.
Cliquer sur le bouton Joindre/Insérer un fichier
Choisir le fichier de l'image (pas d'accent dans le nom du fichier)
Dans la case "Texte du lien de téléchargement", écrire le nom du lien proposer à vos futurs lecteurs (vous pouvez le changer plus tard);
Cliquez sur le bouton "Insérer".

Bloquer l'image
Pour bloquer l'image lors du survol de la souris : nofullimagelink="1"

Frame

Insérer un frame avec <iframe>

""<iframe src="https://unsite.com/iframe" width="100%" class="frameborder=yes"></iframe>""

Paramètres

Type	Code	Notes
Largeur en pixels	width="100%"	Paramètre obligatoire. Par défaut, cet attribut vaut 300.
Hauteur	Height="100"	Valeur par défaut : 150
Créer ou non un cadre noir	class="frameborder=yes/no"
Configuration automatique de la longueur	class="auto-resize"

Agenda

Recharger la page après une saisie

Pad

Création et édition d'un pad
Sur : Framapad
Créer un pad public
Récuperer son URL, par ex :

https://annuel2.framapad.org/p/adc-voilieratelier05-9zin?lang=fr

Puis insérer l'URL dans la page

`""<iframe name="embed_readwrite" src="https://annuel2.framapad.org/p/adc-voilieratelier05-9zin?lang=fr&showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false" width=100% height=600></iframe>""
{{end elem="col"}}
{{col size="3"}}`

Paramètres
lang=fr
showControls=true
showChat=true
showLineNumbers=true
useMonospaceFont=false

Template

Template par défaut

Template utilisé : ThemeMargot
https://yeswiki.net/?DocumentationThemeMargot /

Template "Blog"

{{bazarliste id="3" template="blog" header="true" show_author="1" show_date="1" correspondance="soustitre=bf_chapeau"}}

bf_chapeau : Chapô du billet
bf_description
bf_tags
bf_titre : Titre (obligatoire)
bf_url
date_creation_fiche
date_maj_fiche
id_fiche
id_typeannonce
imagebf_image
statut_fiche

Ajout PDF et Impression

Insérer le code suivant dans la page pour ajouter deux icones permettant de générer un PDFou d'imprimer la page

{#(sans les ""%%"" si ncopier/coller à partir de l'éditeur, mais bien, entouré de "")#}
""<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfEncodeImages = 0;var pfShowHiddenContent = 0;var pfBtVersion='2';(function(){var js,pf;pf=document.createElement('script');pf.type='text/javascript';pf.src='//cdn.printfriendly.com/printfriendly.js';document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/printfriendly-pdf-button-nobg-md.png" alt="Print Friendly and PDF"/></a>""