Go to content Go to navigation Go to search
  1. Un mini-tutorial sur TextPattern
  2. Du nouveau sur les images
  3. Le système de page de TextPattern
  4. Affichage de la date
  5. Changer la première page d'un site
  6. Changer le style de la page d'accueil
  7. Modifier l'ordre d'affichage des articles
  8. Afficher un résumé et un lien "Lire la suite"
  9. Ajouter un menu vers les articles
  10. فدى فدى فدى TextPattern et la langue arabe

Un mini-tutorial sur TextPattern ·
Publié le 8 octobre 2006 par Pat Biker

Ce mini-tutorial est “un travail en cours” (“a work in progress” comme disent les anglais) concernant la mise en oeuvre du logiciel “TextPattern”. Je découvre moi-même TextPattern et je consignerai ici mes notes de route.

TextPattern est un CMS ce qui ne renseigne pas beaucoup le lecteur français, et même assez peu l’anglophone. Ce “Système de Gestion de Contenu” permet de gérer le contenu d’un site Internet (par exemple un blog, mais pas seulement). Les pages du site sont entièrement dynamiques. Il faut comprendre par là qu’elles n’existent pas en tant que fichiers (site statique). Les pages sont construites à la volée par Textpattern à partir d’un contenu mémorisé dans une base de données. Pour remplir cette base de données, vous utilisez TextPattern.

Résumé

Disposant d’un hébergement internet avec PHP+MYSQL (comme chez free par exemple), vous installez TextPattern sur votre site.

Il y a une petit travail d’administration qui va consister à définir qui est autorisé à modifier le site (vous sans doute), qui peut écrire des articles (vous encore, mais aussi éventuellement d’autres personnes), quel sera l’aspect des articles, si le visiteur du site pourra laisser des commentaires, etc.

Vient ensuite l’utilisation de routine, vous (et éventuellement d’autres personnes autorisées) entrez le contenu du site.

Il n’est pas nécessaire de connaitre HTML. Pour saisir un article, vous entrez du texte brut. Il est possible d’utiliser un codage simple afin de formatter certaines parties du texte. Par exemple, si dans une phrase un mot est encadré par deux astérisques, alors ce mot apparaîtra en gras dans le site.

Pour en savoir plus sur le formattage du texte, consultez ce site : http://hobix.com/textile/ .

Installation

L’installation est assez simple : télécharger, dézipper, copier sur le site, créer la database MySQL et lancer.

La procédure d’installation est détaillée ici.

Téléchargement

Pour réaliser l’installation, commencez par télécharger le fichier ZIP depuis le site http://textpattern.com/download . C’est un fichier de taille modeste (< 300 Ko) et c’est plutôt bon signe.

Décompactage

L’étape suivante, vous l’avez deviné consiste à dézipper ce fichier (dans l’explorateur de Windows, clic droit sur le fichier puis “Extraire tout”).

La décompression du fichier génère un répertoire nommé “TextPattern” plus le numéro de version, par exemple “textpattern-4.0.3”.

Déploiement sur le site

Le contenu de ce répertoire (mais pas le répertoire lui-même) est à copier sur votre site internet. Idéalement c’est à la racine du site que tout doit être installé mais il est possible d’utiliser un sous-répertoire. Cela marche très bien dans les deux cas. Mais utiliser un sous-répertoire peut vous compliquer la vie, par exemple pour installer un “template”.

Un “template” ou modèle permet de changer l’aspect de tout votre site. Il suffit d’installer le nouveau template et de l’activer pour modifier d’un coup tout l’aspect du site (couleur, dimension, disposition).

Création d’une database MySQL

C’est la dernière étape avant de lancer le site. Vous disposez sans doute de PHPMyAdmin (ou d’un outil similaire) pour créer la database. Le nom de cette database est quelconque.

Si vous êtes hébergé chez free, vous ne pouvez pas créer de database mais free vous a déjà alloué une database. Utilisez celle-ci.

