35b9da0436bb5bf758304a138df37ab86955ec87
[openafs-wiki.git] / TWiki / TWikiTemplates.mdwn
1 <div>
2   <ul>
3     <li><a href="#TWiki Template System"> TWiki Template System</a><ul>
4         <li><a href="#Overview"> Overview</a></li>
5         <li><a href="#Major changes from the previous"> Major changes from the previous template system</a></li>
6         <li><a href="#Functional Specifications"> Functional Specifications</a></li>
7         <li><a href="#TWiki Master Template"> TWiki Master Template</a></li>
8         <li><a href="#Types of Template"> Types of Template</a><ul>
9             <li><a href="#HTML Page Templates"> HTML Page Templates</a></li>
10             <li><a href="#Template Topics"> Template Topics</a><ul>
11                 <li><a href="#Template Topics in Action"> Template Topics in Action</a></li>
12               </ul>
13             </li>
14           </ul>
15         </li>
16         <li><a href="#Templates by Example"> Templates by Example</a><ul>
17             <li><a href="#Base template oopsbase.tmpl"> Base template oopsbase.tmpl</a></li>
18             <li><a href="#Test template oopstest.tmpl"> Test template oopstest.tmpl</a></li>
19             <li><a href="#Sample screen shot of oopstest.t"> Sample screen shot of oopstest.tmpl</a></li>
20           </ul>
21         </li>
22         <li><a href="#Known Issues"> Known Issues</a></li>
23       </ul>
24     </li>
25   </ul>
26 </div>
27
28 # <a name="TWiki Template System"></a> TWiki Template System
29
30 _Definition of the templates used to render all HTML pages displayed in TWiki_
31
32 ## <a name="Overview"></a> Overview
33
34 The new modular template system is more flexible, efficient, and easily updated than the old set-up, where each template is a complete HTML file. The new master template approach places common templates parts, like headers and footers, in one shared file. This simplifies the conversion of templates into XHTML format, and provides a more versatile solution for templates and for [[TWikiSkins]].
35
36 ## <a name="Major changes from the previous"></a><a name="Major changes from the previous "></a> Major changes from the previous template system
37
38 The main difference is that templates are now defined using variables to include template parts. You change one stored instance of a common element to update all occurrences. The new system:
39
40 - separates a set of common template parts into a base template that is included by all of the related templates;
41
42 - defines common variables, like a standard separator (ex: "|"), in the base template;
43
44 - defines variable text in the individual templates and passes it back to the base template.
45
46 ## <a name="Functional Specifications"></a> Functional Specifications
47
48 - Special template directives (or preprocessor commands) are embedded in normal templates.
49 - Use of template directives is optional, templates work without them.
50 - All template preprocessing is done in `&TWiki::Store::readTemplate()` so that the caller simply gets an expanded template file (the same as before).
51 - Directives are of the form `%TMPL:<key>%` and `%TMPL:<key>{"attr"}%`.
52 - Directives:
53   - `%TMPL:INCLUDE{"file"}%`: Includes a template file. The template directory of the current web is searched first, then the templates root (`twiki/templates`).
54   - `%TMPL:DEF{"var"}%`: Define a variable. Text between this and the END directive is not returned, but put into a hash for later use.
55   - `%TMPL:END%`: Ends variable definition.
56   - `%TMPL:P{"var"}%`: Prints a previously defined variable.
57 - Variables are live in a global name space, there is no parameter passing.
58 - Two-pass processing, so that you can use a variable before declaring it or after.
59 - 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.
60 - **_Note:_** The template directives work only for templates, they do not get processed in topic text.
61
62 ## <a name="TWiki Master Template"></a> TWiki Master Template
63
64 All common parts are defined in a master template, <code>**twiki.tmpl**</code>, that all other templates use.
65
66 > <table border="1" cellpadding="0" cellspacing="0">
67 >   <tr>
68 >     <th bgcolor="#99CCCC"><strong> Template variable: </strong></th>
69 >     <th bgcolor="#99CCCC"><strong> Defines: </strong></th>
70 >   </tr>
71 >   <tr>
72 >     <td> %TMPL:DEF{"sep"}% </td>
73 >     <td> "|" separator </td>
74 >   </tr>
75 >   <tr>
76 >     <td> %TMPL:DEF{"htmldoctype"}% </td>
77 >     <td> Start of all HTML pages </td>
78 >   </tr>
79 >   <tr>
80 >     <td> %TMPL:DEF{"standardheader"}% </td>
81 >     <td> Standard header (ex: view, index, seach) </td>
82 >   </tr>
83 >   <tr>
84 >     <td> %TMPL:DEF{"simpleheader"}% </td>
85 >     <td> Simple header with reduced links (ex: edit, attach, oops) </td>
86 >   </tr>
87 >   <tr>
88 >     <td> %TMPL:DEF{"standardfooter"}% </td>
89 >     <td> Footer, excluding revision and copyright parts </td>
90 >   </tr>
91 >   <tr>
92 >     <td> %TMPL:DEF{"oops"}% </td>
93 >     <td> Skeleton of oops dialog </td>
94 >   </tr>
95 > </table>
96
97 ## <a name="Types of Template"></a> Types of Template
98
99 There are two types of templates:
100
101 - **HTML Page Templates**: Defines layout of %WIKITOOLNAME% pages
102 - **Template Topics**: Defines default text when you create a new topic
103
104 ### <a name="HTML Page Templates"></a> HTML Page Templates
105
106 %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.
107
108 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:
109
110 1. <code>**twiki/templates/$webName/$scriptName.tmpl**</code>
111 2. <code>**twiki/templates/$scriptName.tmpl**</code>
112
113 **_Note:_** `$webName` is the name of the web (ex: `Main`), and <code>**$scriptName**</code> is the script (ex: `view`).
114
115 **_Note:_** [[TWikiSkins]] can be defined to overload the standard templates.
116
117 Special variables are used in templates, especially in `view`, to display [[meta data|Main/TWikiMetaData#MetaDataRendering]].
118
119 ### <a name="Template Topics"></a> Template Topics
120
121 Template topics define the default text for new topics. There are three types of template topics:
122
123 > <table border="1" cellpadding="0" cellspacing="0">
124 >   <tr>
125 >     <th bgcolor="#99CCCC"><strong> Topic Name: </strong></th>
126 >     <th bgcolor="#99CCCC"><strong> What it is: </strong></th>
127 >   </tr>
128 >   <tr>
129 >     <td>[[Main/WebTopicViewTemplate]]</td>
130 >     <td> Help text shown when you view a non existing topic. </td>
131 >   </tr>
132 >   <tr>
133 >     <td>[[Main/WebTopicNonWikiTemplate]]</td>
134 >     <td> Help text shown when you view a non existing topic that has not a [[Main/WikiName]]. </td>
135 >   </tr>
136 >   <tr>
137 >     <td>[[Main/WebTopicEditTemplate]]</td>
138 >     <td> Default text shown when you create a new topic. </td>
139 >   </tr>
140 > </table>
141
142 All template topics are located in the TWiki web. The [[WebTopicEditTemplate]] can be overloaded. The following search order applies when you create a new topic:
143
144 1. The topic name specified by the `templatetopic` CGI parameter.
145 2. WebTopicEditTemplate in the current web.
146 3. WebTopicEditTemplate in the TWiki web.
147
148 #### <a name="Template Topics in Action"></a> Template Topics in Action
149
150 Here is an example for creating new topics based on a specific template topic:
151
152 <form action="http://www.dementia.org/twiki//edit/%WEB%/" name="new">
153   <ul>
154     <li> New example topic: <input name="topic" size="23" type="text" value="ExampleTopic2010x06x29" /> <input name="templatetopic" type="hidden" value="ExampleTopicTemplate" /> <input type="submit" value="Create" /> (date format is YYYYxMMxDD) </li>
155   </ul>
156 </form>
157
158 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:
159
160     <form name="new" action="%SCRIPTURLPATH%/edit%SCRIPTSUFFIX%/%WEB%/">
161         * New example topic:
162           <input type="text" name="topic" value="ExampleTopic%SERVERTIME{$yearx$mox$day}%" size="23" />
163           <input type="hidden" name="templatetopic" value="ExampleTopicTemplate" />
164           <input type="hidden" name="onlywikiname" value="on" />
165           <input type="submit" value="Create" />
166           (date format is <nop>YYYYxMMxDD)
167     </form>
168
169 The "onlywikiname" parameter enforces [[WikiWords]] for topic names.
170
171 **_Note:_** Use can use the `%WIKIUSERNAME%` and `%DATE%` variables in your topic templates as the signature; those variables are expanded when a new topic is created. The standard topic signature is: <br />`-- %WIKIUSERNAME% - %DATE%`
172
173 ## <a name="Templates by Example"></a> Templates by Example
174
175 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.
176
177 ### <a name="Base template oopsbase.tmpl"></a> Base template oopsbase.tmpl
178
179 The first line declares the delimiter variable called "sep", used to separate multiple link items. The variable can be called anywhere by writing `%TMPL:P{"sep"}%`
180
181 > <table bgcolor="#f5f5f5" border="1" cellpadding="1" cellspacing="0">
182 >   <tr>
183 >     <td><pre>
184 > %TMPL:DEF{"sep"}% | %TMPL:END%
185 > &lt;html&gt;
186 > &lt;head&gt;
187 >   &lt;title&gt; %WIKITOOLNAME% . %WEB% . %TOPIC% %.TMPL:P{"titleaction"}%&lt;/title&gt;
188 >   &lt;base href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%WEB%/%TOPIC%"&gt;
189 >   &lt;meta name="robots" content="noindex"&gt;
190 > &lt;/head&gt;
191 > &lt;body bgcolor="#FFFFFF"&gt;
192 > &lt;table width="100%" border="0" cellpadding="3" cellspacing="0"&gt;
193 >   &lt;tr&gt;
194 >        &lt;td bgcolor="%WEBBGCOLOR%" rowspan="2" valign="top" width="1%"&gt;
195 >               &lt;a href="%WIKIHOMEURL%"&gt;
196 >               &lt;img src="%PUBURLPATH%/wikiHome.gif" border="0"&gt;&lt;/a&gt;
197 >        &lt;/td&gt;
198 >        &lt;td&gt;
199 >               &lt;b&gt;%WIKITOOLNAME% . %WEB% . &lt;/b&gt;&lt;font size="+2"&gt;
200 >               &lt;B&gt;%TOPIC%&lt;/b&gt; %TMPL:P{"titleaction"}%&lt;/font&gt;
201 >        &lt;/td&gt;
202 >   &lt;/tr&gt;
203 >   &lt;tr bgcolor="%WEBBGCOLOR%"&gt;
204 >        &lt;td colspan="2"&gt;
205 >               %TMPL:P{"webaction"}%
206 >        &lt;/td&gt;
207 >   &lt;/tr&gt;
208 > &lt;/table&gt;
209 > --- ++ %TMPL:P{"heading"}%
210 > %TMPL:P{"message"}%
211 > &lt;table width="100%" border="0" cellpadding="3" cellspacing="0"&gt;
212 >   &lt;tr bgcolor="%WEBBGCOLOR%"&gt;
213 >        &lt;td valign="top"&gt;
214 >               Topic &lt;b&gt;%TOPIC%&lt;/b&gt; . {
215 >                 %TMPL:P{"topicaction"}%
216 >               }
217 >        &lt;/td&gt;
218 >   &lt;/tr&gt;
219 > &lt;/table&gt;
220 > &lt;/body&gt;
221 > </pre></td>
222 >   </tr>
223 > </table>
224
225 ### <a name="Test template oopstest.tmpl"></a> Test template oopstest.tmpl
226
227 Each oops template basically just defines some variables and includes the base template that does the layout work.
228
229 > <table bgcolor="#f5f5f5" border="1" cellpadding="1" cellspacing="0">
230 >   <tr>
231 >     <td><pre>
232 > %TMPL:DEF{"titleaction"}% (test =titleaction=) %TMPL:END%
233 > %TMPL:DEF{"webaction"}% test =webaction= %TMPL:END%
234 > %TMPL:DEF{"heading"}%
235 > Test heading %TMPL:END%
236 > %TMPL:DEF{"message"}%
237 > Test =message=. Blah blah blah blah blah blah blah blah blah blah blah...
238 >
239 >       * Some more blah blah blah blah blah blah blah blah blah blah...
240 >       * Param1: %PARAM1%
241 >       * Param2: %PARAM2%
242 >       * Param3: %PARAM3%
243 >       * Param4: %PARAM4%
244 > %TMPL:END%
245 > %TMPL:DEF{"topicaction"}%
246 > Test =topicaction=:
247 > [[%WEB%.%TOPIC%][OK]] %TMPL:P{"sep"}%
248 > [[%TWIKIWEB%.TWikiRegistration][Register]] %TMPL:END%
249 > %TMPL:INCLUDE{"oopsbase"}%
250 > </pre></td>
251 >   </tr>
252 >   <tr>
253 >     <td> &lt;/table &gt; </td>
254 >   </tr>
255 > </table>
256
257 ### <a name="Sample screen shot of oopstest.t"></a> Sample screen shot of oopstest.tmpl
258
259 With URL: <code>**.../bin/oops/Test/TestTopic2?template=oopstest&amp;param1=WebHome&amp;param2=WebNotify**</code>
260
261 > <table border="1" cellpadding="0" cellspacing="0">
262 >   <tr>
263 >     <td><img alt="testscreen.gif" height="304" src="http://www.dementia.org/twiki//view/testscreen.gif" width="554" /></td>
264 >   </tr>
265 > </table>
266
267 ## <a name="Known Issues"></a> Known Issues
268
269 - 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.
270
271 -- [[PeterThoeny]] - 23 Jul 2001 <br /> -- [[MikeMannix]] - 14 Sep 2001 <br />