Historique: Guide d édition Wiki
Aperçu de cette version: 483
Avant-propos : la documentation wiki du site est constituée de plus de 2200 pages (au 09 avril 2016), dont plus de 600 dédiées à des logiciels et plus de 450 dédiées à des matériels. Elle se construit depuis 2005 grâce aux 7196 utilisateurs les inscrits et connectés au site, dont bientôt toi nous l’espérons ! Chacun est libre de modifier les pages, que ce soit pour corriger une faute de frappe ou pour ré-écrire une page complète. Voici comment.
Table des matières
Éditer une page
Avant de lire cette page, prenons le temps de lire la courte page : La documentation Wiki.
Passer en mode édition
Pour éditer une page, il te faut être inscrit et connecté, puis passe en mode « édition » en cliquant sur l'icône « Éditer cette page »
en haut à droite d'une page wiki ou sur le bouton du même nom en bas de page. Astuce
Il est aussi possible d'éditer une section particulière d'une page. Pour cela, clique sur l'icône « Modifier cette section »
en face du titre du paragraphe visé.
Pour plus d'informations voir doc.tiki.org/Édition par section.
en face du titre du paragraphe visé.Pour plus d'informations voir doc.tiki.org/Édition par section.
Syntaxe Wiki
Dans l'éditeur Wiki apparaît le « Code source » de la page, écrit en syntaxe Wiki qui est un langage de balisage léger.
Elle décrit à la fois le contenu de la page ainsi que sa mise-en-page.Voici quelques exemples de balises Wiki :
-
Code :
Copy to clipboard
Un texte sans mise en forme
Rendu :
Un texte sans mise en forme
-
Code :
Copy to clipboard
__Un texte en gras__
Rendu :
Un texte en gras
-
Code :
Copy to clipboard
===Un texte souligné===
Rendu :
Un texte souligné
-
Édition avec les balises
Les balises peuvent être écrites à la main (si tu les connais), ou peuvent être rajoutées grâce aux outils disponibles dans la barre d'outils en haut de l'éditeur. Voici à quoi ressemble la barre d'outil d'une page Wiki :
Pour mettre en forme un bout de texte, il suffit généralement de le sélectionner, puis de cliquer sur l'icône correspondante à l'outil souhaité. Par exemple pour mettre en gras la ligne « Un texte en gras » de l'exemple précédent :
Nous n'allons pas détailler le fonctionnement de chacun des éléments de la barre d'édition car ceux-ci s'expliquent d'eux-même. Passe ta souris au dessus des icônes pour voir apparaître un descriptif de chaque outil. À noter que toutes les balises Wiki ne sont pas présentes dans la barre d'outils car elles sont trop nombreuses. Certaines balises devront donc être écrites à la main, mais tu verras qu'avec un peu d'habitude ceci ne pose pas problème. En cas de doute, tu peux te référer au système d'aide intégré en cliquant sur l'icône associée
de la barre d'outils. note
Pour supprimer une balise Wiki, il faut l'effacer à la main.
Quelques balises bien utiles :
- balise de lien interne :
(code : {img src="img/icons/page_link.png"})
- balise de lien externe :
(code : {img src="img/icons/world_link.png"})
- balise de désactivation de l'interprétation de la syntaxe wiki
(code : {img src="img/icons/noparse.png"})
- balise de caractères spéciaux :
(code : {img src="lib/ckeditor_tiki/ckeditor-icons/specialchar.gif"})
- balise d'image
(code : {img src="img/icons/picture.png"})
- balise de citation
(code : {img src="img/icons/quotes.png"})
astuce
Utilise la fonction « Aperçu » pour vérifier ta syntaxe Wiki avant d'enregistrer une page ! Tu peux aussi tester ta syntaxe dans le bac-à-sable Wiki.
Un exemple est plus parlant qu'un long discours, voici donc sans plus attendre un exemple complet de page wiki regroupant certaines des balises les plus couramment utilisées :
Exemple page type
Code :
Copy to clipboard
Cette __page type__ est un exemple de page Wiki. {img src="img/linuxmao/logo_linuxmao.png"} {maketoc} !Informations Site web officiel~hs~: [http://linuxmao.org] Plateforme~hs~: ((GNU Linux)) !Description Cette __page type__ donne un aperçu de ''l'agencement'' et de la ''mise en page'' d'une page Wiki standard. Elle permet aussi de se familiariser avec la syntaxe Wiki. !Utilisation Cliques sur l'icône d'édition ===en haut à droite=== pour éditer une page Wiki. !-Installation Paragraphe rétractable. !Liens et commentaires ~tc~ insère ici liens vers des docs (internes ou externes), vers des tutos ou autres pages liées ~/tc~ *((Accueil)) *((Manuel du site))
Rendu :
Explications
Nous avons déjà vu plus haut certaines des balises utilisées dans cet exemple et, tu auras compris, l'utilisation d'autres balises telle que le point d'exclamation pour le titre d'un paragraphe ou les doubles apostrophes pour mettre un texte en italique.
Mais nous voici aussi face à un autre type de balises spéciales, celui {entre accolades}. Ce type de balise est appelé « Plugiciel ». Les plugiciels Wiki permettent d'étendre la syntaxe pour afficher des éléments spéciaux qui peuvent être des images, différents type de boîtes, des listes automatiques, etc...
Dans notre exemple, les plugiciels sont utilisés pour afficher une image et un sommaire (créé automatiquement). Le fonctionnement des plugiciels est ⇓ décrit plus bas.
Autre nouveauté, les liens hypertexte.
Ceux-ci se trouvent sous la forme de liens Wiki entourés de ((doubles parenthèses)) ou bien de liens externes entourés de [crochets] . Davantage d'explications sur les liens et la manière de les insérer ⇓ un peu plus bas.Autre nouveauté encore, la balise ~hs~. Celle-ci créé un espace insécable.
Enfin, tu auras remarqué sur l'image que la page possède un titre et que celui-ci n'est pas écrit dans le code de le page !
Le titre (en réalité la description) peut-être différent du nom de la page (qui apparaît lui dans l'adresse URL
de la page, ainsi généralement que dans la barre de fenêtre du navigateur). Cette description est accessible et modifiable lors de l'édition de la page, dans le deuxième onglet « Propriétés », au dessus de l'éditeur :
Syntaxe avancée
La liste des possibilités est énorme, réfère toi à la documentation officielle pour plus de détails :
Insérer un lien
Il existe deux types différents de liens hypertextes, associés à deux outils différents de la barre d'outils :
Les liens Wiki (également appelés "liens internes")
Ces liens pointent vers une autre page Wiki du site. Ils sont représentés entourés de ((doubles parenthèses)).
Pour insérer un lien Wiki, utilise l'outil « Lien Wiki ». Cet outil affiche ce mini-formulaire :
Dans le champ « Créer un lien vers cette page », tape le nom de la page Wiki visée. Une fonction de complètement automatique
propose une liste de pages correspondantes, sélectionne la bonne à la souris.Éventuellement, ajoute dans le champ « Afficher ce texte » le nom qui s'affichera pour le lien (si non-renseigné, il s'agira du nom de la page), ou encore, ajoute dans le champ « Balise » le nom de la balise correspondant à un paragraphe précis de la page visée.
astuce
Pour trouver le nom de la balise correspondant à un paragraphe précis, navigue sur la page visée et clique sur le nom du paragraphe dans le sommaire de la page. Recopie ensuite ce qui suit le signe dièse (#) dans l'URL de la page
Quelques exemples de liens Wiki :
Code :
Copy to clipboard
((Ardour 3))
Rendu :
Ardour 3
Code :
Copy to clipboard
((Ardour 3|Ardour))
Rendu :
Ardour
Code :
Copy to clipboard
((Ardour 3|#Installation|Ardour 3, paragraphe Installation))
Rendu :
Ardour 3, paragraphe Installation
Code :
Copy to clipboard
((c|#Compresseur|Définition d'un compresseur))
Rendu :
Définition d'un compresseur
Les liens externes
note
Lorsque cela est possible, préfère l'utilisation de liens Wiki !
Pour insérer un lien hypertexte visant une page web externe au site, utilise l'outil « Lien externe »
de la barre d'édition. Les liens externes sont représentés entourés de [crochets].Un formulaire similaire à celui des liens Wiki apparaît. Rempli dans le champ « Créer un lien vers cet URL » l'adresse complète, et éventuellement ajoute dans le champ « Afficher ce texte » le nom qui s'affichera pour le lien (si non renseigné, il s'agira de l'URL complète).
Quelques exemples de liens externes :
Code :
Copy to clipboard
[http://ardour.org/]
Rendu :
http://ardour.org/
Code :
Copy to clipboard
[http://ardour.org/|Site officiel d'Ardour]
Rendu :
Site officiel d'Ardour
Si, pour une raison ou pour une autre (comme en page d'accueil par exemple), vous souhaitez qu'un lien externe qui s'affiche normalement en bleu (couleur des liens externes) soit affiché en orange (couleur des liens internes), vous pouvez appliquer la syntaxe de code suivant :
Copy to clipboard
{DIV(class=wikilink)}[http://www.mon_lien.org/]{DIV}
Exemple avec le lien webchat linuxmao :
Code :
Copy to clipboard
{DIV(class=wikilink)}[http://webchat.freenode.net/?channels=linuxmao|webchat linuxmao]{DIV}
Rendu :
note
Une bonne pratique pour les liens externes est d'ajouter un drapeau indiquant s'il s'agit d'un lien menant vers une page en français ou en anglais. Pour ceci, vous pouvez utiliser les balises :
- {fr} qui donnera ->
- {en} qui donnera ->
Autres types de liens
On notera particulièrement la possibilité de créer des liens permettant la navigation à l'intérieur même d'une page, sans avoir à recharger celle-ci. Ces liens pointent vers des balises de paragraphes (voir les liens Wiki) et doivent être écrits à la main.
Code :
Copy to clipboard
[#Ins_rer_une_image|__⇓__ Insérer une image]
Rendu :
⇓ Insérer une image
Il peut être utile de faire une lien vers un sujet du forum :
Code :
Copy to clipboard
[forumthread68770]
(en remplaçant 68770 par le numéro du forum)
Rendu :
forumthread68770
La même chose avec une définition personnalisée :
Code :
Copy to clipboard
[forumthread68770|une définition personnalisée]
(toujours en remplaçant 68770 par le numéro du forum)
Rendu :
une définition personnalisée
Pour plus de détails et de possibilités, voir doc.t.o/Liens.
Les plugiciels
Nous pouvons séparer les plugiciels en deux catégories : ceux pour lesquels nous devons préciser un contenu, et ceux dont le contenu est créé automatiquement.
Prenons le plugiciel BOX. Celui-ci créé une boîte et a donc besoin que nous lui précisions un contenu à afficher à l'intérieur. Nous utiliserons alors une syntaxe dite "en majuscule", avec deux balises délimitant le début et la fin du contenu.
|
Code : Copy to clipboard
|
Rendu : mon contenu |
Les deux balises sont le nom du plugiciel (en majuscules) entourées d'accolades. La balise de début contient une section de paramètres du plugiciel, entre les deux parenthèses.
En effet, il est possible de spécifier des paramètres variés en fonction du plugiciel. Par exemple la documentation officielle nous apprend que le plugiciel BOX possède un paramètre width définissant la largeur de la boîte.
|
Code : Copy to clipboard
|
Rendu : mon contenu |
Si le paramètre contient des espaces, il faudra l'entourer de guillemets.
|
Code : Copy to clipboard
|
Rendu : Mon titre mon contenu |
Le deuxième type de plugiciel, celui qui n'a pas besoin de contenu, s'écrit en minuscules, et ne possède qu'une balise.
|
Code : Copy to clipboard
|
Rendu : |
Avec des paramètres :
|
Code : Copy to clipboard
|
Rendu : |
Tu trouveras dans la suite de cette page des exemples de plugiciels couramment utilisés. Pour une liste plus complète (mais parfois en anglais) et plus de détails sur les plugiciels, voir la documentation officielle : doc.t.o/Plugiciels Wiki.
Plugiciels communs
Plugiciels les plus couramment utilisés :
|
Code : |
Rendu : |
|
Copy to clipboard
|
|
|
{CODE()}sudo apt-get install zynaddsubfx{CODE} Plugiciel accessible via la barre d'édition ( 
). En savoir plus sur ce plugiciel... |
Copy to clipboard
|
|
{CODE(caption="Installer zynaddsubfx")}sudo apt-get install zynaddsubfx{CODE} Plugiciel accessible via la barre d'édition (
). En savoir plus sur ce plugiciel... |
Installer zynaddsubfx Copy to clipboard
|
|
Copy to clipboard
). En savoir plus sur ce plugiciel... |
Confucius écrit:
Je ne cherche pas à connaître les réponses, je cherche à comprendre les questions.
|
|
Copy to clipboard
|
|
|
Copy to clipboard
|
boîte |
|
Copy to clipboard
Voir ⇓ le paragraphe dédié : Insérer une image. |
|
Plugiciels perso linuxmao
Plugiciels uniques au site linuxmao.org
|
Copy to clipboard
|
force un retour à la ligne (après une image par exemple) |
|
Copy to clipboard
|
linuxmusicians.com
|
|
Copy to clipboard
|
retrouver la vie, la vraie
|
|
Copy to clipboard
|
fin d'un paragraphe
|
|
Copy to clipboard
|
attention Documentation en cours d'écriture voir ce fil de forum lié |
|
Copy to clipboard
|
info Il va pleuvoir ce soir, penses à prendre ton parapluie ! |
|
Copy to clipboard
|
astuce On peut rajouter une croix pour fermer ces trois boîtes 😎 |
|
Copy to clipboard
Le paramètre "dossier=" est le nom de la page souhaité. Le paramètre optionnel "niveaux=" défini le nombre de sous-niveaux de l'arborescence affiché. |
|
Insérer une image
Pour insérer une image quelque part sur le site (page wiki, forum, article,...), suis la procédure suivante :
0 / Donne à ton image un nom de fichier explicite, pour faciliter les recherches dans les galeries de fichiers sur le site.
Exemple : « Ardour3_réglages_MIDI.png ».
1 / Place le curseur à l'endroit où tu souhaites que ton image apparaisse, puis clique sur l'icône « Choisir ou télécharger une image »
de la barre d'édition2 / Une fenêtre surgissante apparaît, dedans clique sur le bouton « Parcourir... » pour envoyer une image.
Notes :
- si l'image est destinée à être affichée dans un forum, clique d'abord sur le bouton « liste des galeries », navigue dans le répertoire « Images > Forum » puis clique sur « Envoyer un fichier' » Une fenêtre similaire apparaît alors.
- si l'image est déjà sur le site, clique à la place sur le bouton « Parcourir la galerie ». Sélectionne l'image et passe à l'étape 5.
3 / Une fois l'image sélectionnée sur ton disque dur, son nom s'affiche à coté du bouton « Parcourir... » :
Clique alors sur « Télécharger le(s) fichier(s) »
4 / Quelques secondes plus tard apparaît la fenêtre ci-contre. Clique sur le lien :
5 / La fenêtre surgissante se referme et te voici de retour dans l'éditeur. Un bout de code wiki est apparu, il ressemble à ceci :
Copy to clipboard
{img fileId=1583 thumb=popup title="Cliquer pour agrandir"}
Et voilà ! Enregistre la page (ou envoi ton message de forum) et l'image apparaît. Si tu souhaites personnaliser la manière dont elle s'affiche, cliques sur la croix ci-dessous et continue à lire.
[+]
Insérer des pastilles numérotées dans vos images :
N'hésite pas à adjoindre des pastilles numérotés à tes copies d'écran ou tes schémas via le script-fu présent dans la page http://www.gillesmaire.com/tiki-index.php?page=draw-numbers. En un clic souris, tu choisis le nombre de pastilles et leur couleur et tu n'as plus qu'à les positionner dans l'image pour en faire une légende plus précise.
N'hésite pas à adjoindre des pastilles numérotés à tes copies d'écran ou tes schémas via le script-fu présent dans la page http://www.gillesmaire.com/tiki-index.php?page=draw-numbers. En un clic souris, tu choisis le nombre de pastilles et leur couleur et tu n'as plus qu'à les positionner dans l'image pour en faire une légende plus précise.
Pour encore plus d'infos, voir :
Insérer un fichier audio
Pour insérer un fichier audio au format mp3 :
Copy to clipboard
{mediaplayer mp3="http://chemin/vers/et/repertoire/de/la/source.mp3"}
Insérer une vidéo
Note : des exemples de pages où se trouvent des insertions de vidéo : spectrum3d, miditouch, midiball, Yamaha Studio Manager et Praxis Live.
HTML
Pour insérer une vidéo :
- copier le code HTML proposé par les sites d'hébergement comme Dailymotion ou YouTube via l'option Intégrer cette vidéo (parfois signalé avec le code </>)
- le coller dans un plugiciel HTML
Copy to clipboard
{HTML()}<iframe frameborder="0" width="480" height="210" src="..."></iframe>{HTML}
note
L'utilisation du plugin HTML nécessite d'être validée par un admin Wiki.
FLV
Pour insérer une vidéo au format flv :
Copy to clipboard
{mediaplayer flv="http://cheminvers/et/repertoire/dela/source.flv"}
Daily Motion
Quand vous récupérez le code pour l'exporter sur un blog ou un site, voici comment il est écrit :
Copy to clipboard
<iframe frameborder="0" width="425" height="350" src="http://www.dailymotion.com/embed/video/xxxxxxx"></iframe><br /><a href="http://www.dailymotion.com/video/xxxxxxx_nomdelavideo" target="_blank">nomdelavideo</a> <i>par <a href="http://www.dailymotion.com/auteur" target="_blank">auteur</a></i>
Récupérez le code id de la vidéo sur la ligne suivante :
Copy to clipboard
"src="http://www.dailymotion.com/embed/video/xxxxxxx"
Et le coller après /swf/ de la ligne suivante :
Copy to clipboard
{FLASH(movie=http://www.dailymotion.com/swf/xxxxxxx,width=>425,height=>350,quality=>high)}{FLASH}
Youtube
Avec une URL du type :
Copy to clipboard
[http://www.youtube.com/watch?v=Z_TkiYHkGmw|Au piano]
Récupérez le code youtube.com/watch?v=Z_TkiYHkGmw= et le coller après movie=lecode :
Copy to clipboard
{youtube movie="Z_TkiYHkGmw" width="425" height="350" quality="high" allowFullScreen="y"}
Attention
Que ce soit avec le dailymotion ou youtube, le plugin :
- n'est pas visible en mode Aperçu,
- n'est pas actif sur les page personnelles des membres.
astuce
Tu peux faire des tests avec ce plugin dans le bac à sable.
Davantage d'informations : https://doc.tiki.org/PluginYouTube.
Divers
Pages verrouillées
Certaines pages sont verrouillées à l'écriture pour les utilisateurs comme par exemple :
- la page d'accueil, ceci dû a du spam sur cette page. Vous pouvez y laisser un commentaire (en bas de page).
- la page Toutes les MAJ.
Signature
(utilisé sur la page d'accueil)
Code :
Copy to clipboard
{DIV(class=signature)}L'équipe linuxmao{DIV}
Rendu :
L'équipe linuxmao
Note : évidemment, on peut faire la même chose sans class css spécifique, mais cela demande à être validé par un administrateur et le code est plus compliqué :
Code :
Rendu :
Code :
Copy to clipboard
{TAG(tag=div style="text-align:right;margin-right:20px;")}L'équipe linuxmao{TAG}
Rendu :
L'équipe linuxmao
[+]