summaryrefslogtreecommitdiff
path: root/TWiki/TWikiTemplates.mdwn
blob: a6c257ab27923f0c89258693ffe6044f29258e2e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
%TOC% %STARTINCLUDE%

# <a name="TWiki_Templates"> TWiki Templates </a>

_Definition of the templates used to render all HTML pages displayed in TWiki_

## <a name="Overview"> Overview </a>

The new modular template system offers flexible, easy control over the layout of all TWiki pages. The master template approach groups parts that are shared by several templates - like headers and footers - in a common file. Special variables allow individual layouts to include parts from a master template - variables are mixed with regular HTML mark-up for template-specific content. Templates are used to define page layout, and also to supplydefault content for new pages.

## <a name="Major_changes_from_the_previous_"> Major changes from the previous template system </a>

Where the old templates were each complete HTML documents, the new templates are defined using variables to include template parts from a master file. You can now change one instance of a common element to update all occurrences; previously, every affected template had to be updated. This simplifies the conversion of templates into XHTML format, and provides a more versatile solution for templates and for [[TWikiSkins]]. The new system:

* separates a set of common template parts into a base template that is included by all of the related templates;
* defines common variables, like a standard separator (ex: "|"), in the base template;
* defines variable text in the individual templates and passes it back to the base template.

## <a name="Functional_Specifications"> Functional Specifications </a>

* Special template directives (or preprocessor commands) are embedded in normal templates.
* Use of template directives is optional, templates work without them.
* All template preprocessing is done in `&TWiki::Store::readTemplate()` so that the caller simply gets an expanded template file (the same as before).
* Directives are of the form <code>%TMPL:&lt;key&gt;%</code> and <code>%TMPL:&lt;key&gt;\{"attr"\}%</code>.
* Directives:
  * <code>%TMPL:INCLUDE\{"file"\}%</code>: Includes a template file. The template directory of the current web is searched first, then the templates root (`twiki/templates`).
  * <code>%TMPL:DEF\{"var"\}%</code>: Define a variable. Text between this and the END directive is not returned, but put into a hash for later use.
  * <code>%TMPL:END%</code>: Ends variable definition.
  * <code>%TMPL:P\{"var"\}%</code>: Prints a previously defined variable.
* Variables are live in a global name space, there is no parameter passing.
* Two-pass processing, so that you can use a variable before declaring it or after.
* Templates and [[TWikiSkins]] work transparently and interchangeably. For example, you can create a skin that overloads just the `twiki.tmpl`, like `twiki.print.tmpl`, that redefines the header and footer.
* **_NOTE:_** The template directives work only for templates, they do not get processed in topic text.

## <a name="TWiki_Master_Template"> TWiki Master Template </a>

All common parts are defined in a master template, <code>**twiki.tmpl**</code>, that all other templates use.

> <table border="1" cellpadding="1" cellspacing="0">
>   <tr>
>     <th bgcolor="#99CCCC"><strong>Template variable:</strong></th>
>     <th bgcolor="#99CCCC"><strong>Defines:</strong></th>
>   </tr>
>   <tr>
>     <td> %<nop>TMPL:DEF{"sep"}% </nop></td>
>     <td> "|" separator </td>
>   </tr>
>   <tr>
>     <td> %<nop>TMPL:DEF{"htmldoctype"}% </nop></td>
>     <td> Start of all HTML pages </td>
>   </tr>
>   <tr>
>     <td> %<nop>TMPL:DEF{"standardheader"}% </nop></td>
>     <td> Standard header (ex: view, index, seach) </td>
>   </tr>
>   <tr>
>     <td> %<nop>TMPL:DEF{"simpleheader"}% </nop></td>
>     <td> Simple header with reduced links (ex: edit, attach, oops) </td>
>   </tr>
>   <tr>
>     <td> %<nop>TMPL:DEF{"standardfooter"}% </nop></td>
>     <td> Footer, excluding revision and copyright parts </td>
>   </tr>
>   <tr>
>     <td> %<nop>TMPL:DEF{"oops"}% </nop></td>
>     <td> Skeleton of oops dialog </td>
>   </tr>
> </table>

## <a name="Types_of_Template"> Types of Template </a>

There are two types of templates:

* **HTML Page Templates**: Defines layout of %WIKITOOLNAME% pages
* **Template Topics**: Defines default text when you create a new topic

<a name="HtmlTemplates"></a>

### <a name="HTML_Page_Templates"> </a> HTML Page Templates

%WIKITOOLNAME% uses HTML template files for all actions like topic view, edit, preview and so on. This allows you to change the look and feel of all pages by editing just some template files.

The template files are in the <code>**twiki/templates**</code> directory. As an example, <code>**twiki/templates/view.tmpl**</code> is the template file for the <code>**twiki/bin/view**</code> script. Templates can be overloaded per web. The following search order applies:

1. <code>**twiki/templates/$webName/$scriptName.tmpl**</code>
2. <code>**twiki/templates/$scriptName.tmpl**</code>

