This article will briefly introduce the features of TiddlyWiki and share some common reference links, resources, plug-ins, and solutions to common problems for those with similar needs.

TiddlyWiki is officially a “non-linear personal Web notebook.” Compared with other note-taking and Wiki systems, one of its biggest features is that the program body and data are all in a single HTML file, while still having a very powerful function and plug-in system. In my opinion, TiddlyWiki is one of the best places to manage a personal knowledge base of words, code, and mathematical formulas.

Experience TiddlyWiki at Dimpurr’s Knowledge Base #1: note.Dimpurr.com/.

Note that any visitor can experience the full functionality of TiddlyWiki, including editing and Settings. Don’t worry, you can do whatever you want, because you can’t save the changes to my server, you can only download them locally.

TiddlyWiki preview

I’ve been looking for a quick and easy way to type notes and maintain a personal knowledge base Wiki for a long time.

Note-taking apps like EverNote, WizNote, and OneNote are great, but there are issues with cross-platform clients, nice startup speeds, and even nice typography by default. Also, regular note-taking software is not up to the Wiki level Tag system. There are, of course, classic MediaWiki systems, as well as numerous static Wiki systems and Wiki knowledgebase clients. Yet MediaWiki is big, complex and ugly; Wiki clients can be good or bad, poorly designed or powerful and beautiful, but the biggest limitation is that they are often not cross-platform; Some Markdown-based Wiki systems that can be deployed with Github Pages are functionally almost as good as I want them to be, but the complexity of writing new entries and deploying them each time is unacceptable.

As you can probably tell, MY tastes are pretty tricky and my needs are pretty weird… In high school, I didn’t have time to mess around, so I set up a Ghost blog to store simple reading notes, but after I crashed SQLite on the VPS, WIKI#0 in heaven became history, except for a few articles left in the database. The summer after I graduated from high school, I decided to start looking for a Wiki system I needed. So, I found TiddlyWiki.

The characteristics of TiddlyWiki

  • The program and data are all stored in a single file HTML
    • This allows TiddlyWiki to run on your native machine, like a green, single-file application that runs in a browser. You can upload it to a server and share it with everyone on the network
    • And deployment is extremely simple, just need a server that can hold HTML, upload it and use it, no PHP, Node.js, Python or any other language, and no configuration steps
    • You can always save TiddlyWiki from your server to your local PC or usb flash drive so you can take it to any environment without Internet access
  • As a Wiki system, it has basic features such as Tag tags and item association, and a powerful editor
    • You can Tag items quickly
    • You can use[[entry name]]Such syntax quickly links to other entries
    • You can use the item name as a Tag for other items to set the effect of child items
    • You can even use< < the list - links "[tag (ACM) sort [title]] - [tag [OJ draft and antithesis]]" > >Such a filter generates a list of items that contain a particular Tag but remove another particular Tag!
    • TiddlyWiki uses a syntax similar to Markdown but slightly different, but it’s easy to get used to and very useful
  • Convenient plugin and theme system
    • Plugins support code highlighting, LaTex mathematical formulas, standard Markdown syntax, article embedding TODO lists, entry encryption locking…
    • You can install Material Design style, blog style style themes…
  • Unique appearance and operation design, good use experience
    • TiddlyWiki is a typical single-page Web application, so everything is loaded and cached in the browser when you open it. In other words, you don’t need to refresh the page, and the experience is very fast and smooth
    • TiddlyWiki has an index of search and multiple entries on the right, while on the left you can expand multiple and closed entries in a card-like manner and generate static links for specific order and combinations of entries, making it easy to navigate and use

How to start

Go to tiddlywiki.com and read the GettingStarted entry below. This will change depending on your browser version, but in general, you can Download a new TiddlyWiki HTML file by clicking on the Download Empty button. Alternatively, you can follow the official instructions to install from NPM via Node.js.

You’re ready to play and use it locally.

Note that you may need to go to the Settings page to manually install and enable the Chinese language pack.

Of course, I think most people have the need to upload to a server for sending addresses and sharing online. The default tiddlywiki.html will be renamed to index.html to make it easier to access.

