TiddlyWiki User's Guide - an introduction to TiddlyWiki

!Credits\nFirst, thank you to [[Jeremy Ruston|http://osmosoft.com/]], for getting so many things right at once that the whole ~TiddlyWiki phenomenon was inevitable.\n\nThanks also to those who fanned the flames: all the developers and users who have contributed to ~TiddlyWiki with ideas, enhancements, and plugins.\n\nThis document owes a lot to:\n* [[Kathy Sierra|http://headrush.typepad.com/]], for her article "[[Conversational writing kicks formal writing's ass|http://headrush.typepad.com/creating_passionate_users/2005/09/conversational_.html]]".\n* [[Lifehacker|http://lifehacker.com/]], for introducing me to ~TiddlyWiki (via Nathan Bower's excellent GTD ~TiddlyWiki adaptation).\n\nComments from these reviewers helped refine this guide:\n* [[Clint Checketts|http://checkettsweb.com/]]\n* Greg\n* ~InsaneAbd\n* Jack F\n* Mike Blackstone\n* Robert Shaver\n* [[Russ Lipton|http://russlipton.com/tiddlyworks.html]]\n* [[Saq Imatiz|http://lewcid.googlepages.com/lewcid.html]]\n* [[Udo Borkowski|http://tiddlywiki.abego-software.de/]]\n\n(If you are listed above and it's wrong -- perhaps I mistyped, used a wrong link, used your email nick, or you don't want to be listed at all -- please let me know and I'll fix it up.)\n\n{{navbar{\n{{next{\nThe End! //[[more info|http://tiddlywikiguides.org/]]//\n}}}{{prev{\n[[<< previously: Customising TiddlyWiki|Customising TiddlyWiki]]\n}}}\n}}}\n\n!Coverage planned\n\n* browser setup\n** opera\n*** can save by fiddling java policy file\n*** can't do gradients\n** camino\n*** is it like firefox with some security dialogues?\n** safari\n*** needs plugin\n*** table cell probs etc\n** firefox\n*** three successive dialogues, option for remembering. remembering applies to all file:// urls?\n** ie6\n*** sp2 and it's magic memory - file properties -> unblock\n*** allow blocked content\n*** bad handling of contiguous spaces - in tiddler titles, in content\n** ie7\n*** needs testing?\n** most other browsers can view (but not save)\n*** including mobile Nokia 770\n\n* basic linking\n** wikiword links\n** wikiword links to non-existant tiddlers\n** create tiddler by clicking link\n** double square brackets\n** pretty links with sq brackets\n\n* external linking\n** external sites\n** local files and folders\n\n* formatting\n** bullet points with asterisks\n** numbered points with hashes\n** hrs with four dashes\n** triple curlys for monospace/code blocks\n** using triple lessthan for block BlockQuotes\n** using greaterthan line starts for nested line BlockQuotes\n** bold, italic, strikethrough, don't use underline, super|sub script, at-sign hilight\n** bang headings\n** custom css rules using double at-signs\n** custom css class using double curlys className curly\n*** span on single line, div if newline after third {\n** images\n*** filename, title, link\n*** float left/right with [gt/lt img\n*** have to use css clear to skip past floated imgs\n** tables\n*** headers\n*** captions\n*** rowspan, colspan\n*** cell alignment\n*** css class\n*** using inline html\n** html entities\n** inline html\n*** faster table rendering with html\n*** iframes to get stuff like flickr badges\n*** how to do a wikilink in html\n** hidden tiddler comments with slash - percent\n\n* editing\n** ctrl-enter to save\n** MinorChange (shift - done, ctrl - shift - enter) and AdvancedOptions\n** permaview and permalink\n\n* saving\n** SaveBackup\n** AutoSave\n** RSS - SiteUrl\n** save empty template\n\n* searching\n** regex searching\n\n* options\n** enableAnimations\n** advanced..\n*** hide editing features over http\n\n* upgrading\n\n* builtin macros\n** ToolbarMacro\n*** cancelTiddler - close, don't save\n*** closeOthers\n*** closeTiddlers\n*** deleteTiddler and AdvancedOptions ConfirmBeforeDeleting\n*** editTiddler\n*** jump - scroll selected other tiddler into view\n*** permalink\n*** references - list of tiddlers referencing this one\n*** saveTiddler\n** formatting dates with dd mm etc\n** Gradient\n** today - dynamic date\n** newJournal - new tiddler with date title\n** tab - include other tiddlers into tabset\n** tag - popup of tagged tiddlers\n** tagging - list of tagged tiddlers\n** tiddler - include content of another tiddler\n** slider - selectively hide content\n** sparkline - inline graph\n\n* startup params\n** opening specific tiddlers (and permaview|link)\n** searching, new tiddlers etc\n\n** safe mode\n** ParameterParser - put into dev guide?\n\n** keyboard shortcuts (see http://tiddlywiki.com/#KeyboardShortcuts)\n\n* plugins\n** installing\n** the systemConfig tag\n** safe mode\n** useful selection\n** del.icio.us directory\n\n* using StyleSheet\n** targetting specific tiddlers with #tiddler[TiddlerName]\n** NestedStyleSheets - including other sheets with double square brackets\n*** using very small NestedStyleSheets to do colours etc\n\n* customisation\n** DefaultTiddlers\n** MainMenu\n** Markup(Pre|Post)Head and Markup(Pre|Post)Body\n** setting config.* options in a systemConfig tiddler\n\n* server issues\n** character encoding (should be UTF-8)\n\n* applications of tw\n** gtd\n** wiki-on-a-stick\n\n* troubleshooting\n** list tags and tiddlers that have magic behaviour\n** save unpredicabilities warning\n** safe mode #start:safe\n** Firefox keyboard weirdness\n** Firefox and Greasemonkey\n** IE6 and bad contiguous space handling\n\n--- up to TiddlyWIki* on tw.c\n

[ no content here yet. this will eventually cover stylesheets, fiddling around with the tabs, etc. ]\n\n{{navbar{\n{{next{\n[[next: Credits >>|Credits]]\n}}}{{prev{\n[[<< previously: Definitions|Definitions]]\n}}}\n}}}\n

[[TiddlyWiki User's Guide]]

!!Basic terms\n\n!!!!!tiddler\nA tiddler is a piece of micro-content in a ~TiddlyWiki. Micro-content can be thought of as stuff that's smaller that a page of content. The precise meaning of "micro-content" and "page" (and "smaller") are still occasionally debated by ~TiddlyWiki cognoscenti.\n\nWhatever micro-content is, it turns out that most people actually deal with it a lot in their day-to-day lives. That's part of the reason why ~TiddlyWiki is so great -- tiddlers fit nicely with a lot of real-world stuff.\n!!!!!shadow tiddler\n~TiddlyWiki ships with some default content for certain tiddlers used internally by ~TiddlyWiki. These predefined tiddlers are called "shadow tiddlers". Shadow tiddlers keep you from completely tanking your ~TiddlyWiki by accidentally deleting something important.\n\nYou can see a list of shadow tiddlers in the Shadowed tab under the More tab in the right hand column. When you create a tiddler with a given title, you override any shadow tiddler with that title.\n!!!!!tags\nCategorise a tiddler by giving it some tags. Tags can be tiddlers themselves, and they can have their own tags, so you can have heirarchies of tiddlers. This is a surprisingly useful and powerful technique called "tagglytagging"; see [[Simon's TagglyTagging infomation|http://simonbaird.com/mptw/#TagglyTagging]] for an introduction from the spiritual leader of the tagglytagging movement.\n!!!!!plugin\nA plugin is a collection of Javascript that you can put into a tiddler. A plugin tiddler is given the special tag of "systemConfig", which instructs ~TiddlyWiki to run the enclosed Javascript when the ~TiddlyWiki is first opened in the web browser. It enhances or changes the behaviour or appearance of the ~TiddlyWiki. One way it can do that is by making one or more macros available to you.\n!!!!!wikify\nWhat ~TiddlyWiki does to display a tiddler. The thing that does the wikifying is the wikifier; the wikifier takes what you've typed into the tiddler edit box and applies bold formatting, makes "!This" into a heading, etc.\n!!!!!macro\nA macro is a thing you can type into a tiddler body like this: {{{<<minesweeper>>}}} ..that then usually gets handled in some special way when the tiddler is wikified.\n\nThere are a bunch of macros built in -- eg {{{<<today>>}}} and {{{<<slider>>}}}, and many others are made available by adding a plugin to your ~TiddlyWiki. For example the [[minesweeper plugin|http://danielbaird.com/tiddlywinks/#Minesweeper]] installs a {{{<<minesweeper>>}}} macro that displays a minesweeper game board, and other plugin macros do more useful things like add reminders to a calendar, etc.\n\n{{navbar{\n{{next{\n[[next: Customising TiddlyWiki >>|Customising TiddlyWiki]]\n}}}{{prev{\n[[<< previously: The TiddlyWiki Screen|The TiddlyWiki Screen]]\n}}}\n}}}\n

<<saveChanges>>\n<<upload http://danielbaird.com/twdocs/store.php userguide.html backups . 'Daniel Baird'>>\npwd:<<option pasUploadPassword>>\n[[GettingStarted]]\n[[DevMenu]]\n[[MainMenu]]\n[[DefaultTiddlers]]\n[[PageTemplate]]\n[[ViewTemplate]]\n[[StyleSheet]]\n[[StyleSheetLayout]]\n[[StyleSheetColors]]\n[[this file|http://danielbaird.com/twdocs/userguide.html]]\n<<newTiddler>>\n<<tiddler SideBarTabs>>\n\n

!!Getting ~TiddlyWiki\nHere's how to get ~TiddlyWiki.\n!!!!!Step 1: Download the latest version\nOpen up your web browser, and go to the ~TiddlyWiki site -- unsurprisingly, the location is:\nhttp://www.tiddlywiki.com\n\nOnce you're there, look at the left hand side of the page for the phrase "~DownloadSoftware", and click on it. A few paragraphs of text will appear at the top of the web page you're looking at.. feel free to read it all, but what you're looking for is the phrase "this link to empty.html", in blue and underlined. Right-click that and choose "Save Link As.." or "Save Target As.." to save it to your hard drive.\n\nLike it says on the page you're downloading from, if your browser lets you save pages in various formats, make sure you choose the plain HTML option. Remember where you saved it.\n!!!!!Step 2: ...\nWith apologies to [[Instiki|http://instiki.org]], there //''is no step 2''// -- your ~TiddlyWiki is ready! Wanna see it? Go to the HTML file you saved in Step 1 and open it in your web browser. See? Ready to go. Leave it on screen, and you can jump right into the [[next section|Using TiddlyWiki]].\n\n@@this thing about "no step 2" needs to be replaced with a walkthrough on getting TW past various security checks, like the unlock thing that you need to do with WinXP SP2, with a particular focus on win/IE. If anyone can post me the steps required for particular os/browser combinations, I'd be much obliged :)@@\n\n{{navbar{\n{{next{\n[[next: Using TiddlyWiki >>|Using TiddlyWiki]]\n}}}{{prev{\n[[<< previous: What is TiddlyWiki|TiddlyWiki User's Guide]]\n}}}\n}}}\n

!!!Contents\n[[1: What is TiddlyWiki?|TiddlyWiki User's Guide]]\n[[2: Getting TiddlyWiki|Getting TiddlyWiki]]\n[[3: Using TiddlyWiki|Using TiddlyWiki]]\n[[4: The TiddlyWiki Screen|The TiddlyWiki Screen]]\n[[5: Definitions|Definitions]]\n[[6: Customising TiddlyWiki|Customising TiddlyWiki]]\n[[7: Credits|Credits]]\n----\nby Daniel Baird\ndanielbaird@gmail.com\nposted 19 May 2006\n----\nI'm not sure how useful this document is in it's current state of development, but do please comment on anything: content, font, layout, how much I and everything I do sucks.. consider everything fair game.\n\nMy intention is to use ~SinglePageMode, but until i get the plugins sorted out please implement ~ManualSinglePageMode by clicking "close others" whenever a tiddler opens up :)\n\nI'm happy (VERY happy..) to receive contributions but please don't be offended if I rewrite your text when fitting it in to this doc.\n\nYou'll get credit for sustantial contributions, but (unless you say otherwise) I will consider any contributions public domain. Aside from that I haven't thought about licencing yet, so at present I'm retaining copyright: this content is for review only, and should not be distributed in any form.\n----

/***\n''Single Page Mode Plugin for TiddlyWiki version 2.0 or above''\n^^author: Eric Shulman - ELS Design Studios\nsource: http://www.TiddlyTools.com/#SinglePageModePlugin\nlicense: [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]^^\n\nNormally, as you click on the links in TiddlyWiki, more and more tiddlers are displayed on the page. The order of this tiddler display depends upon when and where you have clicked. Some people like this non-linear method of reading the document, while others have reported that when many tiddlers have been opened, it can get somewhat confusing.\n\n!!!!!Usage\n<<<\nSinglePageMode allows you to configure TiddlyWiki to navigate more like a traditional multipage web site with only one item displayed at a time. When SinglePageMode is enabled, the title of the current tiddler is automatically displayed in the browser window's titlebar and the browser's location URL is updated with a 'permalink' for the current tiddler so that it is easier to create a browser 'bookmark' for the current tiddler.\n\nEven when SinglePageMode is disabled (i.e., displaying multiple tiddlers is permitted), you can reduce the potential for confusion by enable TopOfPageMode, which forces tiddlers to always open at the top of the page instead of being displayed following the tiddler containing the link that was clicked.\n<<<\n!!!!!Configuration\n<<<\nWhen installed, this plugin automatically adds checkboxes in the AdvancedOptions tiddler so you can enable/disable the plugin behavior. For convenience, these checkboxes are also included here:\n\n<<option chkSinglePageMode>> Display one tiddler at a time\n<<option chkTopOfPageMode>> Always open tiddlers at the top of the page\n<<<\n!!!!!Installation\n<<<\nimport (or copy/paste) the following tiddlers into your document:\n''SinglePageModePlugin'' (tagged with <<tag systemConfig>>)\n^^documentation and javascript for SinglePageMode handling^^\n\nWhen installed, this plugin automatically adds checkboxes in the ''shadow'' AdvancedOptions tiddler so you can enable/disable this behavior. However, if you have customized your AdvancedOptions, you will need to ''manually add these checkboxes to your customized tiddler.''\n<<<\n!!!!!Revision History\n<<<\n''2006.06.01 [2.2.0]'' added chkTopOfPageMode handling\n''2006.02.04 [2.1.1]'' moved global variable declarations to config.* to avoid FireFox 1.5.0.1 crash bug when assigning to globals\n''2005.12.27 [2.1.0]'' hijack displayTiddlers() so that SPM can be suspended during startup while displaying the DefaultTiddlers (or #hash list). Also, corrected initialization for undefined SPM flag to "false", so default behavior is to display multiple tiddlers\n''2005.12.27 [2.0.0]'' Update for TW2.0\n''2005.11.24 [1.1.2]'' When the back and forward buttons are used, the page now changes to match the URL. Based on code added by Clint Checketts\n''2005.10.14 [1.1.1]'' permalink creation now calls encodeTiddlyLink() to handle tiddler titles with spaces in them\n''2005.10.14 [1.1.0]'' added automatic setting of window title and location bar ('auto-permalink'). feature suggestion by David Dickens.\n''2005.10.09 [1.0.1]'' combined documentation and code in a single tiddler\n''2005.08.15 [1.0.0]'' Initial Release\n<<<\n!!!!!Credits\n<<<\nThis feature was developed by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]].\nSupport for BACK/FORWARD buttons adapted from code developed by Clint Checketts\n<<<\n!!!!!Code\n***/\n//{{{\nversion.extensions.SinglePageMode= {major: 2, minor: 2, revision: 0, date: new Date(2006,6,1)};\n\nif (config.options.chkSinglePageMode==undefined) config.options.chkSinglePageMode=false;\nconfig.shadowTiddlers.AdvancedOptions += "\sn<<option chkSinglePageMode>> Display one tiddler at a time";\n\nif (config.options.chkTopOfPageMode==undefined) config.options.chkTopOfPageMode=false;\nconfig.shadowTiddlers.AdvancedOptions += "\sn<<option chkTopOfPageMode>> Always open tiddlers at the top of the page";\n\nconfig.SPMTimer = 0;\nconfig.lastURL = window.location.hash;\nfunction checkLastURL()\n{\n if (!config.options.chkSinglePageMode)\n { window.clearInterval(config.SPMTimer); config.SPMTimer=0; return; }\n if (config.lastURL == window.location.hash)\n return;\n var tiddlerName = convertUTF8ToUnicode(decodeURI(window.location.hash.substr(1)));\n tiddlerName=tiddlerName.replace(/\s[\s[/,"").replace(/\s]\s]/,""); // strip any [[ ]] bracketing\n if (tiddlerName.length) story.displayTiddler(null,tiddlerName,1,null,null);\n}\n\nif (Story.prototype.SPM_coreDisplayTiddler==undefined) Story.prototype.SPM_coreDisplayTiddler=Story.prototype.displayTiddler;\nStory.prototype.displayTiddler = function(srcElement,title,template,animate,slowly)\n{\n if (config.options.chkSinglePageMode) {\n window.location.hash = encodeURIComponent(String.encodeTiddlyLink(title));\n config.lastURL = window.location.hash;\n document.title = wikifyPlain("SiteTitle") + " - " + title;\n story.closeAllTiddlers();\n if (!config.SPMTimer) config.SPMTimer=window.setInterval(function() {checkLastURL();},1000);\n }\n if (config.options.chkTopOfPageMode) { story.closeTiddler(title); window.scrollTo(0,0); srcElement=null; }\n this.SPM_coreDisplayTiddler(srcElement,title,template,animate,slowly)\n}\n\nif (Story.prototype.SPM_coreDisplayTiddlers==undefined) Story.prototype.SPM_coreDisplayTiddlers=Story.prototype.displayTiddlers;\nStory.prototype.displayTiddlers = function(srcElement,titles,template,unused1,unused2,animate,slowly)\n{\n // suspend single-page mode when displaying multiple tiddlers\n var save=config.options.chkSinglePageMode;\n config.options.chkSinglePageMode=false;\n this.SPM_coreDisplayTiddlers(srcElement,titles,template,unused1,unused2,animate,slowly);\n config.options.chkSinglePageMode=save;\n}\n//}}}

an introduction to ~TiddlyWiki

~TiddlyWiki User's Guide

\n/***\nPlace your custom CSS here\n***/\n/*{{{*/\n\n/***\nNew styles\n***/\n\n#guideHeading {\n font-family: "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;\n font-family: Georgia, "Lucida Bright", Lucidabright, "Bitstream Vera Serif", serif;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 0.3em;\n font-weight: 900;\n font-size: 1.5em;\n color: #aaa;\n background: transparent;\n border-top: solid 0.3em #703;\n border-bottom: solid 2px #ddd;\n padding: 0 1em;\n margin: 0 0 0.5em 0;\n}\n\n.boldStatement {\n margin: 2em 10% 1em;\n padding: 1em 10%;\n background: #f8f8f8;\n font-size: 110%;\n font-weight: bold;\n text-align: center;\n border: #703 solid 1px;\n border-width: 0 0.7em;\n}\n\n.userTypes, .userTypesBlock {\n padding: 0.1em 0.3em;\n background: #dfd;\n border: 1px solid #bfb;\n font-family: Monaco, "Lucida Sans Typewriter", "Courier New", sans-serif;\n font-size: 95%;\n}\n\n.userTypes code, .userTypesBlock code {\n color: inherit;\n font-size: inherit;\n font-family: inherit;\n}\n\n.userTypesBlock {\n margin: 0.2em;\n padding: 0.6em;\n line-height: 1.5em;\n}\n\n/***\nNavbar stuff\n***/\n.navbar {\n background: #f8f8f8;\n border-top: solid 1px #703;\n margin: 0;\n padding: 0.5em;\n font-weight: bold;\n}\n\n.navbar .prev, .navbar .next {\n margin: 0;\n padding: 0;\n width: 48%;\n top: 0;\n}\n\n.navbar a.tiddlyLinkExisting { font-weight: bold; }\n\n.navbar .prev { float: left; text-align: left; }\n.navbar .next { float: right; text-align: right; }\n\n\n/***\nfont settings\n***/\n\n#contentWrapper {\n font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;\n font-family: "Calisto MT", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;\n}\n\na.tiddlyLinkExisting {\n font-weight: normal;\n}\n\n#displayArea {\n font-size: 1.4em;\n}\n\n#displayArea a:hover {\n text-decoration: underscore;\n background: transparent;\n color: #04b;\n}\n\n.title, #displayArea h1, #displayArea h2, #displayArea h3, #displayArea h4, #displayArea h5 {\n font-family: "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;\n font-family: Georgia, "Lucida Bright", Lucidabright, "Bitstream Vera Serif", serif;\n background: transparent;\n border-bottom: 1px solid #f8f8f8;\n padding: 0;\n margin: 1em 0 0.5em 0;\n}\n\n.title {\n font-size: 3em;\n text-align: center;\n background: #f8f8f8;\n padding: 0.4em;\n border: 2px solid #703;\n}\n\n#displayArea h5 { margin-bottom: 0 }\n\n#displayArea h2 {\nbackground: #f8f8f8;\npadding: 0.4em;\nborder: 0 solid #703;\nborder-left-width: 1.7em;\nborder-bottom-width: 2px;\n}\n\n.viewer {\n line-height: 1.8em;\n}\n\n.viewer pre {\n font-family: Monaco, "Lucida Sans Typewriter", "Courier New", sans-serif;\n font-size: 0.8em;\n}\n\n.editor {\n font-family: Monaco, "Lucida Sans Typewriter", "Courier New", sans-serif;\n font-size: 0.7em;\n line-height: 1.2em;\n}\n\nh1 {font-size: 2.2em;}\nh2 {font-size: 1.8em;}\nh3 {font-size: 1.5em;}\nh4 {font-size: 1.2em;}\nh5 {font-size: 1em; color: #000}\n\n\n/***\nlayout stuff\n***/\n\n.button {\n border-color: transparent;\n}\n\n#displayArea .title { margin: 0; }\n\n#mainMenu {\n width: 210px;\n text-align: center;\n}\n\n#displayArea {\n margin: 0 0 1em 210px;\n padding: 0 2em 0 1em;\n}\n\n/***\nstuff not in use..\n***/\n\n.XXtitle:first-letter {\n font-size: 400%;\n font-weight: 900;\n font-family: 'Brush Script MT';\n font-style: italic;\n background: #BA8299;\n color: #fff;\n margin-right: 0;\n}\n\n/*}}}*/\n

[ not sure where this will end up. maybe the content will be covered in the initial tutorial, and this section can be condensed more into a reference kinda thing ]\n\n!!!Titling\nThe ~TiddlyWiki system provides a title and a sub-title for your ~TiddlyWiki. These are stored in the tiddlers ~SiteTitle and ~SiteSubtitle. The default ~SiteTitle is "My ~TiddlyWiki" and the default ~SiteSubtitle is "a reusable non-linear personal web notebook"; they are shown in your browser title bar and in the blue header area in your ~TiddlyWiki window.\n\nTo change them, just edit the ~SiteTitle and ~SiteSubtitle tiddlers (or create them if they don't already exist).\n!!!The main menu (left column)\nBy default, a ~TiddlyWiki's main menu is displayed as a column on the left side of the page; the default content in the shadow MainMenu is the single entry "~GettingStarted".\n\nThe ~MainMenu is just another tiddler, so you can create or edit the tiddler named "~MainMenu", and put whatever you like in it; you will probably want to use it to link to the tiddlers you use the most, but you can add images and whatnot just like any other tiddler, and they will show up in your left side column.\n!!!The right column\nThe default right column contains several useful zones. At the top is a collection of useful ~TiddlyWiki functions.\n* ''search'': provides a fast, full-text search of your ~TiddlyWiki\n* ''close all'': close every displayed tiddler (except ones that you are in the middle of editing)\n* ''permaview'': update the URL in your browser's location bar to a special URL that when followed, will open all the tiddlers you currently have open (meaning you can bookmark the current view)\n* ''new tiddler'': create a new, blank tiddler\n* ''new journal'': create a new tiddler with the current date as the title\n* ''save changes'': save changes you've made to the hard drive\n!!Saving\nblah blah\n\n{{navbar{\n{{next{\n[[next: Definitions >>|Definitions]]\n}}}{{prev{\n[[<< previously: Using TiddlyWiki|Using TiddlyWiki]]\n}}}\n}}}\n

Welcome aboard. This document will introduce you to ~TiddlyWiki and get you up to speed. Links to other sources of ~TiddlyWiki documentation are available on [[the author's site|http://danielbaird.com/tiddlywikiguides/]].\n!!What is ~TiddlyWiki?\n{{boldStatement{\n~TiddlyWiki is a single file, self-contained wiki for managing micro-content, written in ~JavaScript.\n}}}\nIf you completely understand all of that sentence, you should go straight on to the [[next section|Getting TiddlyWiki]]. For the rest of us, read on for the longer explanation.\n!!!!!It's a single file\nA complete ~TiddlyWiki is stored in a single file on your computer. That makes it super-easy to move your ~TiddlyWiki around on a USB stick or by emailing it to yourself.\n!!!!!It's self-contained\nThe single file that is a ~TiddlyWiki contains not only all of your data, but all the machinery to edit and manuipulate it. All you need is a modern web browser, like Mozilla Firefox or Microsoft Internet Explorer. You don't need to have any other special programs installed on your computer, and you don't need to be connected to the Internet.\n\nThe same ~TiddlyWiki file will work on just about any computer: Windows ~PCs, Apple Macs, Linux and BSD boxes..\n!!!!!It's a wiki\nA wiki is a collection of web pages, like a normal web site, except that every page can be edited, easily and immediately. Wiki systems are often used to collaboratively manage documention for large projects, and also sometimes used by a single user as a kind of personal notebook.\n!!!!!It manages micro-content\nMost web sites and wikis manage information as pages. ~TiddlyWiki is different -- it saves your stuff in smaller chunks (each chunk is called a 'tiddler'). Information in small chunks like this is called 'micro-content', and once you start using ~TiddlyWiki, you realise that micro-content is a natural fit to a lot of the stuff you deal with every day.\n\nTo really get a idea of what ~TiddlyWiki can do for you, you're going to have to try it out. Don't worry -- it's a single file, remember. So go on to the [[next section|Getting TiddlyWiki]] and we will get started.\n\n{{navbar{\n{{next{\n[[next: Getting TiddlyWiki >>|Getting TiddlyWiki]]\n}}}\n}}}

/***\n<<tiddler UploadPluginDoc>>\n!Code\n***/\n//{{{\nversion.extensions.UploadPlugin = {\n major: 3, minor: 3, revision: 1, \n date: new Date(2006,3,30),\n type: 'macro',\n source: 'http://tiddlywiki.bidix.info/#UploadPlugin',\n docs: 'http://tiddlywiki.bidix.info/#UploadPluginDoc'\n};\n//}}}\n\n////+++!![config.lib.file]\n\n//{{{\nif (!config.lib) config.lib = {};\nif (!config.lib.file) config.lib.file= {\n author: 'BidiX',\n version: {major: 0, minor: 1, revision: 0}, \n date: new Date(2006,3,9)\n};\nconfig.lib.file.dirname = function (filePath) {\n var lastpos;\n if ((lastpos = filePath.lastIndexOf("/")) != -1) {\n return filePath.substring(0, lastpos);\n } else {\n return filePath.substring(0, filePath.lastIndexOf("\s\s"));\n }\n};\nconfig.lib.file.basename = function (filePath) {\n var lastpos;\n if ((lastpos = filePath.lastIndexOf("#")) != -1) \n filePath = filePath.substring(0, lastpos);\n if ((lastpos = filePath.lastIndexOf("/")) != -1) {\n return filePath.substring(lastpos + 1);\n } else\n return filePath.substring(filePath.lastIndexOf("\s\s")+1);\n};\nwindow.basename = function() {return "@@deprecated@@";};\n//}}}\n////===\n\n////+++!![config.lib.log]\n\n//{{{\nif (!config.lib) config.lib = {};\nif (!config.lib.log) config.lib.log= {\n author: 'BidiX',\n version: {major: 0, minor: 1, revision: 0}, \n date: new Date(2006,3,9)\n};\nconfig.lib.Log = function(tiddlerTitle, logHeader) {\n if (version.major < 2)\n this.tiddler = store.tiddlers[tiddlerTitle];\n else\n this.tiddler = store.getTiddler(tiddlerTitle);\n if (!this.tiddler) {\n this.tiddler = new Tiddler();\n this.tiddler.title = tiddlerTitle;\n this.tiddler.text = "| !date | !user | !location |" + logHeader;\n this.tiddler.created = new Date();\n this.tiddler.modifier = config.options.txtUserName;\n this.tiddler.modified = new Date();\n if (version.major < 2)\n store.tiddlers[tiddlerTitle] = this.tiddler;\n else\n store.addTiddler(this.tiddler);\n }\n return this;\n};\n\nconfig.lib.Log.prototype.newLine = function (line) {\n var now = new Date();\n var newText = "| ";\n newText += now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getFullYear() + " ";\n newText += now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" | ";\n newText += config.options.txtUserName + " | ";\n var location = document.location.toString();\n var filename = config.lib.file.basename(location);\n if (!filename) filename = '/';\n newText += "[["+filename+"|"+location + "]] |";\n this.tiddler.text = this.tiddler.text + "\sn" + newText;\n this.addToLine(line);\n};\n\nconfig.lib.Log.prototype.addToLine = function (text) {\n this.tiddler.text = this.tiddler.text + text;\n this.tiddler.modifier = config.options.txtUserName;\n this.tiddler.modified = new Date();\n if (version.major < 2)\n store.tiddlers[this.tiddler.tittle] = this.tiddler;\n else {\n store.addTiddler(this.tiddler);\n story.refreshTiddler(this.tiddler.title);\n store.notify(this.tiddler.title, true);\n }\n if (version.major < 2)\n store.notifyAll(); \n};\n//}}}\n////===\n\n////+++!![config.lib.options]\n\n//{{{\nif (!config.lib) config.lib = {};\nif (!config.lib.options) config.lib.options = {\n author: 'BidiX',\n version: {major: 0, minor: 1, revision: 0}, \n date: new Date(2006,3,9)\n};\n\nconfig.lib.options.init = function (name, defaultValue) {\n if (!config.options[name]) {\n config.options[name] = defaultValue;\n saveOptionCookie(name);\n }\n};\n//}}}\n////===\n\n////+++!![PasswordTweak]\n\n//{{{\nversion.extensions.PasswordTweak = {\n major: 1, minor: 0, revision: 2, date: new Date(2006,3,11),\n type: 'tweak',\n source: 'http://tiddlywiki.bidix.info/#PasswordTweak'\n};\n//}}}\n/***\n!!config.macros.option\n***/\n//{{{\nconfig.macros.option.passwordCheckboxLabel = "Save this password on this computer";\nconfig.macros.option.passwordType = "password"; // password | text\n\nconfig.macros.option.onChangeOption = function(e)\n{\n var opt = this.getAttribute("option");\n var elementType,valueField;\n if(opt) {\n switch(opt.substr(0,3)) {\n case "txt":\n elementType = "input";\n valueField = "value";\n break;\n case "pas":\n elementType = "input";\n valueField = "value";\n break;\n case "chk":\n elementType = "input";\n valueField = "checked";\n break;\n }\n config.options[opt] = this[valueField];\n saveOptionCookie(opt);\n var nodes = document.getElementsByTagName(elementType);\n for(var t=0; t<nodes.length; t++) {\n var optNode = nodes[t].getAttribute("option");\n if (opt == optNode) \n nodes[t][valueField] = this[valueField];\n }\n }\n return(true);\n};\n\nconfig.macros.option.handler = function(place,macroName,params)\n{\n var opt = params[0];\n var size = 15;\n if (params[1])\n size = params[1];\n if(config.options[opt] === undefined) {\n return;}\n var c;\n switch(opt.substr(0,3)) {\n case "txt":\n c = document.createElement("input");\n c.onkeyup = this.onChangeOption;\n c.setAttribute ("option",opt);\n c.size = size;\n c.value = config.options[opt];\n place.appendChild(c);\n break;\n case "pas":\n // input password\n c = document.createElement ("input");\n c.setAttribute("type",config.macros.option.passwordType);\n c.onkeyup = this.onChangeOption;\n c.setAttribute("option",opt);\n c.size = size;\n c.value = config.options[opt];\n place.appendChild(c);\n // checkbox link with this password "save this password on this computer"\n c = document.createElement("input");\n c.setAttribute("type","checkbox");\n c.onclick = this.onChangeOption;\n c.setAttribute("option","chk"+opt);\n place.appendChild(c);\n c.checked = config.options["chk"+opt];\n // text savePasswordCheckboxLabel\n place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));\n break;\n case "chk":\n c = document.createElement("input");\n c.setAttribute("type","checkbox");\n c.onclick = this.onChangeOption;\n c.setAttribute("option",opt);\n place.appendChild(c);\n c.checked = config.options[opt];\n break;\n }\n};\n//}}}\n/***\n!! Option cookie stuff\n***/\n//{{{\nwindow.loadOptionsCookie_orig_PasswordTweak = window.loadOptionsCookie;\nwindow.loadOptionsCookie = function()\n{\n var cookies = document.cookie.split(";");\n for(var c=0; c<cookies.length; c++) {\n var p = cookies[c].indexOf("=");\n if(p != -1) {\n var name = cookies[c].substr(0,p).trim();\n var value = cookies[c].substr(p+1).trim();\n switch(name.substr(0,3)) {\n case "txt":\n config.options[name] = unescape(value);\n break;\n case "pas":\n config.options[name] = unescape(value);\n break;\n case "chk":\n config.options[name] = value == "true";\n break;\n }\n }\n }\n};\n\nwindow.saveOptionCookie_orig_PasswordTweak = window.saveOptionCookie;\nwindow.saveOptionCookie = function(name)\n{\n var c = name + "=";\n switch(name.substr(0,3)) {\n case "txt":\n c += escape(config.options[name].toString());\n break;\n case "chk":\n c += config.options[name] ? "true" : "false";\n // is there an option link with this chk ?\n if (config.options[name.substr(3)]) {\n saveOptionCookie(name.substr(3));\n }\n break;\n case "pas":\n if (config.options["chk"+name]) {\n c += escape(config.options[name].toString());\n } else {\n c += "";\n }\n break;\n }\n c += "; expires=Fri, 1 Jan 2038 12:00:00 UTC; path=/";\n document.cookie = c;\n};\n//}}}\n/***\n!! Initializations\n***/\n//{{{\n// define config.options.pasPassword\nif (!config.options.pasPassword) {\n config.options.pasPassword = 'defaultPassword';\n window.saveOptionCookie('pasPassword');\n}\n// since loadCookies is first called befor password definition\n// we need to reload cookies\nwindow.loadOptionsCookie();\n//}}}\n////===\n\n////+++!![config.macros.upload]\n\n//{{{\nconfig.macros.upload = {\n accessKey: "U",\n formName: "UploadPlugin",\n contentType: "text/html;charset=UTF-8",\n defaultStoreScript: "store.php"\n};\n\n// only this two configs need to be translated\nconfig.macros.upload.messages = {\n aboutToUpload: "About to upload TiddlyWiki to %0",\n errorDownloading: "Error downloading",\n errorUploadingContent: "Error uploading content",\n fileNotFound: "file to upload not found",\n fileNotUploaded: "File %0 NOT uploaded",\n mainFileUploaded: "Main TiddlyWiki file uploaded to %0",\n urlParamMissing: "url param missing",\n rssFileNotUploaded: "RssFile %0 NOT uploaded",\n rssFileUploaded: "Rss File uploaded to %0"\n};\n\nconfig.macros.upload.label = {\n promptOption: "Save and Upload this TiddlyWiki with UploadOptions",\n promptParamMacro: "Save and Upload this TiddlyWiki in %0",\n saveLabel: "save to web", \n saveToDisk: "save to disk",\n uploadLabel: "upload" \n};\n\nconfig.macros.upload.handler = function(place,macroName,params){\n // parameters initialization\n var storeUrl = params[0];\n var toFilename = params[1];\n var backupDir = params[2];\n var uploadDir = params[3];\n var username = params[4];\n var password; // for security reason no password as macro parameter\n var label;\n if (document.location.toString().substr(0,4) == "http")\n label = this.label.saveLabel;\n else\n label = this.label.uploadLabel;\n var prompt;\n if (storeUrl) {\n prompt = this.label.promptParamMacro.toString().format([this.dirname(storeUrl)]);\n }\n else {\n prompt = this.label.promptOption;\n }\n createTiddlyButton(place, label, prompt, \n function () {\n config.macros.upload.upload(storeUrl, toFilename, uploadDir, backupDir, username, password); \n return false;}, \n null, null, this.accessKey);\n};\nconfig.macros.upload.UploadLog = function() {\n return new config.lib.Log('UploadLog', " !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |" );\n};\nconfig.macros.upload.UploadLog.prototype = config.lib.Log.prototype;\nconfig.macros.upload.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir, backupDir) {\n var line = " [[" + config.lib.file.basename(storeUrl) + "|" + storeUrl + "]] | ";\n line += uploadDir + " | " + toFilename + " | " + backupDir + " |";\n this.newLine(line);\n};\nconfig.macros.upload.UploadLog.prototype.endUpload = function() {\n this.addToLine(" Ok |");\n};\nconfig.macros.upload.basename = config.lib.file.basename;\nconfig.macros.upload.dirname = config.lib.file.dirname;\nconfig.macros.upload.upload = function(storeUrl, toFilename, uploadDir, backupDir, username, password)\n{\n // parameters initialization\n storeUrl = (storeUrl ? storeUrl : config.options.txtUploadStoreUrl);\n toFilename = (toFilename ? toFilename : config.options.txtUploadFilename);\n if (toFilename === '') {\n toFilename = config.lib.file.basename(document.location.toString());\n }\n backupDir = (backupDir ? backupDir : config.options.txtUploadBackupDir);\n uploadDir = (uploadDir ? uploadDir : config.options.txtUploadDir);\n username = (username ? username : config.options.txtUploadUserName);\n password = config.options.pasUploadPassword; // for security reason no password as macro parameter\n\n clearMessage();\n // only for forcing the message to display\n if (version.major < 2)\n store.notifyAll();\n if (!storeUrl) {\n alert(config.macros.upload.messages.urlParamMissing);\n return;\n }\n \n var log = new this.UploadLog();\n log.startUpload(storeUrl, toFilename, uploadDir, backupDir);\n if (document.location.toString().substr(0,5) == "file:") {\n saveChanges();\n }\n displayMessage(config.macros.upload.messages.aboutToUpload.format([this.dirname(storeUrl)]), this.dirname(storeUrl));\n this.uploadChanges(storeUrl, toFilename, uploadDir, backupDir, username, password);\n if(config.options.chkGenerateAnRssFeed) {\n //var rssContent = convertUnicodeToUTF8(generateRss());\n var rssContent = generateRss();\n var rssPath = toFilename.substr(0,toFilename.lastIndexOf(".")) + ".xml";\n this.uploadContent(rssContent, storeUrl, rssPath, uploadDir, '', username, password, \n function (responseText) {\n if (responseText.substring(0,1) != '0') {\n displayMessage(config.macros.upload.messages.rssFileNotUploaded.format([rssPath]));\n }\n else {\n if (uploadDir) {\n rssPath = uploadDir + "/" + config.macros.upload.basename(rssPath);\n } else {\n rssPath = config.macros.upload.basename(rssPath);\n }\n displayMessage(config.macros.upload.messages.rssFileUploaded.format(\n [config.macros.upload.dirname(storeUrl)+"/"+rssPath]), config.macros.upload.dirname(storeUrl)+"/"+rssPath);\n }\n // for debugging store.php uncomment last line\n //DEBUG alert(responseText);\n });\n }\n return;\n};\n\nconfig.macros.upload.uploadChanges = function(storeUrl, toFilename, uploadDir, backupDir, \n username, password) {\n var original;\n if (document.location.toString().substr(0,4) == "http") {\n original = this.download(storeUrl, toFilename, uploadDir, backupDir, username, password);\n return;\n }\n else {\n // standard way : Local file\n \n original = loadFile(getLocalPath(document.location.toString()));\n if(window.Components) {\n // it's a mozilla browser\n try {\n netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");\n var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]\n .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);\n converter.charset = "UTF-8";\n original = converter.ConvertToUnicode(original);\n }\n catch(e) {\n }\n }\n }\n //DEBUG alert(original);\n this.uploadChangesFrom(original, storeUrl, toFilename, uploadDir, backupDir, \n username, password);\n};\n\nconfig.macros.upload.uploadChangesFrom = function(original, storeUrl, toFilename, uploadDir, backupDir, \n username, password) {\n var startSaveArea = '<div id="' + 'storeArea">'; // Split up into two so that indexOf() of this source doesn't find it\n var endSaveArea = '</d' + 'iv>';\n // Locate the storeArea div's\n var posOpeningDiv = original.indexOf(startSaveArea);\n var posClosingDiv = original.lastIndexOf(endSaveArea);\n if((posOpeningDiv == -1) || (posClosingDiv == -1))\n {\n alert(config.messages.invalidFileError.format([document.location.toString()]));\n return;\n }\n var revised = original.substr(0,posOpeningDiv + startSaveArea.length) + \n allTiddlersAsHtml() + "\sn\st\st" +\n original.substr(posClosingDiv);\n var newSiteTitle;\n if(version.major < 2){\n newSiteTitle = (getElementText("siteTitle") + " - " + getElementText("siteSubtitle")).htmlEncode();\n } else {\n newSiteTitle = (wikifyPlain ("SiteTitle") + " - " + wikifyPlain ("SiteSubtitle")).htmlEncode();\n }\n revised = revised.replace(new RegExp("<title>[^<]*</title>", "im"),"<title>"+ newSiteTitle +"</title>");\n var response = this.uploadContent(revised, storeUrl, toFilename, uploadDir, backupDir, \n username, password, function (responseText) {\n if (responseText.substring(0,1) != '0') {\n alert(responseText);\n displayMessage(config.macros.upload.messages.fileNotUploaded.format([getLocalPath(document.location.toString())]));\n }\n else {\n if (uploadDir !== '') {\n toFilename = uploadDir + "/" + config.macros.upload.basename(toFilename);\n } else {\n toFilename = config.macros.upload.basename(toFilename);\n }\n displayMessage(config.macros.upload.messages.mainFileUploaded.format(\n [config.macros.upload.dirname(storeUrl)+"/"+toFilename]), config.macros.upload.dirname(storeUrl)+"/"+toFilename);\n var log = new config.macros.upload.UploadLog();\n log.endUpload();\n store.setDirty(false);\n }\n // for debugging store.php uncomment last line\n //DEBUG alert(responseText);\n }\n );\n};\n\nconfig.macros.upload.uploadContent = function(content, storeUrl, toFilename, uploadDir, backupDir, \n username, password, callbackFn) {\n var boundary = "---------------------------"+"AaB03x"; \n var request;\n try {\n request = new XMLHttpRequest();\n } \n catch (e) { \n request = new ActiveXObject("Msxml2.XMLHTTP"); \n }\n if (window.netscape){\n try {\n if (document.location.toString().substr(0,4) != "http") {\n netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');}\n }\n catch (e) { }\n } \n //DEBUG alert("user["+config.options.txtUploadUserName+"] password[" + config.options.pasUploadPassword + "]");\n // compose headers data\n var sheader = "\sr\sn";\n sheader += "--" + boundary + "\sr\snContent-disposition: form-data;name=\s"";\n sheader += config.macros.upload.formName +"\s"\sr\sn\sr\sn";\n sheader += "backupDir="+backupDir\n +";user=" + username \n +";password=" + password\n +";uploaddir=" + uploadDir\n + ";;\sr\sn"; \n sheader += "\sr\sn" + "--" + boundary + "\sr\sn";\n sheader += "Content-disposition: form-data;name=\s"userfile\s";filename=\s""+toFilename+"\s"\sr\sn";\n sheader += "Content-Type: " + config.macros.upload.contentType + "\sr\sn";\n sheader += "Content-Length: " + content.length + "\sr\sn\sr\sn";\n // compose trailer data\n var strailer = new String();\n strailer = "\sr\sn--" + boundary + "--\sr\sn";\n var data;\n data = sheader + content + strailer;\n //request.open("POST", storeUrl, true, username, password);\n request.open("POST", storeUrl, true);\n request.onreadystatechange = function () {\n if (request.readyState == 4) {\n if (request.status == 200)\n callbackFn(request.responseText);\n else\n alert(config.macros.upload.messages.errorUploadingContent);\n }\n };\n request.setRequestHeader("Content-Length",data.length);\n request.setRequestHeader("Content-Type","multipart/form-data; boundary="+boundary);\n request.send(data); \n};\n\n\nconfig.macros.upload.download = function(uploadUrl, uploadToFilename, uploadDir, uploadBackupDir, \n username, password) {\n var request;\n try {\n request = new XMLHttpRequest();\n } \n catch (e) { \n request = new ActiveXObject("Msxml2.XMLHTTP"); \n }\n try {\n if (uploadUrl.substr(0,4) == "http") {\n netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");\n }\n else {\n netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");\n }\n } catch (e) { }\n //request.open("GET", document.location.toString(), true, username, password);\n request.open("GET", document.location.toString(), true);\n request.onreadystatechange = function () {\n if (request.readyState == 4) {\n if(request.status == 200) {\n config.macros.upload.uploadChangesFrom(request.responseText, uploadUrl, \n uploadToFilename, uploadDir, uploadBackupDir, username, password);\n }\n else\n alert(config.macros.upload.messages.errorDownloading.format(\n [document.location.toString()]));\n }\n };\n request.send(null);\n};\n\n//}}}\n////===\n\n////+++!![Initializations]\n\n//{{{\nconfig.lib.options.init('txtUploadStoreUrl','store.php');\nconfig.lib.options.init('txtUploadFilename','');\nconfig.lib.options.init('txtUploadDir','');\nconfig.lib.options.init('txtUploadBackupDir','');\nconfig.lib.options.init('txtUploadUserName',config.options.txtUserName);\nconfig.lib.options.init('pasUploadPassword','');\nconfig.shadowTiddlers.UploadPluginDoc = "[[Full Documentation|http://tiddlywiki.bidix.info/l#UploadPluginDoc ]]\sn"; \n\n\n//}}}\n////===\n\n////+++!![Core Hijacking]\n\n//{{{\nconfig.macros.saveChanges.label_orig_UploadPlugin = config.macros.saveChanges.label;\nconfig.macros.saveChanges.label = config.macros.upload.label.saveToDisk;\n//}}}\n////===

!!Using ~TiddlyWiki\n!!!!!A brief note about "~WikiWords"\nIn the following examples, you will need to type some words in a special way, using capital letters for the start of each word, and leaving out the spaces between the words. A phrase typed this way is called a "~WikiWord". So, "these words are normal", but "~ThisIsAWikiWord". In a few minutes you'll know what that's all about, but first, we'll create a tiddler or two.\n!!!Creating Tiddlers\n~TiddlyWiki is about tiddlers, which are.. kinda hard to describe. Fortunately you can create one without knowing what it is -- so let's make one right now. Ignore the "~GettingStarted" stuff for the moment, and look at the right column of your ~TiddlyWiki. Click on the phrase "new tiddler". //Zzzip!// ...is the sound of an empty tiddler appearing onscreen, ready to edit.\n\nYou'll see three boxes that you can type into. Your cursor will be in the one-line box at the top, with the text "New Tiddler" highlighted. Type {{userTypes{~AboutMe}}} into that top box. Type it as a ~WikiWord like I have, by using capitals and leaving out the space in the middle.\n\nNow hit tab to go to the big box. This is the content of your tiddler. Delete the friendly message that is there, and type in some stuff about yourself. Something like:\n{{userTypesBlock{\nThis is my first tiddler.\nName: Daniel Baird\nFavourite TV Character: B A Baracus, played by Mr T\nCurrent Computer OS: Windows. Yes, Windows.\n}}}\nDon't admit to anything you wouldn't want your grandmother to know about.\n\nOk that's good. Ignore the one-line box at the bottom for now (it's for tags, we'll cover them soon). Click the "Done" button that's just above the title entry box. The edit boxes go away and you're looking at the tiddler you just created. Good job! You've made your first tiddler -- spend a few seconds feeling happy about it.\n\nNow, close that tiddler with the "close" button (the button bar appears when you hover your mouse over the tiddler). Make another tiddler by clicking on "new tiddler" again. Make the title {{userTypes{~SecondTiddler}}}, and add this content:\n{{userTypesBlock{\nThis is my second tiddler.\nFind out more ~AboutMe in my first tiddler.\n}}}\nBe careful to type "~AboutMe" as a ~WikiWord. Click "Done" to get out of edit mode, and you're looking at your second tiddler. You'll notice that the "~AboutMe" bit is coloured blue.\n\nWhat does the blue mean? ~TiddlyWiki has automatically made the ~WikiWord "~AboutMe" into a link to the ~AboutMe tiddler you created earlier. Click it! Your ~AboutMe tiddler opens up. Nice, huh. If you forget your favourite TV character, or your name, you'll have that information right at your fingertips.. '':)''\n\nOkay, you've got your first couple of tiddlers under your belt, so let's move on to some more interesting stuff.\n!!!Star Wars?\nNow, I have a problem. ~TiddlyWiki can be used in a lot of different ways, so it's hard to come up with a single example that everyone can relate to. So let's try this: Star Wars. You're probably expecting to use ~TiddlyWiki as a to-do list or documentation manager or something, but just for now, please humour me and pretend that you want to produce a reference to the characters and plot events in the Star Wars movies. Okay? I promise it'll be worth it.\n\nSo.. first, let's save what you've done and clean up a bit. First, click on "save changes" in the right column. After a tiny pause, you will see a little notification box appear in the right corner of your page, saying something like "Main ~TiddlyWiki saved". Click on the notification's "close" button to get rid of it. Now, click on "close all" (in the right sided column). Any open tiddlers get closed, unless you are in the middle of editing them.\n\nNow we have a fairly blank screen, make a new tiddler (click "new tiddler" in the right column). Give it a title of {{userTypes{~AnnakinSkywalker}}} -- type it as a ~WikiWord, with no spaces. Remember, the title goes into the one-line text box at the top.\n\nFor content, add this. Type it just like you see here, ~WikiWords and all (or just copy-and-paste it):\n{{userTypesBlock{\nAnnakin trained as a jedi under ~Qui-GonJinn and later ~Obi-WanKenobi.\n\nHe hung around with ~PadmeAmidala for a while, but eventually turned to the dark side and became ~DarthVader.\n\nEventually Annakin's son, ~LukeSkywalker, turned Annakin/Vader back to the light side, and Annakin was killed battling the Sith Emperor.\n}}}\n\nOnce you've entered it click "Done", and look at your tiddler. Nice, ain't it. And see what's happened to the ~WikiWords you typed: they've been made into tiddler links, even though you don't actually have any tiddlers called "~Obi-WanKenobi" or "~DarthVader". It might seem weird having links to tiddlers you haven't written yet, but ~TiddlyWiki is okay with that; after all, you might eventually write those other tiddlers. In fact, let's do one right now. Try clicking on "~PadmeAmidala".\n\n~TiddlyWiki shows you the ~PadmeAmidala tiddler, with a message saying that it doesn't exist, and that you can double-click to create it. Well, let's not argue with the system.. double-click where it says, and the ~PadmeAmidala tiddler changes to show the edit view. (In fact, you can double-click on any tiddler to edit it; it's a shortcut for clicking the "edit" button.)\n\nLet's say something about Padme. Save it when you're done:\n{{userTypesBlock{\nPadme was the queen of the planet {{{[[}}}Naboo{{{]]}}} and later its Senator.\n\nShe fell in love and secretly married ~AnnakinSkywalker. After Annakin turned evil, Padme died just after delivering Annakin's twin children ~LeiaOrgana and ~LukeSkywalker.\n}}}\nNotice that you didn't need to type the title; you already did when you wrote the Annakin tiddler, so ~TiddlyWiki knew the title from the link you clicked. In your Padme tiddler, you will notice that the link to the existing Annakin tiddler is written in ''bold'', whereas the links to non-existant tiddlers are in //italics//.\n\nWe've also done something new: double square brackets around the word "Naboo". You can see that Naboo has been made into a tiddler link; the square brackets tell ~TiddlyWiki to make some text into a tiddler link, even though the text mightn't be a ~WikiWord. As well as single words like "Naboo", you can also use double square brackets to link to tiddlers with spaces in their names.\n\n\n@@lots more tutorial style stuff to go here.. should cover tiddler links with square brackets, linking to other pages, basic formatting, what macros are, etc.@@\n\n{{navbar{\n{{next{\n[[next: The TiddlyWiki Screen >>|The TiddlyWiki Screen]]\n}}}{{prev{\n[[<< previously: Getting TiddlyWiki|Getting TiddlyWiki]]\n}}}\n}}}

\n<div class='toolbar' macro='toolbar -closeTiddler closeOthers permalink +editTiddler'></div><div class='viewer' macro='view text wikified'></div>\n<div class='tagClear'></div>

config.options.chkAnimate = false;\nconfig.options.chkSinglePageMode = true;