**_Note:_** `$webName` is the name of the web (ex: `Main`), and <code>**$scriptName**</code> is the script (ex: `view`).

**_Note:_** [[TWikiSkins]] can be defined to overload the standard templates.

Special variables are used in templates, especially in `view`, to display [[TWikiMetaData]].

<a name="TemplateTopics"></a>

### <a name="Template_Topics"> Template Topics </a>

Template topics define the default text for new topics. There are three types of template topics:

> <table border="1" cellpadding="1" cellspacing="0">
>   <tr>
>     <th bgcolor="#99CCCC"><strong>Topic Name:</strong></th>
>     <th bgcolor="#99CCCC"><strong>What it is:</strong></th>
>   </tr>
>   <tr>
>     <td><span style="background:"><font color="">Web Topic View Template</font></span><a href="http://LOCATION/WebTopicViewTemplate">?</a></td>
>     <td> Help text shown when you view a non existing topic. </td>
>   </tr>
>   <tr>
>     <td><span style="background:"><font color="">Web Topic Non Wiki Template</font></span><a href="http://LOCATION/WebTopicNonWikiTemplate">?</a></td>
>     <td> Help text shown when you view a non existing topic that has not a <span style="background:"><font color="">Wiki Name</font></span><a href="http://LOCATION/WikiName">?</a>. </td>
>   </tr>
>   <tr>
>     <td><span style="background:"><font color="">Web Topic Edit Template</font></span><a href="http://LOCATION/WebTopicEditTemplate">?</a></td>
>     <td> Default text shown when you create a new topic. </td>
>   </tr>
> </table>

All template topics are located in the %TWIKIWEB% web. The [[WebTopicEditTemplate]] can be overloaded. The following search order applies when you create a new topic:

1. The topic name specified by the `templatetopic` CGI parameter.
2. WebTopicEditTemplate in the current web.
3. WebTopicEditTemplate in the %TWIKIWEB% web.

#### <a name="Template_Topics_in_Action"> Template Topics in Action </a>

Here is an example for creating new topics based on a specific template topic:

<form action="%SCRIPTURLPATH%/edit%SCRIPTSUFFIX%/%WEB%/" name="new">
  <ul>
    <li> New example topic: <input name="topic" size="23" type="text" value="ExampleTopic%SERVERTIME{$yearx$mox$day}%" /> <input name="templatetopic" type="hidden" value="ExampleTopicTemplate" /> <input type="submit" value="Create" /> (date format is <nop>YYYYxMMxDD) </nop></li>
  </ul>
</form>

Above form asks for a topic name. A hidden input tag of name "templatetopic" specifies the [[ExampleTopicTemplate]] as the template topic. Here is the HTML source of the form:

<pre>
&amp;lt;form name="new" action="%<nop>SCRIPTURLPATH%/edit%<nop>SCRIPTSUFFIX%/%<nop>WEB%/"&amp;gt;
   * New example topic:
     &amp;lt;input type="text" name="topic" value="ExampleTopic%<nop>SERVERTIME{$yearx$mox$day}%" size="23" /&amp;gt;
     &amp;lt;input type="hidden" name="templatetopic" value="ExampleTopicTemplate" /&amp;gt;
     &amp;lt;input type="hidden" name="onlywikiname" value="on" /&amp;gt;
     &amp;lt;input type="submit" value="Create" /&amp;gt;
     (date format is &amp;lt;nop&amp;gt;YYYYxMMxDD)
&amp;lt;/form&amp;gt;
</nop></nop></nop></nop></pre>

The "onlywikiname" parameter enforces [[WikiWords]] for topic names.

**_Note:_** Use can use the <code>%WIKIUSERNAME%</code> and <code>%DATE%</code> variables in your topic templates as the signature; those variables are expanded when a new topic is created. The standard topic signature is: <br /><code>-- %WIKIUSERNAME% - %DATE%</code>

## <a name="Templates_by_Example"> Templates by Example </a>

Attached is an example of an oops base template `oopsbase.tmpl` and a example oops dialog `oopstest.tmpl` which is based on the base template. **_NOTE:_** This isn't the release version, just a quick, simple demo.

### <a name="Base_template_oopsbase_tmpl"> Base template oopsbase.tmpl </a>

The first line declares the delimiter variable called "sep", used to separate multiple link items. The variable can be called anywhere by writing <code>%TMPL:P\{"sep"\}%</code>

