Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:webedition:beginners-guide:basic-template

Basic Template

Let's start with the most basic template for a page – that's the one you get when you use the menu: "New → Template":

<!DOCTYPE HTML>
<html dir="ltr" lang="<we:pageLanguage type="language" doc="top" />">
<head>
    <we:title></we:title>
    <we:description></we:description>
    <we:keywords></we:keywords>
    <we:charset defined="UTF-8">UTF-8</we:charset>
</head>
<body>
    <!-- webEdition demo template (8.0.5.0) -->
    <article style="width:400px">
        <h1><we:input type="text" name="Headline" style="width:60em"/></h1>
        <p><b><we:input type="date" name="Date" currentdate="true" format="d.m.Y"/></b></p>
        <we:ifNotEmpty name="Image">
            <p><we:img name="Image" showthumbcontrol="true"/></p>
        </we:ifNotEmpty>
        <we:textarea name="Content" width="400" height="400" wysiwyg="true" removefirstparagraph="false" inlineedit="true"/>
    </article>
</body>
</html>

webEdition has a template language that mixes nicely with HTML. All tags start with <we: /> and must be properly formed: Some are self-closing, and some need a closing tag:

<we:input .../>
<we:a ...>...</we:a>

The starter template from above uses the following wE-tags:

Most of these you'll come across all the time, they are either basic data types or control structures (e.g. <we:ifNotEmpty>). Together with the <we:block>-Element, you already have a good toolbox to build a complete website!

Here's another very simple template with some more tags – see comment-attributes for explanations:

<!doctype html>
<html lang="<we:pageLanguage type="language" doc="top" />">
<head>
    <we:charset defined="UTF-8">UTF-8</we:charset>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <we:title></we:title>
    <we:description></we:description>
    <we:keywords></we:keywords>
    <we:css id="123" comment="inserts a css-stylesheet with the WE-ID 123" />
    <we:js id="124" comment="inserts a javascript with the WE-ID 124" />
</head>
<body>
 
    <we:ifEditmode comment="This is only visible for backend users">
        <b>Headline:</b><br>
        <we:input type="text" name="headline" size="50"/><br>
 
        <b>Image:</b><br>
        <we:img name="image" /><br>
 
        <b>Introduction (Text only)</b><br>
        <we:textarea wysiwyg="false" name="teaser" cols="20" rows="10" width="600" height="100" /><br>
 
        <we:block name="content" comment="the block element repeats everything in it, like a loop">
 
            <b>Subheading</b><br>
            <we:input type="text" name="subheading" size="50"/><br>
 
            <b>Another image:</b><br>
            <we:img name="image_in_block" /><br>
 
            <b>Formatted text:</b><br>
            <we:textarea wysiwyg="true" name="text" cols="20" rows="10" width="800" height="400" removefirstparagraph="false" inlineedit="true" />
 
        </we:block>
    </we:ifEditmode>
 
    <we:ifNotEditmode comment="This is visible for visitors">
        <h1>
            <we:input type="text" name="headline" comment="see how you can omit the size attribute? Only type and name are necessary!"/>
        </h1>
 
        <we:ifNotEmpty name="image" type="image">
            <we:img name="image"/>
        </we:ifNotEmpty>
 
        <we:ifNotEmpty name="teaser" comment="if the teaser is empty, the p.teaser-element is not displayed">
            <p class="teaser">
                <we:textarea name="teaser" comment="This is only text"/>
            </p>
        </we:ifNotEmpty>
 
        <we:block name="content">
 
            <we:ifNotEmpty name="subheading" comment="if the subheading is empty, no h2 is displayed!">
                <h2>
                    <we:input type="text" name="subheading"/>
                </h2>
            </we:ifNotEmpty>
 
            <we:ifNotEmpty name="image_in_block" type="image">
                <we:img name="image"/>
            </we:ifNotEmpty>
 
            <we:textarea wysiwyg="true" name="text" comment="Here comes a HTML textfield" />
 
        </we:block>
 
    </we:ifNotEditmode>
 
</body>
</html>

That's a single page. Save the template as "page.tmpl" (for example). Then use "New → Document → webEdition Document" and select this template as the document's template. Play around with it a little bit, and make several documents with it.

Next step: Defining a main template »

en/webedition/beginners-guide/basic-template.txt · Zuletzt geändert: 2019/02/09 20:57 von Sascha Nemecek

Recent changes RSS feed