mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-10-05 10:20:45 +00:00
75 lines
3.3 KiB
Plaintext
75 lines
3.3 KiB
Plaintext
|
title: $:/plugins/tiddlywiki/innerwiki/examples
|
||
|
|
||
|
\define example(text)
|
||
|
<$codeblock code=<<__text__>>/>
|
||
|
|
||
|
Renders as:
|
||
|
|
||
|
$text$
|
||
|
\end
|
||
|
|
||
|
!! Browser
|
||
|
|
||
|
The innerwiki widget specifies the dimensions of the virtual screen used to render the wiki (in pixels) and CSS styles to apply to it. Nested `<$data>` widgets are used to specify individual payload tiddlers to be loaded into the wiki. In this example, we initialise the innerwiki with two tiddlers "HelloThere" and "$:/DefaultTiddlers":
|
||
|
|
||
|
<<example """<$innerwiki width="1200" height="400" style="width:100%;" filename="screenshot-1">
|
||
|
<$data title="HelloThere" text="This tiddler is inside a wiki"/>
|
||
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
||
|
</$innerwiki>""">>
|
||
|
|
||
|
Note that the "screenshot" is a shrunken but fully interactive TiddlyWiki.
|
||
|
|
||
|
!! Node.js
|
||
|
|
||
|
To render these examples as a PNG bitmap under Node.js, execute the following at the command prompt:
|
||
|
|
||
|
```
|
||
|
tiddlywiki mywiki --screenshot $:/plugins/tiddlywiki/innerwiki/examples
|
||
|
```
|
||
|
|
||
|
The screenshots will be saved as `screenshot-1.png` etc in the `./output` folder of the wiki.
|
||
|
|
||
|
!! Clipping
|
||
|
|
||
|
A clipping rectangle can be applied to limit the area of the wiki that is displayed. For example:
|
||
|
|
||
|
<<example """<$innerwiki width="1200" height="400" style="width:100%;" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" filename="screenshot-2">
|
||
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
||
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
||
|
</$innerwiki>""">>
|
||
|
|
||
|
!! Transcluding payload tiddlers
|
||
|
|
||
|
This example shows how the `<$data>` widget can be transcluded from other tiddlers (see $:/plugins/tiddlywiki/innerwiki/example-data):
|
||
|
|
||
|
<<example """<$innerwiki width="600" height="400" style="width:100%;" filename="screenshot-3">
|
||
|
{{$:/plugins/tiddlywiki/innerwiki/example-data}}
|
||
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
||
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
||
|
</$innerwiki>""">>
|
||
|
|
||
|
!! Customising the wiki state
|
||
|
|
||
|
By injecting the right payload tiddlers, the innerwiki can be initialised to any desired state. In this example we inject a configuration tiddler to make the "more" page control button visible, and a state tiddler to cause the dropdown to appear:
|
||
|
|
||
|
<<example """<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-4" width="1200" height="400" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" style="width:100%;">
|
||
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
||
|
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
|
||
|
<$data title="$:/config/PageControlButtons/Visibility/$:/core/ui/Buttons/more-page-actions" text="show"/>
|
||
|
<$data title="$:/state/popup/more--1600698846" text="(151,144,21,25)"/>
|
||
|
</$innerwiki>""">>
|
||
|
|
||
|
!! Inception
|
||
|
|
||
|
An innerwiki can itself contain an inner-innerwiki:
|
||
|
|
||
|
<<example """<$innerwiki width="1200" height="600" style="width:100%;" filename="screenshot-5">
|
||
|
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
|
||
|
<$data title="$:/DefaultTiddlers" text="HelloThere $:/plugins/tiddlywiki/innerwiki/inner-example"/>
|
||
|
<$data $tiddler="$:/plugins/tiddlywiki/innerwiki"/>
|
||
|
</$innerwiki>""">>
|
||
|
|
||
|
(You can see the innerwiki here: $:/plugins/tiddlywiki/innerwiki/inner-example)
|
||
|
|
||
|
Note the way that the innerwiki plugin has to be explicitly added to the innerwiki.
|