Comment construire un jardin numérique avec TiddlyWiki

Beaucoup de gens m’ont demandé comment j’avais construit mon jardin numérique. Voici un petit guide étape par étape pour créer le vôtre. Les fichiers finaux sont ici. Nous ne couvrirons pas le style – il existe de nombreuses ressources intéressantes pour apprendre le CSS.

Quelle est la différence entre un jardin numérique, une application de prise de notes et un blog ? Vous pouvez voir le jardin numérique assis entre le premier et le second. C’est un endroit pour partager vos notes à feuilles persistantes – pas des notes brutes que vous avez peut-être stockées dans votre application de prise de notes, mais pas tout à fait le niveau de finition que vous attendez sur un blog. La création d’un jardin numérique est un excellent moyen de recevoir rapidement des commentaires sur vos idées. Au fil du temps, plusieurs articles de votre jardin numérique peuvent être combinés pour créer des essais plus longs à publier sur votre blog, mais ce ne sera pas nécessairement le cas.

Afin de vous aider à passer du collecteur de notes au créateur de contenu original, votre jardin numérique devrait idéalement permettre d’explorer aussi facilement que possible le lien entre diverses graines d’idées afin que de nouvelles puissent germer. Vous souhaitez relier vos notes et créer un réseau de connaissances unique à votre esprit et à vos centres d’intérêt.

Remarque rapide avant de commencer : parce qu’il peut être difficile de comprendre comment fonctionne l’enregistrement avec TiddlyWiki, veuillez ne pas fermer votre navigateur avant d’avoir terminé ce tutoriel. L’ensemble du didacticiel ne devrait pas prendre plus de 20 minutes.

1. Construisez votre backend

Nous utiliserons TiddlyBlink comme backend. TiddlyBlink est une version modifiée de TiddlyWiki qui ajoute de nombreuses fonctionnalités que nous souhaitons avoir dans notre jardin numérique : liens bidirectionnels (backlinks), transclusion, liens de saisie semi-automatique, etc. Commencer avec TiddlyBlink nous fera gagner beaucoup de temps.

Allez sur le site Web officiel de TiddlyWiki et téléchargez une copie vide de TiddlyWiki en cliquant sur « Télécharger vide » (gros bouton vert) – cela téléchargera un fichier appelé vide.html à ton ordinateur. Double-cliquez pour l’ouvrir dans votre navigateur. Donnez à votre wiki un nom et un sous-titre.

Maintenant, allez sur le site officiel de TiddlyBlink. Placez deux fenêtres de navigateur côte à côte : une avec votre propre wiki (vide.html) et une avec le site TiddlyBlink. Faites glisser la pilule jaune « tb » que vous voyez sur le site Web de TiddlyBlink (sous « TiddlyBlink Home ») dans la fenêtre de votre propre wiki. Cela vous montrera la liste de tous les fichiers que TiddlyBlink ajoutera à votre wiki. Cliquez simplement sur « Importer » et le tour est joué ! Vous avez maintenant une liaison bidirectionnelle et tout ce jazz.

Ensuite, nous ajouterons de petits aperçus contextuels de notre contenu lorsque vous survolerez certains liens internes. David Gifford, le créateur de TiddlyBlink, a également créé un petit add-on astucieux pour créer cet effet que j’ai dans mon jardin numérique, appelé « Transclusion in Popups ». Allez sur son site Web et faites glisser les deux fichiers qu’il y répertorie dans votre propre wiki, puis cliquez sur le bouton « Importer ».

Enfin, nous ajouterons un exportateur de site Web statique qui est beaucoup plus facile à utiliser que le natif. Allez sur cette page et faites glisser le plugin vers votre propre wiki. Vous devez faire glisser la pièce avec une petite icône de puzzle qui devient bleue au survol. Dans votre propre wiki, cliquez à nouveau sur le bouton « Importer » pour confirmer.

Cliquez sur « enregistrer » (l’icône rouge dans le menu de droite). Ceci téléchargera une autre copie du vide.html fichier qui comprend tous ces add-ons et plugins, souvent appelés automatiquement vide (1).html. Fermer l’original vide.html (vous pouvez le déplacer vers la poubelle pour garder les choses propres), et ouvrez vide (1).html dans votre navigateur pour la partie suivante.

2. Créez du contenu

Nous allons maintenant remplir notre wiki avec du contenu factice afin que vous compreniez comment la structuration de vos notes fonctionne.

Créez une première note et tapez « Mes notes » dans le champ de titre. Dans le champ de contenu, collez ce qui suit : « J’ai hâte de partager mes notes avec vous tous. » Enregistrez cette note.

Maintenant, créez une deuxième note, nommez-la « C’est facile de créer un jardin numérique avec TiddlyWiki », puis collez ce qui suit :

This is a dummy article. [[This is a link without a preview|Another dummy article]].

<div class="tooltip">[[This is a link with a preview|My notes]]<div class="tooltiptext"><$transclude tiddler="My notes" mode="block"/></div></div>.

Enregistrez cette note. Passez votre souris sur « Ceci est un lien avec un aperçu » – vous devriez voir une fenêtre contextuelle affichant le contenu de « Mes notes » !

Vous verrez également que « Ceci est un lien sans aperçu » est surligné en jaune. Cela signifie que cette note n’existe pas encore. Cliquez sur le lien, puis cliquez sur le stylo pour créer la note. Tapez ce que vous voulez dans la zone du corps et enregistrez celui-ci également. Vous devriez maintenant avoir trois notes : « Mes notes », « C’est facile de créer un jardin numérique avec TiddlyWiki » et « Une autre note factice ».