Premier lancement

Pour mes tests, j’ai installé Apache, PHP et MySQL sur ma machine. C’est extrêmement simple avec un package tel que ZAMP ou WAMP (http://www.wampserver.com/). Tous les fichiers ont été copié dans un sous-répertoire, appelé /site/. Pour le premier lancement, j’ai donc entré l’adresse suivante dans mon navigateur préféré (Firefox, what else ?) :

http://localhost/site/

Le résultat obtenu n’est pas une erreur, mais on s’y croirait. Le message indique simplement que l’installation n’est pas encore faite et que pour la faire, il faut rajouter à l’adresse /textpattern/setup/

config.php is not ok or not found. If you would like to install, go to /subdir/textpattern/setup/

Dans mon cas, la bonne adresse est donc http://localhost/site/textpattern/setup/ et j’arrive sur un premier écran en anglais.

Les premiers écrans de l’installation de TextPattern Le tout premier écran me dit bonjour et me demande de choisir une langue pour le site. Il faut dérouler la combobox et choisir “français” puis cliquer sur le bouton [SUBMIT].

Le premier écran de TextPattern

Le deuxième écran est heureusement en français. Il est de plus pré-rempli. Les seules informations à saisir concernent MySQL (utilisateur, mot de passe, nom de la database, ...).

Le troisième écran vous demande de créer un fichier config.php et de la placer dans le sous-répertoire textpattern. Le contenu de ce fichier est affiché à l’écran. Quand c’est fait, cliquez sur le bouton [c’est fait].

Sur le quatrième écran, vous vous identifiez. C’est là que vous décidez du nom et du mot de passe de l’administrateur du site.

Le cinquième écran vous dit “bravo!”. L’installation est terminée, l’administration du site peut commencer.

Le site fonctionne

Vous devez être impatient, comme moi, de voir le site tourner. N’attendez pas. Le site fonctionne déjà. Il contient un article, supposé écrit par l’administrateur.

Pour voir le site, entrez l’adresse de votre site si TextPattern est installé à la racine, ou bien l’adresse de votre site suivi du nom du sous-répertoire dans lequel est installé TextPattern. Dans mon cas, la bonne adresse est donc http://localhost/site/ .

Cette première page ressemble vaguement à un blog. Je vous invite à saisir un commentaire. Quand c’est fait, le message suivant apparaît.

Commentaire publié, merci de votre participation. Votre commentaire est en attente de validation ; il sera visible après vérification.

Reste à découvrir dans l’interface d’administration comment le valider.

A ce stade là, ma tête bouillonne. Milles questions me viennent à l’esprit :

Petit nettoyage

A ce stade, un petit nettoyage est conseillé. En effet la partie /setup/ du sous-répertoire textpattern n’est plus utile. Vous pouvez supprimer le sous-répertoire ce /setup/.

Administration du site

C’est dans l’administration du site que nous allons trouver les réponses (je l’espère) à toutes les questions posées dans la partie précédente.

Adresse d’administration

Si votre site est accessible avec l’adresse http://quelque-chose/ alors l’administration du site est accessible à l’adresse http://quelque-chose/textpattern/ .

L’onglet administration

L’interface d’administration est sobre et claire. En haut sont visibles quatre onglets : contenu, présentation, administration et voir le site. Ce dernier n’est pas vraiment un onglet, c’est juste un bouton pour lancer le site.

Dans l’onglet administration, cliquez sur diagnostic. Si vous n’avez pas encore supprimé le sous-répertoire /setup/, cette page vous le rappelera.

Dans l’onglet préférence, vous pouvez entrer le nom du site. Nous avons vu que ce nom était affiché sur la première page.

Réponses aux questions

Comment modifier ou supprimer le premier article ?

Le premier article est accessible dans l’onglet “contenu .. article”. On peut en modifier le titre et le contenu, mais pas l’auteur qui est “textpattern”. Je vais donc supprimer cet article pour en recréer un nouveau.

Comment saisir un nouvel article ?

La saisie d’un article est réalisée dans l’onglet “contenu .. rédiger”.

Comment insérer une image ?

L’image à afficher doit avoir été copiée sur le site. Il suffit ensuite de saisir l’adresse de l’image avec un point d’exclamation devant et derrière, par exemple !./images/premier-ecran.jpg!

Comment valider un commentaire ?

Il suffit d’aller dans l’onglet contenu .. commentaires. Les commentaires postés sont affichés. Une combobox permet de supprimer ou de rendre visible le commentaire.

Questions en suspens

C’est quoi le slogan du site qui apparaît en style h2 sous le titre de la page.

C’est quoi le statut de production dans les préférences du site dans l’onglet administration.

Comment afficher des caractéres interprétés par Textile ? par exemple comment afficher un mot encadré par des *astérisques* ?

Le forum m’a fourni la bonne réponse. il faut utiliser l’entité html &#42 ; (sans l’espace avant le point virgule).

Spécial free.fr

J’ai installé TextPattern exactement comme décrit dans ce tutorial avec juste une exception. J’ai supprimé le fichier .htaccess. En effet, tant que celui-ci était présent, j’obtenais une erreur HTTP500 .

Après tout a fonctionné comme un charme, sauf que dans l’onglet administration .. diagnostic, j’avais un avertissement sur l’absence du fichier .htaccess .

Pour résoudre ce problème, dans les préférences du site, il faut sélectionner “format des URLs brutes”.

Commentaire

Du nouveau sur les images ·
Publié le 11 octobre 2006 par Pat Biker

Je découvre petit à petit le système TextPattern. Le système de gestion des images est intérressant.

Des images centralisées

Quand on a besoin d’images pour illustrer un article, on peut utiliser l’onglet contenu .. images.

onglet contenu-image

Dans le forum sur TextPattern, dans la partie française, j’ai trouvé une info importante concernant les images: un plugin automatisant l’insertion d’image. Quand ce plugin est installé, un nouveau bouton apparaît dans la partie contenu .. rédiger et permet d’intégrer une image dans le texte.

Le bouton [insert-image] ajouté par le plugin.
bouton insert-image

Lien de téléchargement du plugin

Plusieurs possibilité d’insertion d’image

Le plugin permet d’ajouter des images de différentes manières. En fait c’est la code inséré dans l’article qui va changer.

insertion de type image

Le code inséré dans l’article ressemble à ceci <txp:image id=”4” class=”image” > . C’est une référence à l’image qui est utilisée. L’avantage est qui si l’image est modifiée, l’article est mis à jour immédiatement. On remarque que le nom de l’image n’apparaît. L’identifiant (id=) permet à TextPattern de retrouver l’image. L’inconvénient de cette méthode est que l’image n’apparaît pas en aperçu (preview).

insertion de type Textile

C’est un lien au format Textile qui est utilisé : !http://aaa.windev.free.fr/cms/images/5.jpg(Activation du plugin)!

L’avantage est que l’image est visible en aperçu (preview)). L’inconvénient est qu’on utilise un lien direct vers l’image ce qui peut être gênant si le site déménage.

