obsidian
- Summoning
- Paragraphs
- As
- Random
- Knowledge
- Het script installeren
- Het script aanroepen en configureren
- Er is geen stap 3
- /alice: De volledige tekst van Alice in Wonderland, in afzonderlijke hoofdstukken. Met dank aan Project Gutenberg
- /tao te ching: De vertaling van dit belangrijke boek is van Ursula K. Le Guin. Gedownload van The Way and it’s Virtue en opnieuw opgemaakt voor persoonlijk gebruik.
- /bloghelden: Mijn eigen boek uit 2010 over de geschiedenis van de Nederlandse blogosfeer. Ook vrij te gebruiken via mijn github repo.
- Maak een nieuw bestand in Obsidian.
- Plaats hier de volgende code
- En zet de pagina in Reading mode, of als je Live Preview aan hebt staan, zie je direct het resultaat.
- sourceFolder: De map waar je bestanden in zijn te vinden. Default: ‘demofolder/tao te ching’
- buttonText: De tekst die op de button staat. Default: ‘✨ Spark Knowledge’
- buttonStyle: De CSS om je button vorm te geven. Default:
background-color: var(--interactive-accent); color: var(--text-on-accent); padding: 8px 16px; border: none; border-radius: var(--radius-s); margin-bottom: 1em; cursor: pointer; font-size: var(--font-ui-small); transition: all 0.2s ease;, - linkEmoji: Een emoji voorafgaand aan de linktekst onder de paragraaf. Default: ‘✨’
- showTitle: Laat de titel van het bestand zien voorafgaand aan de random paragraaf. Default: false
- maxParagraphs: Kies het maximaal aantal paragrafen om te tonen. Default: 1
- addDividers: Bij meer dan één paragraaf (zie maxParagraphs), plaats een horizontale lijn tussen de paragrafen. Default: false
- excludeTags: Bestanden met deze tags worden niet meegenomen in de random knowledge. Default: [’exclude’, ‘private’],
- requireTags: Alleen bestanden met deze tags tonen in de random knowledge. Default: [],
- excludePatterns: Hou specifieke tekstpatronen weg uit de keuze van paragrafen. Default: [ ‘> Note’, ‘> note’]
- Dataview-query’s als bron gebruiken
- CSS linken aan een extern bestand (beter beheerbaar)
- Conversie naar plugin
- Kun je hier iets mee? Zo ja, waar gebruik je het nu voor?
- Zo nee, wat mis je nog om het bruikbaar te maken?
- Welke functionaliteit zou het voor jou onmisbaar maken?
- En met welke functionaliteit ga je het actief aan anderen tonen of doorvertellen?
- Wat kan beter in bovenstaande uitleg?
- Wat kan beter in de uitleg in het Readme bestand op Github?
- De regel
>[!Multi-column]geeft de start aan van de kolommenstructuur. - Elke opvolgende regel die start met
>>zal in de eerste kolom zichtbaar zijn. - Tot je één keer
>tikt. Dat is het einde van de kolom en het teken om de volgende kolom te starten, - Elke regel die in de tweede kolom hoort, krijgt weer
>>voorafgaand. - Installeer en activeer Dataview (Obsidian/Github)
- Installeer en activeer Callout manager (Obsidian/Github)
- Installeer en activeer Style Settings plugin (Obsidian/Github)
- Modular CSS Layout
- Dataview
- Callout Manager
- Kies een random hoofdstuk.
- Kies daar een random paragraaf uit
- Geef deze weer met een link naar het originele bestand
- En maak een knop waarmee ik direct een nieuwe random paragraaf kan weergeven. Steeds als ik naar mijn startpagina ga, krijg ik een nieuwe vers te zien. En met een druk op de knop kan ik nog een vers lezen als ik dat wil.
SPARK! Toon random kennis in Obsidian
Boven de multi-kolom layout op mijn Obsidian homepage laad ik continu een random paragraaf uit de Tao Te Ching. Door op een button te klikken verandert de paragraaf en kan ik naar het origineel doorklikken voor verdere studie. Ik maakte hiervoor een eigen script, in samenspraak met de chatbot Claude van Anthropic.
Hier kreeg ik best wat vragen over, “hoe kan ik dat script zelf gebruiken? Welke onderdelen moet ik aanpassen?”
Om dat op te lossen én een eigen micro-obsessie te beantwoorden, ben ik weer samen met mijn buddy Claude aan de slag gegaan. In deze blogpost leg ik je uit hoe je dit script kunt installeren, hoe je het op een pagina plaatst én ik vraag je om feedback!
PS: De micro-obsessie is “Hoe kan ik met AI een ruw idee voor een script vormgeven en verder brengen?”
Wat doet SPARK?
Allereerst, de naam ✨ SPARK! Die staat voor
Met dank aan Claude voor het zetje in de juiste richting met deze naam. Ik stuurde het deze kant op, Claude kwam met de juiste volgorde van de woorden.
Met Spark kun je op elke pagina in Obsidian een random deel van een tekst uit je Obsidian vault halen. Je kunt zelf instellen uit welke folder de teksten komt, hoeveel paragrafen je wilt tonen, de tekst en styling van de Spark-button en eventuele emoji.
Installatie
Uiteindelijk maak ik van dit script een plugin, maar ik wil graag met mijn lezers en de Digitale Fitheid community eerst wat proefdraaien, daarom is het nu nog wat handwerk en moet je een beetje meer je best doen. Ik heb geprobeerd de installatie voor nu zo eenvoudig mogelijk te maken. De installatie bestaat uit 3 delen:
Het is een vereiste dat je de Dataview plugin (Obsidian / Github) hebt geïnstalleerd en je in de instellingen de optie “Enable Javascript queries” aan hebt staan.
Script installeren
Ik heb de volledige code van het script op Github gezet, inclusief tekstbestanden om mee te testen. Je kunt er een kijkje onder de motorkap nemen, of direct het complete pakket downloaden als zipfile. Als je het hebt gedownload, unzip het en plaats alle mappen en bestanden in je vault. Doe dit niet in Obsidian zelf, maar via de Finder of Windows Verkenner. Maak een map demofolder in je vault en zet daar de submappen en de losse bestanden in. Het belangrijkste is dat er een bestand genaamd “spark.js” aanwezig is. Hernoem het eventueel naar deze naam als nodig. De map demofolder in je vault ziet er dan als volgt uit:
Het maakt niet uit waar je spark.js plaatst in Obsidian, maar het is slim om dit bestand spark.js in een map /scripts te plaatsen, waar je al je scripts bij elkaar houdt. Of zet het in een eigen structuur met een templates map, of een andere map waar je alles bij elkaar houdt wat betreft automatisering en scripting in Obsidian. Heb je zo’n map nog niet, maak dan gewoon een map “scripts” en plaats hem daar.
Script aanroepen en configuren
Je hebt waarschijnlijk al een idee hebt waar je dit script voor wilt gebruiken en dat je een map hebt met bestanden die je wilt aanroepen. Zo niet, dan help ik je wat op weg. Ik heb drie mappen toegevoegd met voorbeeld teksten:
De map /tags kun je gebruiken om te testen met verplichte of uitgesloten tags.
Met de standaard configuratie werkt SPARK al direct met de bijgesloten Tao Te Ching. Je roept het script als volgt aan:
dv.view("spark");
(zet voorafgaand aan bovenstaande eerst ```dataviewjs en sluit af met ```)
Configuratie van Spark
In het script staan een aantal standaard instellingen. Van de naam van de folder om te gebruiken tot het aantal paragrafen en de styling van de button.
Ik heb nu de volgende instellingen gemaakt die je kunt aanpassen.
In het bestand Demo Script.md dat is toegevoegd kun je een aantal voorbeelden vinden van configuraties.
Voorbeelden
(zet eerst ```dataviewjs en sluit af met ```)
await dv.view("spark",{
sourceFolder:"demofolder/alice",
showTitle: true,
});
await dv.view("spark",{
buttonText:"🌟 More wisdom!",
linkEmoji: "🪄",
showTitle: true,
maxParagraphs: 1,
addDividers: true
});
await dv.view("spark",{
sourceFolder:"demofolder/tags",
includedTags: ["tonen"],
});
Feedback
Ik hoop dat deze uitleg je voldoende handvatten geeft om dit script eens te testen in je eigen vault. Dit script leest alleen bestaande bestanden. Het schrijft niets weg, houdt geen statistieken bij, stuurt niets naar LLM modellen of maakt andere mensen slimmer anders dan jezelf.
Ik stel het op prijs als je me wilt helpen met verbeterde versies van het script. Mijn verlanglijst voor volgende versies is nu al:
Wat ik graag aan feedback zou willen ontvangen:
Dank je wel voor je tijd en aandacht. Laat je kennis ✨SPARKEN!
Hoe maak je 3 kolommen in Obsidian?
In deze blog laat ik je zien hoe je op een pagina in Obsidian het aantal kolommen kunt aanpassen. Dit is gebaseerd op een eerdere blogpost over mijn startpagina in Obsidian en vragen die ik kreeg uit de community.
Tijdens een Digitale Fitheid meetup liet ik zien hoe ik mijn startpagina in Obsidian heb opgebouwd. Dit wekte bij veel aanwezigen de aandacht, waardoor ik een blogpost schreef hoe je deze pagina kunt nabouwen met de juiste plug-ins, code en instellingen.
In deze blogpost leg ik je uit hoe je de twee kolommen op de pagina kunt uitbreiden naar drie of meer. Als je nog geen idee hebt hoe je twee kolommen kunt krijgen op een Obsidian pagina, dan adviseer ik je eerst mijn eerdere handleiding door te nemen en dan hier terug te komen.
Goed, het idee is dus dat we van dit
Naar dit willen.
Je ziet hier niet alleen drie kolommen, maar eveneens dat ze over de hele breedte van je scherm zichtbaar zijn. Om daar mee te beginnen, dat krijg je voor elkaar als je de CSS snippet MCL Wide-view hebt geïnstalleerd (zie voorgaande handleiding, subkopje CSS) en je in de properties/YAML van de pagina kiest voor “cssClasses” met de waarde “wide-page”. Hiermee krijg je direct een bredere pagina.
Voor we verder gaan, zorg ook dat je MCL Multi Column.css hebt geïnstalleerd. Wederom, check mijn eerdere handleiding om dat stap voor stap te doen.
Nu gaan we van twee naar drie kolommen. Om dit zo duidelijk te maken, laat ik je de screenshots zien van de pagina in “Source mode”. Als je in Obsidian in edit-mode zit, kun je via het menu View naar Source Mode. Of via het drie-puntjes-menu rechtsboven de pagina. Of via het Commando Pallet naar “Toggle Live Preview/Source mode” Dit is in Obsidian de ruwe, onbewerkte tekst. De daadwerkelijke tekst zoals deze in het onderliggende bestand staat, zonder opmaak of live preview vanuit Obsidian. Hieronder zie je de onbewerkte tekst uit het bestand met twee kolommen. Ik heb markers 1 t/m 4 toegevoegd in het screenshot op plekken die van belang zijn.
Je ziet hier de volgende code
>[!Multi-column]
>> [!important] ## Dit is kolom 1
>> Hier plaats je links, teksten, wat je maar wilt.
>> - Dat kan met lijsten, of niet.
>
>>[!important] ## Dit is kolom 2
>> Hier plaats je links, teksten, wat je maar wilt.
>> - Dat kan met lijsten, of niet.
Het volgende is belangrijk:
Zoals je ziet hoef je de multi-kolom niet af te sluiten. Een witruimte is voldoende om de kolom af te sluiten.
Om een extra kolom te maken, hoef je dus alleen een extra blok toe te voegen met > en de inhoud voorafgaan met >>
Eenvoudig niet waar? Zo kun je blijven uitbreiden met kolommen. Hou er wel rekening mee dat ze per kolom smaller en minder leesbaar worden.
Op deze manier kun je met een beetje code je eigen pagina’s fraai vormgeven. Wil je meer weten over de mogelijkheden met multi-kolom, lees dan de documentatie en voorbeelden door.
Succes!
Handleiding voor mijn startpagina in Obsidian
Na de publicatie van de blogpost over mijn startpagina kreeg ik al snel een paar vragen. Lezers die de stappen volgden, kwamen er niet helemaal uit. Ik besloot zelf eens aan de slag te gaan met een lege Obsidian vault en ik kwam al snel tot de conclusie dat ik met zeven-mijlslaarzen door de mogelijkheden was gegaan. Ik had een paar essentiële stappen overgeslagen, simpelweg om dat ik niet meer wist dat ze nodig waren. Ik heb mijn startpagina al lange tijd actief en had het nooit gedocumenteerd. Nu dus wel.
En neem ik jullie mee door de stappen die je zet om een zelfde soort pagina te krijgen.
Voor we beginnen, zet de Community plugins aan in Obsidian als je dat nog niet had.
Theme
Installeer het theme Annapuccin. Ga in de Obsidian settings naar Appearance > Themes > Manage > AnuPpuccin > Install and use.
Plugins
Op het moment dat je de Style Settings activeert, kun je de instellingen van je thema al helemaal aanpassen. Ga naar de opties van Style Settings en je ziet de mogelijkheden van het AnuPpuccin theme. Het mooie van deze plugin is dat ik mijn settings kan exporteren en voor jullie weer beschikbaar kan stellen. Dus installeer mijn style-settings.json (rechtermuisknop, opslaan als) en je hebt direct de juiste instellingen. Klik op import in de Style Settings en kies het zojuist gedownloade style-settings.json als bestand. Nu heb je voor het theme dezelfde instellingen als ik heb.
CSS
Nu gaan we het mogelijk maken dat je kolommen op je pagina kunt maken en je deze over de hele breedte kunt plaatsen. Verder heb ik wat extra code om kleur aan je pagina te geven.
De Modular CSS Layout bestanden kun je los downloaden vanaf de eigen Github pagina. Kies MCL Wide Views.css en klik op “Download Raw File” rechts in de balk met iconen. Doe hetzelfde met MCL Multi Column.css.
Verder heb je ook dit CSS bestand (rechtermuisknop, opslaan als…) nodig, het zijn extra call-outs die Nick Milo van Linking your Thinking eens heeft gemaakt. Download het bestand en sla het lokaal op bij de twee andere CSS bestanden.
In Obsidian ga je weer naar Settings > Appearance en scroll je naar beneden. Hier zie je het blok “CSS Snippets” met rechts er van het icoon van een folder.
Klik er op en open de map snippets in je Finder/Verkenner Hier zet je de drie gedownloade bestanden: nick-milo-callouts.css, MCL Multi Column.css en MCL Wide view.css Klik bij het kopje CSS Snippets nu op het reload-icoon en activeer de drie CSS bestanden.
Nu kun je bij een notitie in de Properties (YAML) toevoegen cssClass:wide-page om je notitie over de hele breedte te tonen.
Multi Column
Voor de Multi-Column mogelijkheid, kun je het beste beginnen met de documentatie van de CSS. Deze is behoorlijk uitgebreid en neemt je stap voor stap mee in de mogelijkheden
Ik gebruik voor mijn pagina nu de Multi Column Callout optie. Zie ook de broncode van mijn startpagina op Github. Klik op deze pagina op de knop “Raw” en kopieer de code die je ziet in een eigen notitie. Je kunt daarna alles per blok gaan tweaken. De dataviews en links zullen niet werken, die moet je naar je eigen situatie omzetten.
Via Settings > Callout Manager kun je alle kleuren en iconen van je callouts aanpassen naar je eigen smaak.
Hopelijk heb ik je zo ver genoeg op weg geholpen om je eigen startpagina kleur en vorm te geven. Ik ben benieuwd naar je resultaten!
Hoe ziet mijn Obsidian startpagina er uit?
Gisteren was de maandelijkse PKM avond van de Digitale Fitheid community in het fraai vernieuwde Seats2Meet te Utrecht. De co-workspace zit sinds kort op een nieuwe lokatie en is compleet nieuw opgebouwd. De zaal, de gezamenlijke ruimtes en de voorzieningen, alles ziet er pico bello uit. Samen met de bijeenkomst die voortaan op vrijdagavond is in plaats van maandagavond, zorgde dat voor nieuwe en andere energie had ik het idee. De groep was niet zo groot, maar de interesse en het enthousiasme er niet minder om.
Het onderwerp van deze editie is MOC, Maps of Content. Ik heb dit zelf gedefinieerd als “Een inhoudsopgave als een gestructureerde kaart van ideeën en inzichten die volgens jou bij elkaar horen”. Een MOC kan visueel zijn of tekstueel, of een combinatie. MOC’s worden veel gebruikt in apps als Obsidian, Notion en aanverwante kennismanagement software.
Ik besloot om deze keer eens het spits af te bijten en mijn persoonlijke Obsidian startpagina te laten zien.
Een Map of Content kan een lijst met links zijn, maar ik bedacht dat het meer kan zijn. Als ik namelijk mijn Obsidian open zie ik dit.
Deze pagina bestaat uit een aantal elementen die als springplank dienen voor mijn werk in Obsidian. Ik kan verder naar beneden scrollen om meer blokken te zien met doorkijkjes in mijn systeem.
Ik vind het prettig om een startpagina te hebben die ik zelf graag zie. Vorm en functie zijn voor mij even belangrijk. Daarom besteed ik best wat aandacht aan de vormgeving en de stijl van de pagina. Ik ben verre van een professioneel ontwerper, maar ik probeer er wel een eigen draai aan te geven.
Degenen die gisteren aanwezig waren zien dat ik inmiddels een paar kleine veranderingen heb gemaakt. Omdat ik gisteren vertelde over mijn startpagina in plaats van er alleen naar keek, kwam ik tot het besef dat ik niet alles even hard nodig heb op een startpagina. En later in gesprekken met onder andere Remco kwam ik op een idee om er nog iets nieuws aan toe te voegen. Daar zo meer over.
Opbouw van de pagina
Let op: Voor een stap-voor-staphandleiding hoe je alles installeert en instelt, heb ik een extra blogpost gemaakt.
De pagina is opgebouwd met een aantal elementen en plugins.
Ik maak gebruik van het AnuPpuccin theme inclusief Rainbow Folders.
Kolommen op je pagina
Met de Modular CSS Layout (via Github) snippets kan ik de twee kolommen maken met blokken. De documentatie van de snippets is behoorlijk overzichtelijk, zodat je snel al een aardig overzicht krijgt van je pagina. Tevens gebruik ik Wide View CSS van deze serie, zodat ik de content over de hele breedte van mijn scherm heb.
Elk blok bestaat uit een doorkijkje via Dataview queries. Deze plugin is voor elke serieuze Obsidian gebruiker een must-have. Je kunt met Dataview (Obsidian / Github) enorm flexibel zoekopdrachten in je verzameling notities doen en ze op allerlei manieren weergeven. Het voert te ver om er in deze blogpost diep op alle mogelijkheden in te gaan. Wel wil ik speciaal aandacht geven aan een nieuwe toevoeging op de startpagina: een random paragraaf uit de Tao Te Ching.
Random paragraaf weergeven
Ik heb de complete Tao Te Ching per hoofdstuk in mijn Frankopedia staan. Ik lees nu de vertaling en interpretatie van Ursula K. Le Guin, er zijn natuurlijk meer vertalingen en interpretaties te vinden. Met een combinatie van Javascript, Dataview en veel hulp van Claude AI, kon ik een weergave maken zoals ik wilde:
Het script dat ik hier voor gebruik heb ik op Github gezet. Let op, je moet dit script in een dataviewjs-blok zetten. En het is zo op maat gemaakt voor mijn versies van de hoofdstukken, je kunt dit niet direct hergebruiken. Maar haal er je eigen inspiratie uit waar nodig.
Blokken en emoji
Met de Callout Manager (Obsidian/Github) geef ik kleuren en emoji aan de blokken. Eigenlijk is elk blok een grote callout en met de plugin kan ik eenvoudig eigen kleuren en emoji aan de blokken geven.
Dat is de manier waarop ik mijn startpagina nu maak. Ik tweak soms wat blokken, ik voeg wat toe of verwijder weer eens wat. Zo blijft het voor mij een dynamische en frisse weergave van mijn notities.
Je kunt op deze pagina de Markdown en invulling van de kolommen vinden die ik gebruik. Klik op “Raw”, kopieer en pas aan waar nodig voor je eigen invulling!
Digitale Fitheid
Dankzij de voorbeelden van andere aanwezigen kwam ik weer op nieuwe ideeën. Zo blijf ik geïntrigeerd over de visuele stijl van de Excalidraw-plugin, waar Marieke van Vliet enorm enthousiast over vertelde. Muhammed Ali Kilic gaf ons een doorkijkje in zijn Maps of Content en zijn manier van notities aan elkaar verbinden. Hij gebruikt daar alleen notities voor, en geen tags of andere systemen. Een mooi, schaalbaar en flexibel systeem. Martijn nam ons mee in zijn wereld van tovertypen, dagelijks korte updates in zijn systeem zetten en 30 jaar aan herinneringen koppelen.
De PKM avonden van de Digitale Fitheid community zijn vrij toegankelijk. Kom gerust eens langs als je meer wilt weten over de manieren waarop je je eigen digitale fitheid kunt verbeteren.