> <table bgcolor="#f5f5f5" border="1" cellpadding="1" cellspacing="0">
>   <tr>
>     <td><pre>
> %<nop>TMPL:DEF{"sep"}% | %<nop>TMPL:END%
> &amp;lt;html&amp;gt;
> &amp;lt;head&amp;gt;
>   &amp;lt;title&amp;gt; %<nop>WIKITOOLNAME% . %<nop>WEB% . %<nop>TOPIC% %.TMPL:P{"titleaction"}%&amp;lt;/title&amp;gt;
>   &amp;lt;base href<nop>="%<nop>SCRIPTURL%/view%<nop>SCRIPTSUFFIX%/%<nop>WEB%/%<nop>TOPIC%"&amp;gt;
>   &amp;lt;meta name="robots" content="noindex"&amp;gt;
> &amp;lt;/head&amp;gt;
> &amp;lt;body bgcolor="#FFFFFF"&amp;gt;
> &amp;lt;table width="100%" border="0" cellpadding="3" cellspacing="0"&amp;gt;
>   &amp;lt;tr&amp;gt;
>     &amp;lt;td bgcolor="%<nop>WEBBGCOLOR%" rowspan="2" valign="top" width="1%"&amp;gt;
>       &amp;lt;a href<nop>="%<nop>WIKIHOMEURL%"&amp;gt;
>       &amp;lt;img src="%<nop>PUBURLPATH%/wikiHome.gif" border="0"&amp;gt;&amp;lt;/a&amp;gt;
>     &amp;lt;/td&amp;gt;
>     &amp;lt;td&amp;gt;
>       &amp;lt;b&amp;gt;%<nop>WIKITOOLNAME% . %<nop>WEB% . &amp;lt;/b&amp;gt;&amp;lt;font size="+2"&amp;gt;
>       &amp;lt;B&amp;gt;%<nop>TOPIC%&amp;lt;/b&amp;gt; %<nop>TMPL:P{"titleaction"}%&amp;lt;/font&amp;gt;
>     &amp;lt;/td&amp;gt;
>   &amp;lt;/tr&amp;gt;
>   &amp;lt;tr bgcolor="%<nop>WEBBGCOLOR%"&amp;gt;
>     &amp;lt;td colspan="2"&amp;gt;
>       %<nop>TMPL:P{"webaction"}%
>     &amp;lt;/td&amp;gt;
>   &amp;lt;/tr&amp;gt;
> &amp;lt;/table&amp;gt;
> --- ++ %<nop>TMPL:P{"heading"}%
> %<nop>TMPL:P{"message"}%
> &amp;lt;table width="100%" border="0" cellpadding="3" cellspacing="0"&amp;gt;
>   &amp;lt;tr bgcolor="%<nop>WEBBGCOLOR%"&amp;gt;
>     &amp;lt;td valign="top"&amp;gt;
>       Topic &amp;lt;b&amp;gt;%<nop>TOPIC%&amp;lt;/b&amp;gt; . {
>         %<nop>TMPL:P{"topicaction"}%
>       }
>     &amp;lt;/td&amp;gt;
>   &amp;lt;/tr&amp;gt;
> &amp;lt;/table&amp;gt;
> &amp;lt;/body&amp;gt;
> </nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></pre></td>
>   </tr>
> </table>

### <a name="Test_template_oopstest_tmpl"> Test template oopstest.tmpl </a>

Each oops template basically just defines some variables and includes the base template that does the layout work.

> <table bgcolor="#f5f5f5" border="1" cellpadding="1" cellspacing="0">
>   <tr>
>     <td><pre>
> %<nop>TMPL:DEF{"titleaction"}% (test =titleaction=) %<nop>TMPL:END%
> %<nop>TMPL:DEF{"webaction"}% test =webaction= %<nop>TMPL:END%
> %<nop>TMPL:DEF{"heading"}%
> Test heading %<nop>TMPL:END%
> %<nop>TMPL:DEF{"message"}%
> Test =message=. Blah blah blah blah blah blah blah blah blah blah blah...
>
>    * Some more blah blah blah blah blah blah blah blah blah blah...
>    * Param1: %<nop>PARAM1%
>    * Param2: %<nop>PARAM2%
>    * Param3: %<nop>PARAM3%
>    * Param4: %<nop>PARAM4%
> %<nop>TMPL:END%
> %<nop>TMPL:DEF{"topicaction"}%
> Test =topicaction=:
> [<nop>[%<nop>WEB%.%<nop>TOPIC%][OK]] %<nop>TMPL:P{"sep"}%
> [<nop>[%<nop>TWIKIWEB%.TWikiRegistration][Register]] %<nop>TMPL:END%
> %<nop>TMPL:INCLUDE{"oopsbase"}%
> </nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></nop></pre></td>
>   </tr>
> </table>

### <a name="Sample_screen_shot_of_oopstest_t"> Sample screen shot of oopstest.tmpl </a>

With URL: <code>**.../bin/oops/Test/TestTopic2?template=oopstest&amp;param1=WebHome&amp;param2=WebNotify**</code>

> <table border="1" cellpadding="1" cellspacing="0">
>   <tr>
>     <td><img alt="testscreen.gif" height="304" src="%ATTACHURLPATH%/testscreen.gif" width="554" /></td>
>   </tr>
> </table>

## <a name="Known_Issues"> Known Issues </a>

* A drawback of referring to a master template is that you can only test a template from within TWiki, where the include variables are resolved. In the previous system, each template is a structurally complete HTML document with a `.tmpl` filename extension - it contains unresolved `%VARIABLES%`, but can still be previewed directly in a browser.

-- [[PeterThoeny]] - 23 Jul 2001 <br /> -- [[MikeMannix]] - 14 Sep 2001 <br />