insertion de type XHTML

C’est la code XHTML qui est inséré directement. <img src=”http://aaa.windev.free.fr/cms/images/2.jpg” class=”image” width=”381” height=”190” alt=”onglet contenu-image” title=”Cet onglet permet de télécharger une image pour un article.” />.

Ajouter un plugin

Ajouter un plugin dans TextPattern est très simple. Le plugin est un simple fichier texte. Il suffit de copier le texte du plugin dans le champ prévu à cet effet. Une fois le plugin chargé, il faut penser à l’activer.

Activation du plugin

Commentaire

Le système de page de TextPattern ·
Publié le 12 octobre 2006 par Pat Biker

Le modèle sémantique de TextPattern

Je crois que certains auteurs ont voulu cacher leur incompréhension de TextPattern derrière ce terme de modèle sémantique. Je commence à percevoir la puissance de TextPattern et je trouve vraiment dommage de ne pas avoir trouvé une documentation claire sur le sujet.

En effet la documentation parle beaucoup de section, catégorie, gabarit et autres étrangetés. Le novice, de son coté, voit un site internet comme un ensemble de pages reliées entre elles.

Une approche pragmatique

Je me pose une grande question alors : comment faire un site TextPattern avec une première page – page d’accueil – affichant quelques informations – des news par exemple – mais surtout des liens vers d’autres pages du site.

