Skip to content

Resources

Jump to bottom
haskelt edited this page May 10, 2021 · 10 revisions

In almost all cases your site will consist of more than just HTML files. Maybe you have some CSS style files, some JavaScript files, and some SVG icons. In cases where these files are specific to a particular page on your site, it may be best to treat them as content, and put them in the appropriate content directory alongside your XML source file (see Non HTML content). But if you want them available to all the pages on your site, you can create a design/resources directory. Files and directories in this location will be copied to the build directory for your site. (Note that Salal will replace any references to Global variables in CSS, JavaScript, and Python files as it copies them over to the build directory.)

For example, if you created a file design/resources/css/style.css, you could then load that style sheet via a page template like this:

<!doctype html>
<html lang=en>

  <head>
    <meta charset=utf-8>
    <title>{{this.title}}</title>
    <link rel="stylesheet" href="/css/style.css" type="text/css" />
  </head>
  
  <body>
      {{ this.content }}
  </body>

</html>

If you need to customize your use of resource files on a per-page basis, one approach is to use an attribute on the page element. For example, you could have this in your source file:

<page style="blogpost">

Then in your template you could do this:

<!doctype html>
<html lang=en>

  <head>
    <meta charset=utf-8>
    <title>{{this.title}}</title>
    <link rel="stylesheet" href="/css/{{this.style}}.css" type="text/css" />
  </head>
  
  <body>
      {{ this.content }}
  </body>

</html>

Clone this wiki locally