However, if you upload your HTML file directly to the server, you will find that each time you save the HTML file, you will have to download an edited HTML file locally, and then you will need to upload and replace it with FTP again. This problem can be solved by simply configuring PHP or Node.js to save services.

Extras: Tiddlyspot.com offers what appears to be a free online hosting service for TiddlyWiki, as well as some templates specifically for GTD; TiddlyDesktop is a browser, or desktop client, dedicated to TiddlyWiki.

PHP save

PHP saves are very easy to configure. The official tutorial is here: tiddlywiki.com/#Saving%20o…

  1. inCode.google.com/archive/p/b…Download aTiddlyHome_*.*.*.zip
  2. To find it_th\lib\store.phpThis file, unzip and edit inside$USERS = array( 'UserName1'=>'Password1', etc)For the username and password you want
  3. Upload store.php to your server, go to TiddlyWiki > Save > TiddlySpot save module, set advanced Settings > Server URL to the full address of the store.php file, then fill in the username and password
  4. When you click Save, it will now be saved directly to the server
  5. Note:
    1. You may need to set the backup file name to index.html
    2. Each save automatically creates a backup that you can manually clean up periodically
    3. It is recommended to change the backup folder to backup, which will save the backup in the backup/ subdirectory instead of. The root directory

Since TiddlyWiki does not have a user login interface, this Settings page acts as a login page. Passwords are saved by browser, so if you want to log out in your current browser, go to the Settings page and clear the password Settings. If you open the Wiki in a different browser, you will need to enter the Settings and re-enter the password (equivalent to logging in) to use the online save.

Possible store.php errors

If you do not see 500 Internal Servel Error in the Network panel of the browser developer tools, you can try to open the PHP Error log to check the Error:

Vim /usr/local/php/etc/php-fpm.conf php_flag[display_errors] = On # display error message #php_admin_value[error_log] = /usr/local/php/var/log/php_errors.log #php_admin_flag[log_errors] = on cat /usr/local/php/var/log/php-error.log # Or you can view the error directly in your browserCopy the code

If you have a problem with the split() function:

TiddlyWiki store.php split() error

If this function is deprecated on the version of PHP you’re running, edit the store. PHP file and replace all splits with explode.

Resources that might be used

Tiddlywik-related resources collected by me will be sorted into my knowledge base at note.dimpurr.com/#TiddlyWiki…

Some of the more important ones include:

  • Tw5-zh.tiddlyspot.com (thanks Bennyli for reminding)
  • See tiddlywiki.com/#WikiText for editor markup syntax
  • TiddlyWiki Community tiddlywiki.com/#Community:…
  • Tid. li/tw5/ Plugins…
  • CommunityPlugins (larger index of a third party plugin) Erwanm.github. IO /tw-communit…

The plugin

It should be noted that the latest version of TiddlyWiki, version 5, has a significant change that causes all plug-ins designed for the previous version to fail to install. You’ll probably find a lot of old plugin sources on the Web, and the way to install them that tells you to use the new conditions and paste the plugin code content is no longer usable. So make sure that any plugin you find supports TW5.

At present, the correct plug-in installation in addition to the Settings page source online official plug-in installed, for third-party plug-in source, usually you drag third-party plug-in source links, icon or button (not necessarily valid), or the plugin Settings page name (must be valid), drag on your Wiki page, complete the import installation.

Here I amway I use the plugin, more can be in the official plugin, the theme market and the above plugin source.

  • TiddlyWiki official plug-in library
    • Highlight.js: syntax highlighting code, a must for programmers
    • Markdown Parser adds standard Markdown support if you want to import and export from md format platforms. In most cases, I recommend using the native TiddlyWiki syntax if possible because it is more powerful and has better plug-in support
    • KaTeX: Mathematical typography formula input and typography
  • MathJaxA more powerful TeX parser than KaTeX
    • You may need to make minor changes to one line of plugin code to be compatible with the new theme
  • TiddlyWiki Community Search
    • Tw5-checklist is a lightweight plug-in that I often use to embed CHECKLIST in articles, which is suitable for making some learning plans
    • Encrypt-tiddler enables password viewing for a single entry
  • tid.li Plugins
    • ToDoNow is a powerful plugin embedded in Todolist that is almost too powerful
    • EditorCounter & Autosaver add word count and automatically save when certain word changes are made to the editor.
  • TiddlyMap is a powerful and outrageous flowchart, mind map and other drawing plug-in

