Utiliser TiddlyWiki comme un blog


#1

Salut tout le monde,

Je voulais partager avec vous une démonstration d’utilisation de TiddlyWiki pour créer un blog. L’idée est de pouvoir publier des articles simplement et rapidement. Il est aussi possible de regrouper les posts par catégories et par tags. C’est assez simple mais efficace.

La démo et le tuto sont disponible à l’adresse http://librenote.aerobatic.io/demo/tiddlyblog

A+


#2

Bonjour @svink, super !

Merci pour le partage de ce tuto :mortar_board:

Cela donne des idées pour l’améliorer, je pense à {{||PostTemplate}} qui devrait j’imagine pouvoir être ajouté automatiquement dans le template, et déplacer le mini howto au dessus du champ de saisie comme sur tw.com avec le message d’information pour contribuer ou informé que c’est un tiddler système (ou placé en bas ça existe aussi).
Ainsi il n’y aurait que le contenu à saisir pour l’utilisateur sans ce soucier de supprimer par erreur quelque chose ou d’en oublier.
Pour l’auteur j’imagine que c’est plutôt un usage mono-utilisateur, donc on doit pouvoir récupérer l’auteur par défaut du TW.

Nous avions pensé à TW pour le blog d’ici (que l’on utilise pas du coup pour l’instant blog.tiddlywiki.fr) et ce qui me manquait c’était le flux RSS. Je sais qu’il y a des ressources sur le sujet pour en générer un, j’avais essayé mais sans vraiment de succès…


#3

J’ai l’impression qu’il y a un bug sur le tiddler Archives, j’ai bien l’année 2015 qui s’affiche, mais aucune liste d’article du blog à afficher.
L’idéal serait sans doute de ne pas à avoir gérer cette date manuellement, mais d’utiliser un filtre sur la date du billet.


#4

Salut Sylvain et merci pour ce retour.

Pour le {{||PostTemplate}} c’est le seul moyen que j’ai trouvé pour utiliser un modèle mais dans l’idéal je préférerai avoir un tiddler vide. Si tu as des idées je suis preneur…

Pour les archives je viens de tester et ça marche. La partie blog affiche les 3 derniers tiddlers, si tu en créé un 4ème le premier post part aux archives. Effectivement il y a quelque chose de mieux à faire avec un filtre date.

Edit: Pour le flux RSS j’ai vu récemment ceci https://tobibeer.github.io/tb5/ donc c’est possible mais ça semble un poile compliqué… à creuser mais ça serait génial !

A+


#5

Yep, je l’ai vu effectivement chez Tobias, l’espoir est permis !

Pour {{||PostTemplate}} j’ai testé l’astuce que j’ai utilisé sur l’exemple de DatePicker, et ça semble bien fonctionner, puisque tu utilise un tag Blog que l’on peut donc identifier :

  1. Créer un tiddler $:/svink/ui/ViewTemplate/blog-entry par exemple
  2. le tagguer avec $:/tags/ViewTemplate
  3. Dans le contenu :
    <$list filter="[is[current]tag[Blog]]">
    {{||PostTemplate}}
    </$list>
  4. Ajouter le champ personnalisé list-after et mettre $:/core/ui/ViewTemplate/tags

Enjoy !


#6

Je viens de tester ton astuces et ça marche du tonnerre. Maintenant le modèle pour la rédaction des posts est “vide” à la rédaction mais quand tu valide le modèle est bien utilisé !

Merci beaucoup Sylvain.


#7

Bravo @svink. Super application de TW5.

J’aurais juste une petite question pour moi qui ne maitrise pas encore les subtilités des feuilles de style. Est-ce que ta feuille $/_Stylesheet pourrait être adaptée pour ne s’appliquer qu’aux tiddlers tagués d’un tag spécifique.

Merci.


#8

Salut phil,

C’est une bonne question, j’ai fait quelques tests mais sans succès.
Pour info, pour appliquer un style à un tag il faut utiliser div.tc-tagged-NomDuTag { paramètres; } dans la feuille de style mais là ça ne marche pas…
Il y a peut être un autre moyen de masquer le titre du tiddler.

A+


#9

@svink

Merci pour ta réponse. Je vois qu’on en est au même point.
Je continue de chercher et je posterai la solution.

Encore merci.


#10

Hello !

Je vois que le modèle avance @svink
Une évol possible serait sur la gestion de la catégorie. Je verrais bien une liste déroulante à côté des tag dans l’édition, plutôt que dans le champ. Je me suis demandé ce matin s’il était possible d’avoir la liste déroulante dans un champ personnalisé mais ça ne me dit rien.
Le seul post que j’ai retrouvé sur le sujet : Using a drop-down menu to set a variable or field value? et donc voir http://tiddlywiki.com/#SelectWidget.

@phil quel résultat souhaite-tu obtenir exactement ? Si j’applique un style sur un tag particulier, on peut faire comme sur TWCamp par exemple (http://paris.twcamp.info). On peut donc styliser un billet du blog appartement à un tag spécifique, par exemple :

.tc-tagged-Astuce {
background-color: #afdde9;
border-top: 1px solid #37abc8;
border-left: 1px solid #37abc8;
border-bottom: 1px solid #37abc8;
border-right: 1px solid #37abc8;
} 

Sinon tu as un exemple ?


#11

Bonjour @sylvain.

En fait je voudrais pouvoir faire disparaitre le titre, le sous-titre et les icônes d’édition comme dans le blog de @svink. Le changement de couleur du fond ou du bord, pas de problème mais je n’arrive pas à appliquer la feuille de style de @svink en la limitant à un tiddler tagué.

A+


#12

Je pense que la feuille de style embarquant des éléments du body, donc de l’ensemble de la page, ça ne doit pas aider.

Si l’on décompose et limite aux seuls éléments .tc-titlebar (qui inclus déjà .tc-title) et .tc-subtitle, ça pourrait donner ça pour l’appliquer au tag Date :

/*Masquer la zone de titre et des boutons */
.tc-tagged-Date .tc-titlebar { opacity: 0; }
.tc-tagged-Date .tc-subtitle { opacity: 0; }

/*Affiche la zone de titre et des boutons au survol de la souris */
.tc-tagged-Date .tc-titlebar:hover { opacity: 1; }
.tc-tagged-Date .tc-subtitle:hover { opacity: 1; }

Hope this help :smile:


#13

Merci @sylvain. Enfin obtenu le résultat escompté en utilisant tes lignes mais effectivement il faut restreindre aux éléments voulus et faire attention aux espaces.

Je savais que je pouvais compter sur toi ! ;:wink:


#14

Mais, avec cette technique cela modifie l’affichage sur tous les tiddlers, pas forcément très esthétique si ?


#15

Hello, si tu parle des derniers échanges, justement non, puisque l’on applique un style à un tag précis, donc pas sur tous les tiddlers :wink:


#16

Salut tout le monde,

Je viens de mettre en ligne une nouvelle version de TiddlyBlog avec une mise à jour des explications et un style plus sympa (merci @sylvain pour tes CSS toujours au top :wink: )

Le petit plus est que les catégories sont maintenant sélectionnables grâce à un menu déroulant (merci @tobibeer pour les explications) !

A+