This Howto describes how I set up this TiddlyWiki to look exactly like it is now.
created by
Download
Go to the TiddlyWiki Homepage and grab a copy of empty.html by clicking the big blue Download Empty button.
Create a copy of empty.html (e.g. doku.html) and open it with your favourite browser. Firefox works very good as well as the new Microsoft Edge Browser with Chromium engine.
Base configuration
The first time you open the html file it shows you the Getting Started Tiddler. Edit to your needs e.g.:
Title of this TiddlyWiki: [[Documentation Template]]
Subtitle : all in one file
Default tiddlers :
After that go to Control Panel / then to the tab Appearance, then Theme Tweaks.
Set Fluid story, fixed sidebar as the Sidebar layout under Options there.
Then again go to Control Panel / then to the tab Plugins.
Click on the blue Get more plugins button.
Click on the green open plugin library button.
Select the tab Plugins and enter markdown in the search box.
Click on the green Install button for each of the following plugins to install them.
Markdown : Markdown parser based on remarkable by Jon Schlinkert
Highlight: Highlight.js syntax highlighting
Click on close.
Then save your document by clicking on the Save Button / and overwrite the existing file.
After that refresh the page by clicking the Reload button / .
Add some Tools
Click on the Tools tab and select some useful tools there:
[x] Home
[x] close all
[ ] fold all tiddlers
[ ] unfold all tiddlers
[ ] permaview
[x] new tiddler
[x] new Markdown tiddler
[x] new journal
[ ] new image
[ ] import
[ ] export all
[x] control panel
[ ] advanced search
[ ] tiddler manager
[ ] tag manager
[ ] language
[ ] palette
[ ] theme
[ ] storyview
[ ] set password
[ ] timestamps are on
[x] full-screen
[ ] print page
[x] save changes
[x] refresh
[ ] more
Then again save the file using the Save Button / and overwrite the file.
Create a Contents tab
We will now create a new tab in the sidebar. The cool thing is, this can be done by creating a special Tiddler with the internal tag $:/tags/SideBar using some special parameters.
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : Contents
tag name(s): $:/tags/SideBar
Text :
<!-- copy below here -->
Wiki Content
<div class="tc-table-of-contents">
<<toc-selective-expandable "Contents" "!title[$:/config/NewJournal/Tags]sort[modified]">>
<!-- <<toc-selective-expandable "Contents" "!title[$:/config/NewJournal/Tags]sort[title]">> -->
</div>
<!-- copy above here -->
field name : list-before
field value: $:/core/ui/SideBar/Open
Store this Tiddler by clicking on the Save button /
.
You should immediately see a new tab named Contents in the sidebar that is orderd to the left.
If this does not work, open the Tiddler again and check the values.
Make sure you click on add when adding tags or new fields.
Now we make sure, that the Contents tab will be the default Sidebar Tab.
Now open the Control Panel / and go to the tab Settings.
Change the Defaulf Sidebar Tab to Contents.
Close all open Tiddlers by clicking on the Close all button /
or close them individually by clicking on Close button \ on each of them.
Setting up a Tasks Facility
We will now create a facility to manage our Tasks to be able to manage a "todo List" and a "completed list" in TiddlyWiki within the Contents Tab.
First we create 3 new Tiddlers and assign tags to them:
01 Tasks
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : Tasks
tag name(s) : Contents
Text :
Store this Tiddler by clicking on the Save button / .
02 ToDo
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : ToDo
tag name(s) : Tasks
Text :
<!-- copy below here -->
<$list filter='[!has[draft.of]tag[task]!tag[done]sort[created]]'>
<$checkbox tag='done'> <$link to={{!!title}}>
<$view field='created' format='date' template='DDth mmm 0hh:0mm'/> - <$view field='title'/><br>
</$link>
</$checkbox>
</$list>
<!-- copy above here -->
Store this Tiddler by clicking on the Save button / .
03 Completed
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : Completed
tag name(s) : Tasks
Text :
<!-- copy below here -->
<$list filter='[!has[draft.of]tag[task]tag[done]sort[created]]'>
<$checkbox tag='done'> ~~<$link to={{!!title}}><$view field='created' format='date' template='DDth mmm 0hh:0mm'/> - <$view field='title'/></$link>~~</$checkbox><br>
</$list>
<!-- copy above here -->
Store this Tiddler by clicking on the Save button / .
Close all open Tiddlers by clicking on the Close all button /
or close them individually by clicking on Close button \ on each of them.
Working with Tasks
You can now use your newly created Tasks facility to create new Tiddlers and assigning them the Tag task
Adding a new task
To add a new Task (a new Todo) just create a new Tiddler using the New button /
and assign it the tag task. If this is your first Todo you create, the tag task has to be added manually.
IMPORTANT!
task NOT Tasks
task ,lowercase without s!
Store this Tiddler by clicking on the Save button / .
Because of our previous config this Tiddler/Task will now be listed if we click on ToDo in the submenu Tasks within the Contents tab.
It will be listed in the following format:
<date as DDth mmm 0hh:0mm> - <Name of Tiddler/Task>
e.g.
Tasks > Todo
30th Jul 10:56 - Aufgabe01
If you have completed this task, just check the checkbox and the Task will be automatically removed from Todo and added to Completed and vice-versa. When the task appears in Completed it is striked out! Technically this works by automatically adding the tag done to the task if you checked it.
Tasks > Completed 30th Jul 10:56 - Aufgabe01
This also works the other way arround. If you uncheck the checkbox
the task will again reappear in Tasks > Todo because the tag done is automatically removed by unchecking it.
You have now successfully setup a task management facility in TiddlyWiki.
Setting up a Journal Facility
We will now create a Journal facility for example to manage new tickets or incoming phone calls within the Contents Tab. Journaling is already present in TiddlyWiki but we make it show up in our Contents tab.
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : Journal
tag name(s) : Contents
Text :
When you now click on the button New Journal Tiddler Button / and create a new journal Tiddler, this Tiddler will automatically show up within the Contents menu Journal because using the New Journal Tiddler Button / automatically assigned the tag Journal to the Tiddler.
Setting up the Journal Facility is completed.
Adding an image to TiddlyWiki
It is very easy to add an image (or other file) to TiddlyWiki. Just Drag&Drop the image file near the top of the TiddlyWiki page and then release the mouse button. The $:/Import Tiddler automatically opens up.
When you click on a new Tiddler is created with the name of the file you dropped. After the import, the new Tiddler is listed within the $:/Import Tiddler.
Now open the new Tiddler containing the image by clicking on the name (filename).
Important: Click on the Tiddler do not click on $:/Import
$:/Import ← do not click hereThe following tiddlers were imported:
pcfreaklogo.gif ← CLICK HERE
The Tiddler containing the image opens and should show the image. Click on the Edit Button / of the image Tiddler and add the tag to it. This is not necessary in general when working with imported images but we will later create a special Tiddler that will list all of our images by displaying a list of Tiddlers with the tag and it will rely on the tag.
and opens automatically.
Using image Tiddlers within other Tiddlers
To use an Image Tiddler within another Tiddler you just have to use curly brackets {{<name of tiddler>}} within another Tiddler.
Example:
Name of Image Tiddler: pcfreaklogo.gif
I added the Tiddler pcfreaklogo.gif to this document by typing {{pcfreaklogo.gif}} just below this text and the image is there!
That was easy, wasn't it?
Setup some SysTools
It is sometimes useful to have some very handy Tiddlers arround e.g. one that shows all images from internal Tiddlers (so called Shadows) and another one that shows all images we have imported into TiddlyWiki and more. Additionally it would be handy if this handy Tiddlers are grouped within a kind of menu within our Contents Tab.
So let's do exactly that.
Create the SysTools Tiddler in Contents
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : SysTools
tag name(s) : Contents
Text :
<!-- copy below here -->
<$list filter='[!has[draft.of]tag[SysTools]sort[title]]'>
<$link to={{!!title}}>
<$view field='title'/><br>
</$link>
</$list>
<!-- copy above here -->
This will create a new menu entry in the Contents tab named SysTools which should be immediately visible when you store the Tiddler.
Create a show system images Tiddler
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : * show system images
tag name(s) : SysTools
Text :
<!-- copy below here -->
<table>
<tr>
<th>shadow Tiddler Name</th>
<th>Image rendered</th>
</tr>
<$list filter="[all[shadows]sort[title]prefix[$:/core/ui/Buttons/]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
<td><$transclude tiddler=<<info>>/></td>
</tr>
</$list>
</table>
<table>
<tr>
<th>shadow Tiddler Name</th>
<th>Image rendered</th>
</tr>
<$list filter="[all[shadows]sort[title]prefix[$:/core/images/]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
<td><$transclude tiddler=<<info>>/></td>
</tr>
</$list>
</table>
<!-- copy above here -->
After storing it, it should appear below SysTools in the Contents tab.
Create a show imported images Tiddler
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : * show imported images
tag name(s) : SysTools
Text :
<!-- copy below here -->
<table>
<tr>
<th>Tiddler Name</th>
<th>Image rendered</th>
</tr>
<$list filter="[!has[draft.of]tag[image]sort[created]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
<td><$transclude tiddler=<<info>>/></td>
</tr>
</$list>
</table>
<!-- copy above here -->
After storing it, it should appear below SysTools in the Contents tab.
If you open this Tiddler it will automatically generate a list all Tiddlers with tag and previews them.
Create a show untagged Tiddlers Tiddler
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : * show untagged Tiddlers
tag name(s) : SysTools
Text :
<!-- copy below here -->
<table>
<tr>
<th>Tiddlers without Tags</th>
</tr>
<$list filter="[untagged[]!prefix[$:]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
</tr>
</$list>
</table>
<!-- copy above here -->
After storing it, it should appear below SysTools in the Contents tab.
If you open this Tiddler it will automatically show all non system Tiddlers that do not have a tag set.
The Documentation Tiddler
Finally we will now create a Tiddler that will hold all the documentations we want to write using this setup here. This is actually where this Tiddler TiddlyWiki quick start by PCFreak is located.
Create a new Tiddler by clicking on the New button / and set the following options for it:
Title : Documentation
tag name(s) : Contents
Text :
**Now whenever you create a new documentation, make sure you assign the tag to it and it will automatically appear below Documentation in the Contents tab.
Additional Resources
Links
http://tw5magick.tiddlyspot.com/
Tutorial Videos
I strongly recommend to watch the following videos on YouTube which explain in detail what we setup until here.