There are quite a few themes, but I’m happy with the default theme (you might notice that TiddlyWiki’s default style is coincidentally similar to my Clearision theme’s grey style), and I’m too lazy to change it.

Of course, although content data rarely takes up much space, it is important to note that installing too many unnecessary plug-ins can quickly increase the size of your HTML source files.

Display mathematical formulas in TiddlyWiki using the MathJax plug-in

About Text Editing

TiddlyWiki table layout

Be sure to spend some time reading the editor markup syntax reference at tiddlywiki.com/#WikiText, you’ll find it well worth it. Here are a few highlights that I find particularly useful.

Insert the picture correct posture is [img [http://img1.cheny.org/dptool/img/170921112724_v2-0d6d1cde06a90b753193b510e5b9a5a4_r.jpg]]. Urls in text are automatically recognized as links, and if you want to hyperlink a custom piece of text, Try [ext [personal growth/learning/exam/character/automatic control/time management – Dimpurr zhihu collection | https://www.zhihu.com/collection/104053246]] (ext in most cases can be omitted).

In contrast to Markdown’s indentation, TiddlyWiki’s unordered list * and ordered list #, as well as indented sublists that use double list symbols instead of tabs, such as ** or *#, can seem a bit confusing at first. Get used to it.

TiddlyWiki layout is really cool! You can freely set the table header, table tail, table name, each cell alignment, cross-cell, and the syntax is very simple and convenient, smooth input. Read the official documentation tiddlywiki.com/#Tables%20i… .

The “magic” of automatically generating a list of criteria and filtering them by Tag was shown earlier. Reference: tiddlywiki.com/#Transclusi… Remember to read See Also at the bottom for details!

If you’re willing to play around, you can try using Macro and Variables.

TiddlyWiki sometimes automatically recognizes PascalCase/UpperCamelCase words as entry links. All you need to do is add a wavy ~ escape in front of it, such as ~TiddlyWiki, and it will revert to plain text.

After installing the highlight.js plugin, you can specify the highlighting syntax to use for code blocks like this:

Bash ➜ ~ PWD /Users/dimpurr 'Copy the code

You can find a list of supported syntaxes on the highlight.js plugin Settings page. Note that the identifier for all shell commands is bash, not sh or anything else.

A few minor problems

Disable search minimum word limit

The default TiddlyWiki search box has a character limit, requiring the search term to be longer than three characters. This is fine for an English environment, but for Chinese, two-word searches are common and therefore inconvenient. To change this setting, simply:

  • Add a title called$:/config/Search/MinLengthThe new entry
  • Content is1

Disable automatic WikiLink

TiddlyWiki automatically replaces camelcase-compliant text with entry links by default, called WikiLinks or WikiWords. In general you can use ~WikiText to escape forbidden links, but for longer articles this is hard to do. The Internet is basically a way to disable The WikiLink function directly, but this will be transferred before the text will show the symbol.

One way to keep the previous ~ undisplayed without automatic linking is:

  1. Click on the icon next to the search box to enter AdvancedSearch
  2. search$:/core/modules/parsers/wikiparser/rules/wikilink.jsOr click$:/coreFind the entry again and click edit
  3. The system will tell youThis is a modified default entry. Deleting this entry restores the default version in the $:/core plug-in.So don’t worry about it
  4. Find the backreturn [{return [{ type: "link",Add a row above this rowreturn [{type: "text", text: linkText}];To return plain text when Ben wants to return the link

Organize item content in a tree structure

If you have an obsession with the organization of your entries, but don’t feel as fragmented as I do that you have to manually catalog them, a built-in tree directory system is a good choice.

<div class="tc-table-of-contents">
<<toc-selective-expandable 'Contents' sort[title]>>
</div>Copy the code

The above code allows you to create a list of tree directory structures nested by tag relationships, with Contents entry (which is not displayed) as the root node.

You can make this item appear in the SideBar by naming it “Directory” and adding the $:/tags/SideBar tag. The effect is as follows:

TiddlyWiki tree directory