Accueil ›
Fiches pratiques ›
Internet ›
CommentCaMarche ›
FAQ ›
Mise en forme des articles de la base de connaissance

Mise en forme des articles de la base de connaissance

Publié par teutates - Dernière mise à jour le 5 février 2010 à 15:34 par CCMclaude

La base de connaissances de CommentCaMarche (nommée aussi KB, FAQ ou Astuces) utilise une mise en forme de type Wiki.

Voici les possibilités qu'elle offre sur un plan syntaxique :

1 - Les titres

Le titre général est placé entre deux signes "égal" ("="). Il est utilisé uniquement pour le titre de l'astuce.
Le titre de niveau 1 est placé entre deux doubles signes "égal" ("==").
Le titre de niveau 2 est placé entre deux triples signes "égal" ("===").
.. etc ...

Remarques :

La numérotation (1, 1.1, 1.1.1, 1.1.2, 1.2, 1.3, 2 ....) est à indiquer manuellement (facultativement). Elle fait partie du nom du titre ;
Ne pas donner les mêmes noms aux titres et sous-titres, cela peut poser des problèmes pour la table des matières ;
N'inclure aucun lien dans les titres ni les sous-titres pour la même raison.

1.1 - Exemple

=Titre de niveau1=

==Titre de niveau2==

=====Titre de niveau5=====

2 - Les listes

* Puce niveau 1  


*

 Puce niveau 2  
 Puce niveau 3

Notez qu'il est déconseillé de commencer par une puce de niveau 2, car l'affichage sera précédé d'une puce de niveau 1 vide ! Par ailleurs, veillez à ne pas sauter de niveaux entre chaque item pour les mêmes raisons.

2.1 - Exemple conseillé

*Test1  

Test2  
*Test2.1  
*Test2.2  
**Test2.2.1  
**Test2.2.2  
*Test2.3  
**Test2.3.1  
***Test2.3.1.1  
*Test2.4  
*Test2.5  
Test3  
Test4

2.1.1 - Résultat

Test1
Test2
- Test2.1
- Test2.2
  - Test2.2.1
  - Test2.2.2
- Test2.3
  - Test2.3.1
    - Test2.3.1.1
  - Test2.4
  - Test2.5
Test3
Test4

2.2 - Exemples déconseillés

2.2.1 - Commencer par un niveau différent de 1

2.2.1.1 - Exemple

****Exemple

2.2.1.2 - Résultat

- - - Exemple

2.2.2 - Sauter des niveaux de puce

2.2.2.1 - Exemple

*Test1  

Test2  
**Test2.1.1  
Test3

2.2.2.2 - Résultat

Test1
Test2
- - Test2.1.1
Test3

3 - La table des matières

