Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:webedition:beginners-guide:css-javascript

Assets in templates

Images

Images in your templates are not supposed to be edited by editors. Put them in a separate folder and probably protect this folder by only making it accessible to administrators.

In the template code, use the <we:img>-tag with the document ID of the image (the ID appears when hovering over the document in the document tree):

<we:img name="logo" id="1234" alt="Company logo"/>

CSS and JavaScript Files

In your templates, you can link JavaScript and CSS files using standard HTML:

    <script src="/link/to/script.js"></script>
    <link rel="stylesheet" href="/link/to.css">

But it's way more elegant to use the wE-tags <we:css> and <we:js>:

    <we:js id="123" comment="main.js"/>
    <we:css id="456" comment="layout.css"/>

That way, you'll never have to worry about the files actual location. They're linked automatically, even when they are moved. Additionally, browser caches are automatically expired when the resources are updated (using the 'm'-parameter).

Using a CSS Preprocessor

You can choose for CSS files to be parsed by less, scss or sass – just set the checkbox under "Properties" accordingly. They're saved with the according file extensions (.less, .scss, .sass), but using the <we:css>-tag, the parsed CSS version is generated and linked automatically.

en/webedition/beginners-guide/css-javascript.txt · Zuletzt geändert: 2019/02/09 22:13 von Sascha Nemecek

Recent changes RSS feed