Découverte par expérimentation

J’ai expérimenté une manière de procéder (est-ce la seule ?) . Pour chacune des pages, sauf la page d’accueil, j’ai créé une section. Par exemple, une section WinDev et une section WebDev.

Ensuite pour chaque article créé, je choisis la section WinDev ou la section WebDev. Nous pouvons le vérifier dans la partie “présentation section”.

So far, so good

Mais quand le site s’affiche, tous les articles s’affichent. Ce dernier problème peut se régler aisément. Dans “présentation .. section”, il suffit de préciser pour la section souhaitée (ici les sections WinDev et WebDev) “Sur la page d’accueil = non”.

“So far, so good” sauf que mes articles n’apparaissent plus du tout. La page d’accueil n’affiche que les autres articles. Ce que je voudrais maintenant, c’est un lien permettant d’aller sur mes pages WinDev et WebDev.

Modification du gabarit “default”

La solution à ce problème est trouvée dans la partie “présentation .. gabarit”, mais d’abord réalisons une petite expérience.

Dans “présentation .. gabarit”, avec le gabarit “default” sélectionné, ajoutez le code suivant dans la partie head juste avant la balise de fermeture du div.

<p>Gabarit défault </p>

Lancez le site, vous devez voir Gabarit défaut sur cette page. Conclusion la page d’accueil est formatée avec le gabarit “default”.

Modifions encore ce gabarit, pour ajouter la liste des sections. Cela se fait très facilement avec un tag spécial de TextPattern.

Dans la partie sidebar-1, au dessous de la ligne linklist ajoutez la ligne :

<txp:section_list wraptag=”p” /p>

Magique, en dessous des liens TextBook, Textpattern, Txp Resources, nous voyons des liens :

Maintenant en cliquant sur le lien WinDev, on accède à la page WinDev. Cette page utilise la même présentation que la page d’accueil, car nous voyons le texte “Gabarit défaut”.

Création de gabarit

Pour modifier la présentation des pages WinDev et WebDev, il doit être possible de créer pour chacune un nouveau gabarit.

Pour commencer, il suffit d’enregistrer le gabarit “default” en changeant le nom. C’est réalisé facilement avec la zone de saisie en bas de la page “Enregistrer le gabarit sous le nom” et le bouton “Copier”.

Questions annexes

Un article d’une section non affichée en page d’accueil peut-il être forcé à aller sur la page d’accueil quand même ?

Commentaire

Affichage de la date ·
Publié le 13 octobre 2006 par Pat Biker

Grâce au forum français, j’ai pu régler un petit problème d’affichage de date. Désormais les articles publiés ici sont affiché avec la date sous le titre de la manière suivante :

Publié le 12 octobre 2006 par Pat Biker

Pour obtenir ce résultat, j’ai modifié le module Article dans présentation .. module. Au niveau du tag txp:format, j’ai ajouté un format d’affichage au standard strftime.

<txp:posted format=”%e %B %Y” />

Lien vers la description du format strftime

Note: en encadrant un texte avec == on peut écrire du code qui ne sera pas interprété par Textile, comme par exemple <txp:linklist wraptag="p" />.

Même chose en encadrant le contenu avec le symbole @ comme ceci.

<txp:posted format=”%e %B %Y” />

Commentaire

Changer la première page d'un site ·
Publié le 20 octobre 2006 par Pat Biker

