Avant-propos : alors voilà vous avez édité votre première page en suivant ces quelques premiers conseils. À présent, vous aimeriez bien aller plus loin dans la mise en page, ou pouvoir contrôler l'affichage d'une image ou que sais-je encore. Vous trouverez ici un ensemble de commandes TikiWiki qui vous permettront de faire de l'édition avancée.

Organisation la page

Table des matières

La table des matières peut possèder des arguments, par exemple son nom :

code:

{maketoc title="Le nom que je veux pour la table des matières"}

rendu:


Voir aussi La documentation officielle chez Tiki.org.

Les listes et leurs puces

Pour les puces, il faut utiliser la balise * (étoile) et elle se comporte exactement de la même manière que la balise ! de titre. Ainsi :

*puce de niveau 1 **puce de niveau 2 Texte passé à la ligne. ***puce de niveau 3 avec * *puce de niveau 1 avec un texte très long qui va donc passer à la ligne et avoir une tabulation automatique de même niveau que la puce. Il faut donc écrire beaucoup de texte pour voir apparaître le phénomène.

puce de niveau 1 puce de niveau 2 Texte passé à la ligne. puce de niveau 3 avec * puce de niveau 1 avec un texte très long qui va donc passer à la ligne et avoir une tabulation automatique de même niveau que la puce. Il faut donc écrire beaucoup de texte pour voir apparaître le phénomène.

Il est important de noter que tout retour à la ligne arrête la tabulation de la puce. Il est possible de forcer l'indentation de la ligne suivant la puce en ajoutant la balise + (plus) en début de ligne. Il faut autant de balises + que de balises *. Ainsi :

**puce 2 ++du texte bien tabulé **puce 2 +du texte mal tabulé *puce 1 du texte non tabulé *puce 1 +du texte tabulé **puce 2 +du texte tabulé de niveau 1 +du texte non tabulé

puce 2 du texte bien tabulé puce 2 du texte mal tabulé puce 1 du texte non tabulé puce 1 du texte bien tabulé puce 2 du texte tabulé de niveau 1 +du texte non tabulé

Les listes numérotées et leurs puces

Il est possible de créer des puces numérotées en utilisant la balise # (dièse) au lieu de la balise *.
Exemple :

#Première puce numérotée #Deuxième puce numérotée ##Première sous-puce numérotée **puce non numérotée de niveau 2

Première puce numérotée Deuxième puce numérotée Première sous-puce numérotée puce non numérotée de niveau 2

Pour tabuler les lignes comme les puces, on peut ici aussi utiliser la balise +.

Masquer le contenu

Il peut être intéressant de masquer le texte contenu sous un titre ou derrière une puce parce qu'il est très long (Très utile pour les logs dans les forums par exemple).
Dans ce cas il faut associer aux balises "!" (titre), "*" (puce) ou "#" (puce numérotée) un "+" (plus) ou un "-" (moins) juste après.
Le masque sera actif jusqu'au titre suivant ou sur toute la tabulation de la puce. La balise "+" affichera le contenu par défaut mais permet de le masquer. La balise "-" masque le contenu par défaut mais permet de l'afficher. Ainsi :
code :

!!!-Titre 3 masqué par défaut
*+puce affichée par défaut.
+Ce texte est aussi affiché par défaut.
!!!+Titre 3 affiché par défaut
#-puce masquée par défaut.
+Ce texte est aussi masqué par défaut.

rendu :

---

Titre 3 masqué par défaut

[+]

Titre 3 affiché par défaut

[-]

Les balises CODE

Afin de mettre en avant les commandes ou les logs, on utilise les balises {CODE()} et {CODE}.

{CODE()}Un peu de code{CODE}

Un peu de code

Les balises QUOTE

Pour insister sur une citation, on utilise les balises {QUOTE()} et {QUOTE}.

{QUOTE()}Citation{QUOTE}

Citation : Citation

Les BOX

Il est possible de créer des boites de couleurs dans lesquelles on peut mettre du texte afin d'attirer l'attention du lecteur. Ceci se fait à l'aide des balises BOX.