Cliquez sur « enregistrer » (encore une fois, l’icône rouge dans le menu de droite) pour télécharger une nouvelle copie avec tout le contenu que nous venons d’ajouter. proche vide (1).htmlet ouvrez vide (2).html. (oui, vous devez le refaire, ne sautez pas cette étape)

3. Exporter en tant que site Web statique

Un nouveau moyen plus simple d’exporter votre wiki en tant que site Web statique vient d’être publié, ce qui le rend très facile à faire sans installer de serveur sur votre ordinateur. Nous avons déjà installé le plugin dans la première partie de ce tutoriel, utilisons-le maintenant.

Créez une nouvelle note intitulée « Exporter » et collez ce qui suit dans le corps :

\define my-static-website()
<$action-sendmessage $message="tm-zip-create" $param="$:/temp/_ZipTiddler"/>
<$list filter="[all[tiddlers]!is[system]limit[100]]">
<$action-sendmessage $message="tm-zip-render-file" $param="$:/temp/_ZipTiddler" filename={{{ [<currentTiddler>encodeuricomponent[]addsuffix[.html]] }}} tiddler=<<currentTiddler>> template="$:/core/templates/static.tiddler.html"/>
</$list>
<$action-sendmessage $message="tm-zip-render-file" $param="$:/temp/_ZipTiddler" filename="static.css" template="$:/core/templates/static.template.css"/>
<$action-sendmessage $message="tm-zip-download" $param="$:/temp/_ZipTiddler" filename="digitalgarden.zip"/>
\end

<$button actions=<<my-static-website>>>
Generate Static Website
</$button>

Enregistrez la note et cliquez sur le bouton « Générer un site Web statique » qui apparaît.

Un fichier ZIP appelé « digitalgarden.zip » sera téléchargé sur votre ordinateur. Ouvrez-le, puis double-cliquez sur « Mes notes.html » pour l’ouvrir dans votre navigateur.

Comme vous pouvez le voir, les backlinks fonctionnent dans la section « Référence ». Cliquons sur « C’est facile de créer un jardin numérique avec TiddlyWiki » pour ouvrir cette note. Passez votre souris sur « ceci est un lien avec un aperçu » – vous devriez voir le même popup que nous avons vu dans le backend.

Voila ! C’est un moyen très rapide de créer votre propre jardin numérique avec des liens bidirectionnels, la transclusion et toutes les bonnes choses qui viennent avec TiddlyWiki et TiddlyBlink. Ce n’est pas très joli en ce moment, mais vous pouvez jouer avec le HTML et le CSS pour vous l’approprier. Comme je l’ai dit, nous ne couvrirons pas le style, mais si vous voulez vous faciliter la vie, vous pouvez jeter un œil à Bootstrap.

Pour styliser votre jardin numérique, les deux fichiers que vous souhaitez consulter sont $:/core/templates/static.tiddler.html et $:/core/templates/static.template.css (auquel vous pouvez accéder dans votre TiddlyWiki en cliquant sur Plus > Ombres dans le menu de droite).

Si vous ne voulez pas passer par toutes les étapes vous-même ou si vous voulez simplement voir à quoi ressemble le résultat final, vous pouvez télécharger le fichier wiki final ici. Ouvrez-le dans votre navigateur, ajoutez quelques notes supplémentaires si vous le souhaitez, puis cliquez sur « Générer un site Web statique » dans la page « Exporter ».

Enfin, comme vous l’avez vu, il est un peu fastidieux de continuer à sauvegarder de nouvelles copies de votre wiki. Il existe de nombreuses méthodes de sauvegarde différentes pour résoudre ce problème, mais Timimi est probablement la meilleure et la plus simple.

Si vous souhaitez publier votre jardin numérique sur le Web (après tout, il s’agit de favoriser la réflexion collective), vous pouvez l’héberger chez n’importe quel hébergeur de site Web statique gratuit, tel que GitHub, NeoCities, Netlify ou Vercel. Voici une belle liste d’options. J’ai aussi récemment découvert cette méthode super simple et gratuite pour héberger votre site Web à partir de Google Drive. C’est ça. S’amuser!

PRIME. Je sais que j’ai dit pas de style, mais je vais juste vous donner deux petits ajustements qui rendront votre jardin numérique plus beau. Tout d’abord, vous avez probablement remarqué qu’il n’y a pas de titre ou de description sur le site Web statique généré automatiquement par TiddlyWiki, alors rajoutons cela.

Cliquez sur Plus > Ombres dans le menu de droite, puis CMD+F ou CTRL+F pour trouver celui-ci dans la liste : $:/core/templates/static.tiddler.html. Cliquez dessus pour l’ouvrir, puis cliquez sur l’icône d’édition et collez ce qui suit juste sous le body class="tc-body" étiquette:

<div class="tc-sidebar-scrollable" style="overflow: auto;">
<div class="tc-sidebar-header"><h1 class="tc-site-title">My Digital Garden</h1></div>

<div class="tc-site-subtitle">A collection of public notes</div>
</div>

Enregistrez ce tiddler et recherchez maintenant $:/core/templates/static.template.css. Ouvrez-le et collez ce qui suit en bas :

.tc-tiddler-controls {
   display: none;
}

.tc-tab-buttons {
   display: none;
}

Cela supprimera les boutons de contrôle de votre site Web statique. Enregistrez le tiddler, puis revenez à la page d’exportation et essayez à nouveau. Déjà beaucoup plus propre !