Pour changer l’aspect de la première page (appelons-la page d’accueil) :

Dans Présentation .. gabarits

Dans Présentation .. section

Changer le style de la page d'accueil ·
Publié le 20 octobre 2006 par Pat Biker

Pour changer le style de la page d’accueil :

Dans Présentation .. Styles

Modifier l'ordre d'affichage des articles ·
Publié le 20 octobre 2006 par Pat Biker

Pour modifier l’ordre dans lequel sont affichés les articles, on peut utiliser l’attribut sortdir dans le tag txp:article ou dans le tag txt:article_custom .

L’ordre d’affichage par défaut est descendant, l’article le plus récent est affiché en premier. Dans un tutorial comme celui-ci, il est préférable de consulter les articles dans l’ordre où il on été écrit. C’est donc le plus ancien qui est affiché en premier.

Il faut donc écrire quelquechose comme

<txp:article sortdir="asc" />

Afficher un résumé et un lien "Lire la suite" ·
Publié le 20 octobre 2006 par Pat Biker

Dans de nombreux sites d’informations, la page d’accueil affiche juste un résumé de l’article puis un lien “Lire la suite”.

Il est possible d’obtenir cette présentation dans Textpattern. 


    <txp:if_article_list>
      <! -- list page: display the short version -- >
      <txp:excerpt />
      <txp:permlink>read more</txp:permlink>
    </txp:else />
      <! -- article page: display the complete article -- >
      <txp:excerpt />
      <txp:body />
    </txp:if_article_list>

Explication du code

La page d’Accueil affiche les articles en mode LISTE. Cela signifie simplement que les articles vont apparatre les uns au dessous des autres, donc en liste.

Dans d’autres circonstances, Textpattern permet de n’afficher qu’un seul article. C’est le cas avec un lien qui se termine par index.php?id=numro_de_l_article .

le tag <txp:if_article_list> permet de savoir si la page courante est en mode LISTE ou non. Le reste est évident.

En mode LISTE, on affiche juste le résumé avec le tag <txp:excerpt /> puis un lien vers l’article avec le tag <txp:permlink> .

Dans les autres cas, on affiche le résumé puis le corps de l’article (<txp:body />).

Tags conditionnels

D’autres tags conditionnels existent pour les articles. Il est par exemple possible de distinguer :

Ajouter un menu vers les articles ·
Publié le 24 novembre 2006 par Pat Biker

La technique suivante permet d’ajouter un menu au début d’une page liste. Le menu permet de se déplacer dans la page vers le début d’un article.

Ajouter une ancre HTML à chaque titre d’article

Le début d’un article débute par défaut par un code HTML qui ressemble à ceci :

<h3><txp:title /></h3>

La première opération consiste à ajouter dans ce code un identifiant. Il faut pour cela modifier le module (form) associé à cet article.

<h3 id="article-<txp:article_id />"><txp:title /></h3>

Explication : on a construit un identifiant qui prendra les valeurs “article-1”, “article-2”, par exemple. Le nombre provient de l’identifiant de l’article. Cet identifiant est automatiquement généré par TextPattern. On récupère sa valeur avec le tag <txp:article_id /> .

Ajouter une liste de liens en début de page

C’est dans la gabarit de la section qu’il faut ajouter le code suivant dans le body.

<ul> <txp:article form="list" /> </ul>

Si on préfère une liste numérotée, il suffit de remplacer ul par ol.

Important : si les articles sont triés, le même tri doit être repris ici .

Créer le module “List”

Ce module (form) est très simple. Il décrit une ligne de liste.

<li><a href="#article-<txp:article_id />"><txp:title /></a></li>

Crédits

Cette technique a été décrite par Mary sur le forum anglais ici

فدى فدى فدى TextPattern et la langue arabe ·
Publié le 6 août 2007 par Pat Biker

Je me demande si TextPattern supporte l’arabe. Voici un test.

فدى
فدى
فدى