Le mot-clé TOC en majuscules et placé entre deux doubles underscores crée automatiquement la table des matières (incluant des liens vers les sous-parties de l'article).

__TOC__

Remarques : Veillez à :

Placer la table des matières entre le titre général de l'astuce (niveau 1) et le premier titre secondaire (niveau 2)
Ne pas laisser trop de retours chariot (à la ligne) entre la table des matières et le corps de l'astuce ainsi qu'entre les différents niveaux de titres car ceux-ci engendrent un mauvais affichage de la table.

4 - Les liens

Pour créer un lien, il suffit d'utiliser la syntaxe suivante :

[url texte_du_lien]

Il est important de laisser un espace entre l'URL et le texte. Si aucun texte n'est indiqué, l'URL sera utilisée comme texte.

4.1 - Lien rapide

Par ailleurs, vous pouvez faire un lien direct vers un article en utilisant la syntaxe suivante :

[/contents/web/referencement.php3 Mot clé]

Par exemple :

[/contents/pc/carte-mere.php3 carte mère]

créera automatiquement un lien vers l'article sur la carte mère.

4.2 - Autres liens

Insérer lien hypertexte : utiliser la fonction pour chercher une astuce, article, logiciel ou un produit rapidement. Le lien sera mis automatiquement dans le message.
Insérer lien dynamique [/ CCM] : remplace le mot sélectionné par le lien hypertexte le plus approprié au mot sélectionné. Cette fonction est équivalente au double crochets.

5 - Les ancres

L'ancre est constituée par le titre de niveau 1 ou 2 et le nom de cette ancre reprend le nom du titre en minuscules, sans accent, sans caractères spéciaux et sans espace.

[/faq/#ancre-vers-le-titre-1-ou-2 ancre vers le titre 1 ou 2]

Noter que la syntaxe exacte est de placer entre crochet ("[]") :

le symbole dièse ("#")
suivi immédiatement du nom du titre ou sous titre (sans espace entre les deux)
suivi d'un espace
terminé par le texte visible du lien vers l'ancre.

Il faut donc :

n'utiliser que des minuscules et des lettres sans accent,
ne pas ponctuer,
remplacer les espaces par des "-",
ne pas placer de liens dans les titres et sous titres

Ainsi :

Pas de "( )",
Les " ' " sont remplacées par des " - ",
Les "ç" sont remplacées par des "c",
"1 - titre" devient "#1-titre"

Remarque :

Ancrez futé ! SI vous devez placer un lien dans une astuce vers un titre ou un sous-titre, ne composez pas le lien à la main, insérez la table des matières, prévisualisez votre astuce (bouton "prévisualiser"), faites un clic droit sur le titre qui sera la cible puis copiez l'URL et collez-la.

Collez l'adresse à l'endroit où vous souhaitez insérer votre lien puis supprimez tout ce qu'il y a à partir de http jusqu'au dièse non-compris, par exemple :

[/faq/sujet-5924-mise-en-forme-des-articles-de-la-base-de-connaissance#5-les-ancres ceci est le nom de mon lien]

devient :

ceci est le nom de mon lien

6 - Les images

6.1 - Ajouter une image

Vous avez trois possibilités :

Manuellement : Il suffit de suivre la syntaxe suivante :
```
[Image: url_de_l_image]
```
Via le bouton Insérer Image si votre image est déjà hébergée sur le Web ;
Via le champs Charger une image si votre image est présente sur votre disque dur (par exemple une capture d'écran) : utiliser les boutons Parcourir. Après avoir cliqué sur Charger, l'image sera uploadée sur CommentCaMarche ; et le code de l'image sera inséré complètement à la fin de l'astuce. Vous n'avez plus qu'à le couper/coller pour placer l'image à l'endroit désiré dans l'astuce.

Pour plus d'informations sur les images de la FAQ : Insérer une image dans la FAQ
Voir également ici : Insérer une image dans une discussion

6.2 - Ajouter une image cliquable

En effet, cela pourrait être utile si on a besoin d'agrandir l'image et la regarder ces détails. La balise à introduire et la suivante :

[url_de_l'image [Image: url_de_l'image]]

Il est préférable d'indiquer l'URL originale de l'image pour éviter que l'image soit redimensionnée automatiquement.

6.3 - Attributs

Il est possible d'y adjoindre des attributs supplémentaires, pouvant être cumulés. Les attributs sont séparés par le signe "|" (AltGr+6). Les attributs peuvent être mis dans n'importe quel ordre mais l'attribut ALT doit toujours être le dernier.

6.4 - Liste des attributs

Positionnement de l'image à gauche :
```
[[url-de-l-image|left]]
```
Positionnement de l'image à droite :
```
[[url-de-l-image|right]]
```
Positionnement de l'image centré (par défaut) :
```
[[url-de-l-image|center]]
```
Redimensionnement de l'image (en pixels) :
```
[[[url-de-l-image|123px]]]
```
Attribut ALT de l'image, il s'agit du dernier attribut avant le crochet :
```
[[url-de-l-image|texte]]
```

7 - Balises Code, Gras, Italique et Souligné

Pour ces balises, il suffit de sélectionner le texte que vous vouliez changer sa mise en forme et de cliquer sur l'un des boutons à cet effet en haut de la zone d'édition :

7.1 Code

Avec cette balise, l'indentation est préservée et le texte est mis en bleu :

<code>Code</code>

Donne :

Code

À noter que contrairement aux autres balises, la balise Code se met automatiquement à la ligne et met tous ce qu'il y a après lui également à la ligne. Par exemple :

Ceci est un test de la balise <code>Code</code> retour automatique à la ligne

Donne :

Ceci est un test de la balise