{BOX(align=center, bg=>#ffce89, width=>80%)} Le texte à mettre en valeur dans une boite sans titre.{BOX}

<br /> Le texte à mettre en valeur dans une boite sans titre.

{BOX(title=>Une boite, : align=center, bg=>#ffce89, width=>80%)} Le texte à mettre en valeur dans une boite avec titre.{BOX}

Une boite : <br /> Le texte à mettre en valeur dans une boite avec titre.

Il existe plusieurs attributs qui permettent de régler la BOX. Les voici :

• title : permet d'indiquer le titre,
• align : règle l'alignement à droite ( right), à gauche ( left), au centre ( center),
• bg : règle la couleur de la BOX ; il faut utiliser son code HTML ou des valeurs sûres ( green, blue,...),
• width : règle sa largeur par rapport à la largeur de la page (en pourcentage ou en pixels).

Pour forcer un passage à la ligne dans une box, il faut utiliser la balise %%%. Voir l'exemple :

{BOX(align=center, bg=>#ffce89, width=>80%)} Attention %%%au retour à la ligne.{BOX}

<br /> Attention au retour à la ligne.

---

{BOX(align=center, width= auto)}On a vu la boite qui s'étire ou s rétracte en fonction de l'afichage de la résolution de l'écran{{BOX}

{DIV(width=49%, float=right)} {BOX(align=center, width= auto)} Autre variante: boite gauche {BOX}{DIV} {DIV(width=49%, float=left)} {BOX(align=center, width= auto)}Autre variante: boite droite {BOX} {DIV}

{BOX(align=center, width= auto)}::{BOX(align=center, bg=#F6FAFB, width=150px)}Les boites gigognes tu connais ?{BOX}:: 
{DIV(width=49%, float=right)}{BOX(align=center, bg=#F6FAFB, width= auto)}{attention message="Plus complexe..."}{BOX}{DIV} 
{DIV(width=49%, float=left)}{BOX(align=center, bg=#F6FAFB, width= auto)}{ASTUCE(close=y)}Aide toi du surligneur de syntaxe (:wink:){ASTUCE} {BOX} 
{DIV}{BOX}

Mise en forme

Barré, exposant, indice,... - TAG

On a déjà vu les bases du formatage de texte ici. Vous trouverez donc dans cette rubrique toutes les techniques plus complexes pour des mises en forme de texte plus raffinées.
Vous trouverez ci-dessous quelques exemples qui utilisent la balise TAG :

1{TAG(tag=>sup)}ère{TAG} fois que je vois ca !	1ère fois que je vois ca !
En {TAG(tag=>sub)}dessous{TAG} de la ligne	En dessous de la ligne
on peut aussi ajouter un style html comme argument : {TAG(tag=sup, style=color:#FF0000)}exposant rouge{TAG}	exposant rouge

Voir la doc sur TikiWiki.org.

Espaces insécables

Recommandés en typographie, on utilise des espaces insécables entre du texte et certaines ponctuations comme :, ?, !, ; par exemple. Cela signifie que lors d'un renvoi à la ligne, il est impossible de séparer le texte de cette ponctuation et vous permettront donc d'éviter que ces signes ne se retrouvent en début de ligne. Il faut utiliser la balise ~hs~ .

On passe à la ligne tranquillement sans séparer ce~hs~:~hs~du texte autour de lui.

On passe à la ligne tranquillement sans séparer ce : du texte autour de lui.

Caractères spéciaux

lorsque pour une raison ou pour une autre (à cause d'un code tiki trop compliqué), votre mise en forme ne s'affiche pas correctement, vous pouvez souvent remplacer certains caractères critiques par leur code tikiwiki.
Remplacez simplement ce caractère par son numéro entouré de "~".

exemple de code : donnez des ~128~ à LinuxMAO !
résultat : donnez des € à LinuxMAO !

[+]

• Table des caractères spéciaux
  

  000	001	002	003	004	005	006	007	008	009	010	011	012	013	014	015	016	017	018	019
  �																			
  020	021	022	023	024	025	026	027	028	029	030	031	032	033	034	035	036	037	038	039
  													!	"	#	$	%	&	'
  040	041	042	043	044	045	046	047	048	049	050	051	052	053	054	055	056	057	058	059
  (	)	*	+	,	-	.	/	0	1	2	3	4	5	6	7	8	9	:	;
  060	061	062	063	064	065	066	067	068	069	070	071	072	073	074	075	076	077	078	079
  <	=	>	?	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O
  080	081	082	083	084	085	086	087	088	089	090	091	092	093	094	095	096	097	098	099
  P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_	`	a	b	c
  100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119
  e	e	f	g	h	i	j	k	l	m	e	o	p	q	r	s	t	u	v	w
  120	121	122	123	124	125	126	127	128	129	130	131	132	133	134	135	136	137	138	139
  x	y	z	{	|	}	~		€		‚	ƒ	„	…	†	‡	ˆ	‰	Š	‹
  140	141	142	143	144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159
  Œ		Ž			‘	’	“	”	•	–	—	˜	™	š	›	œ		ž	Ÿ
  160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175	176	177	178	179
  	¡	¢	£	¤	¥	¦	§	¨	©	ª	«	¬	­	®	¯	°	±	²	³
  180	181	182	183	184	185	186	187	188	189	190	191	192	193	194	195	196	197	198	199
  ´	µ	¶	·	¸	¹	º	»	¼	½	¾	¿	À	Á	Â	Ã	Ä	Å	Æ	Ç
  200	201	202	203	204	205	206	207	208	209	210	211	212	213	214	215	216	217	218	219
  Ê	É	Ê	Ë	Ì	Í	Î	Ï	Ð	Ñ	Ò	Ó	Ô	Õ	Ö	×	Ø	Ù	Ú	Û
  220	221	222	223	224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239
  Ü	Ý	Þ	ß	à	á	â	ã	ä	å	æ	ç	è	é	ê	ë	ì	í	î	ï
  240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255
  ð	ñ	ò	ó	ô	õ	ö	÷	ø	ù	ú	û	ü	ý	þ	ÿ

Créer des tableaux

Pour créer des tableaux on utilise la balise | (barre verticale, Alt Gr+6 sur un clavier AZERTY). Deux balises | marquent le début et la fin du tableau. Ensuite pour chaque case on utilise une seule balise. La balise %%% permet de passer à la ligne.

|| Une belle table Ligne 1 | case | case Ligne 2 | case%%%à la ligne | case Ligne 3 | case ||

Une belle table Ligne 1 case case Ligne 2 case à la ligne case Ligne 3 case

Notez que les cases partielles qui occupent l'espace de plusieurs colonnes comme à la ligne 3 ne peuvent qu'apparaître qu'à droite du tableau.

Créer un tableau type listing

{FANCYTABLE(head="liste|catégorie|lien|et/ou |tout ce que|tu veux|y voir", sortable=y)}
liste|catégorie|lien|et/ou |tout ce que|tu veux|y voir
liste|catégorie|lien|et/ou |tout ce que|tu veux|y voir
{FANCYTABLE}

{FANCYTABLE(head="la|même|en|tableau|simple", sortable=n)}
lien|et/ou |tout ce que|tu veux|y voir
lien|et/ou |tout ce que|tu veux|y voir
{FANCYTABLE}

Créer des colonnes de texte - SPLIT

Très pratique pour écrire plusieurs colonnes de texte. On utilise la balise {SPLIT}. On peut définir la largeur des colonnes en pixels en utilisant l'attribut colsize. L'exemple ci-dessous propose de créer 2 colonnes de 150 et 50 pixels de large.

{SPLIT(colsize=>150|50)}Ce texte est dans la première colonne de taille 150. --- Ce texte est dans la deuxième colonne de taille 50.{SPLIT}

Ce texte est dans la première colonne de taille 150. Ce texte est dans la deuxième colonne de taille 50.

Définitions

Il existe de la syntaxe pour les définitions. Tiki nous offre 2 manières de procéder. Une rapide et simple et une un peu plus complexe.

La simple :

;Terme 1 à définir:Définition du terme 1 ;Terme 2 à définir:Définition du terme 2

Terme 1 à définir Définition du terme 1 Terme 2 à définir Définition du terme 2

Si le même terme possède plusieurs définitions utilisez alors plutôt :

La complexe :

Elle s'écrit et s'affiche comme suit : (DL = definition list)

Terme à définir Première définition du terme Deuxième définition du terme

Terme à définir Première définition du terme Deuxième définition du terme

Images

Une fois que vous aurez fait une belle image, il vous faudra l'envoyer sur le site et l'intégrer dans votre page, voici des consignes et explications.

Charger une image

Pour charger une image, les principes de base sont expliqués sur cette page. Il est simplement rappelé qu'il faut utiliser le bouton "image" dans la barre d'édition, qui créera une balise de la forme {IMG(fileId="ID de votre image")}{IMG} avec un certains nombre d'autres arguments/options.

Quelques options a considérer :

• vignette (thumb)
  • popup : possibilité de cliquer sur l'image la voir dans un nouvel onglet en plein écran (thumb="popup")
• largeur de l'image (width)
  Il est préférable, dans le cas de grosses images, de limiter leur largeur dans la page, quitte à devoir recourir à l'option "vignette" en complément pour un zoom plus détaillé.
  400 (pixels) est une valeur encouragée, 600 une limite maximum. (width="400")
• caption (desc)
  Description/légende affichée en dessous de l'image (desc="ma photo de studio")

Exemple de rendu de code avec ces différentes options :
{IMG(fileId="XXX","thumb="popup",width="400",desc="ma photo de studio")}{IMG}

Liens

Liens internes

On en a déjà parlé ici mais maintenant place aux subtilités. On rappelle qu'un lien est dit interne si il pointe vers une page qui fait partie de linuxMao.org. D'ailleurs lorsque le lien est interne, il s'affiche en orange.

Pour comprendre le fonctionnement des liens internes, il faut observer l'URL de la page que l'on souhaite linker. Prenons pour exemple cette page :

l'adresse se décompose en trois parties importantes :

• La partie en vert correspond à l'adresse du site
• Celle en bleu à la partie du site concernée, cela peut être un wiki, un forum, une FAQ...
• La dernière partie en rouge correspond ici au nom de la page wiki

Lien sur la page elle même

Il est très facile de faire un lien rapide sur une page wiki, il suffit de mettre son nom entre des doubles parenthèses comme ceci : ((GlossaireA))
résultat : GlossaireA

Pour le rendre plus joli à la lecture, on peut rajouter une barre verticale et changer le nom affiché par le lien comme ceci :
((GlossaireA|Page A du glossaire))
résultat : Page A du glossaire

On peut aussi linker de manière équivalente une page du wiki en utilisant les deux dernières parties de l'url, mais cette fois-ci on utilisera les crochets.
Par exemple [tiki-index.php?page=GlossaireA] donne tiki-index.php?page=GlossaireA.
En changeant le nom visible du lien : [tiki-index.php?page=GlossaireA|Page A du glossaire] donne Page A du glossaire.
Cette technique n'est pas très intéressante pour linker sur des pages du wiki, mais elle peut être utilisée pour autre chose, comme le forum par exemple.
Ainsi le fil de forum a l'adresse http://www.linuxmao.org/tikiwiki/tiki-view_forum_thread.php?comments_parentId=17549&forumId=28
se linkera ainsi :
[tiki-view_forum_thread.php?comments_parentId=17549&forumId=28]
ou ainsi :
[tiki-view_forum_thread.php?comments_parentId=17549&forumId=28|mon fil de forum]
ce qui donne :
mon fil de forum

Lien sur un paragraphe

Vous souhaitez peut être que votre lien n'envoie pas au début d'une page, mais sur un endroit/paragraphe en particulier ? Pas de problème, vous l'aurez constaté, TikiWiki est très complet, c'est possible !

Cet endroit particulier sur lequel vous voulez renvoyer votre lien s'appelle un point d'ancrage. Pour pouvoir arriver à vos fins, il vous faut d'abord le définir et connaitre son nom, il existe pour cela deux alternatives :

• les titres
  Vous avez déjà appris comment créer un titre dans une page, avec le caractère ! en début de ligne. Chaque titre crée automatiquement un point d'ancrage dont le nom est le titre du paragraphe lui-même. Par exemple, vous êtes en ce moment en train de lire le sous-sous-paragraphe "Lien sur un paragraphe"
• la balise "ANAME"
  Vous pouvez aussi définir un point d'ancrage partout ailleurs dans une page. Pour cela, insérez dans le code de la page à l'endroit voulu une balise du type ANAME. La syntaxe a utiliser est la suivante {ANAME()}mon point d'ancrage{ANAME}. Cette balise est invisible à la lecture de la page, et à pour nom "mon point d'ancrage"

Maintenant, comment créer un lien renvoyant à votre point d'ancrage ? Rien de plus facile ! Vous venez d'apprendre qu'un lien sur une page wiki a la forme ((ma page)) ou même ((ma page|nom affiché)).
Un lien sur un point d'ancrage a une forme similaire :
((ma page|#mon point d'ancrage)) ou alors ((ma page|#mon point d'ancrage|nom affiché))
(notez le # avant le nom du point d'ancrage).

Exemple :
Le lien suivant va renvoyer sur la page "SITE_fonctionnement_wiki_editer_expert" (la page que vous lisez en ce moment même), au point d'ancrage "Lien sur un paragraphe" (la section qui porte ce titre est celle que vous lisez en ce moment même).
Ce code
((SITE_fonctionnement_wiki_editer_expert|#Lien sur un paragraphe))
donnera
SITE_fonctionnement_wiki_editer_expert.

En modifiant le nom visible du lien, ce code
((SITE_fonctionnement_wiki_editer_expert|#Lien sur un paragraphe|mon paragraphe))
donnera
mon paragraphe.



Il existe une deuxième manière de créer un lien sur un point d'ancrage. On peut pour cela utiliser la balise {ALINK()} (généralement utilisée avec la balise "ANAME" dont je vient de parler).
Elle s'utilise de la manière suivante :

{ALINK(aname=nom du point d'ancrage,pagename=nom de la page)}nom visible du lien{ALINK}

Pour cet exemple, j'ai créé en bas de page un point d'ancrage dont le code est
{ANAME()}bas de page{ANAME}.
La balise {ALINK()} correspondante sera donc {ALINK(aname=bas de page,pagename=SITE_fonctionnement_wiki_editer_expert)}cliquez pour essayer{ALINK}
qui donne cliquez pour essayer.

Dans le cas où le lien et le point d'ancrage sont sur la même page, vous pouvez même omettre le nom de page :
{ALINK(aname=bas de page)}cliquez pour essayer{ALINK}.

Méthode alternative :
Dans le cas ou le paragraphe à linker est dans la même page que le lien, on peut écrire :
[#Lien_sur_un_paragraphe|Lien sur un paragraphe] ? Lien sur un paragraphe
Liens spéciaux :
[#tiki-top|retour en haut de page] (barre de menu incluse) ? retour en haut de page
[#top|retour en haut de page] (barre de menu non-incluse) ? retour en haut de page
[#toc|retour au sommaire] ? retour au sommaire

Liens externes

Pour les liens externes, ce n'est pas beaucoup plus compliqué. Il faut mettre l'adresse du lien entre crochets, soit [http://www.ubuntu-fr.org] donne http://www.ubuntu-fr.org. Les liens externes s'affichent eux en bleu.

ATTENTION : il y a une petite subtilité. Si l'adresse du lien commence par http:// alors TikiWiki comprend qu'il s'agit d'un lien externe et l'interprète comme tel. En revanche si l'adresse ne commence pas par http:// alors TikiWiki peut l'interpréter de trois manières :

• comme du texte, si l'adresse n'est pas entourée de crochets,
• comme un lien interne si l'adresse est entourée de crochets,
• comme un lien externe si l'adresse commence par www.

Quelques exemples :

http://jamin.sourceforge.net/en/about.html

http://jamin.sourceforge.net/en/about.html : lien externe

[http://jamin.sourceforge.net/en/about.html]

http://jamin.sourceforge.net/en/about.html : lien externe

jamin.sourceforge.net/en/about.html

jamin.sourceforge.net/en/about.html : texte brut

[jamin.sourceforge.net/en/about.html]

jamin.sourceforge.net/en/about.html : lien interne

www.ubuntu-fr.org

www.ubuntu-fr.org : lien externe

[www.ubuntu-fr.org]

www.ubuntu-fr.org : lien interne

Les liens externes s'affichent en bleu et les liens internes s'affichent en orange. Vous pouvez constater qu'il y a parfois des confusions dans l'interprétation par TikiWiki. En fait, on peut carrément dire que c'est le bordel !

Renommer les liens

Il est parfois intéressant de renommer un lien surtout s'il est long. On peut alors créer un alias. Cela fonctionne avec les liens internes et les liens externes. Il faut pour cela utiliser la balise | (barre verticale). Entre les doubles parenthèses ou les crochets, on écrit adresse_du_lien|alias.
Donc :

• avec les crochets : [http://www.ubuntu-fr.org|notre site préféré après linuxMao] donnera le lien vers notre site préféré après linuxMao.
• ou avec les double-parenthèses : ((jack|notre serveur son préféré)) donnera le lien vers notre serveur son préféré.

À noter : si l'adresse vers laquelle le lien doit pointer contient le caractère | (barre verticale), alors vous allez avoir un problème ! Pour le contourner, vous devez remplacer ce caractère par son code html qui est %7C. Par exemple l'adresse http://fr.audiofanzine.com/carte-son-externe/alesis/iO|2 contient une barre verticale (avant-dernier caractère). Voici son comportement :

• sans remplacer la barre verticale :
  [http://fr.audiofanzine.com/carte-son-externe/alesis/iO|2] donne 2
• en remplaçant la barre verticale :
  [http://fr.audiofanzine.com/carte-son-externe/alesis/iO%7C2] donne http://fr.audiofanzine.com/carte-son-externe/alesis/iO%7C2

On constate que le lien ne pointe pas vers la même page.
De la même manière, certains liens comportant des accents et autres caractères spéciaux ne fonctionnent pas correctement avec certains modules (vu avec les images en page d'accueil), il faut alors encoder les caractères litigieux.

On peut trouver un encodeur d'url sur la page http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

Divers

Pour aller encore plus loin

Pour d'autres astuces d'édition, vous pouvez aller voir sur la documentation officielle de TikiWiki. En particulier :

• la syntaxe des listes,
• la mise en forme du texte.

Et de manière plus générale, la documentation des fonctionnalités.

Mais normalement avec ce que vous venez de lire, vous devriez pouvoir écrire intégralement ce petit tutoriel. En effet tout ce que vous y avez lu y est mis en œuvre !







Si vous vous posez une question à propos de ceci, rendez-vous dans le forum : "Le site : philosophie, organisation, problèmes, ..." afin de discuter ensemble.

D'autre part, cette page est verrouillée à l'écriture et est modifiable uniquement par les administrateurs de LinuxMAO. Si vous pensez que quelque chose devrait y figurer ou bien, si quelque chose n'est pas clair et que ça mérite ré-écriture ou alors, si vous voyez une faute, ou que-sais-je-encore, ... etc, vous pouvez laisser un commentaire en bas de la page.



Bienvenue en bas de page ! Ce bas de page sert d'exemple pour la description des liens internes. Si vous souhaitez remonter au paragraphe sur les liens interne, cliquez ICI.