All resource files are managed under the resources node - which behaves exactly like a document folder. Files here can be edited (double-click to open), copied, deleted, and so on. Adding a file here allows you to reference it via a special resource route (which is defined in webpal-core):
<link rel="stylesheet" href="/resources/ext/CamelBackExtensionName/path/to/resource.css" />
Note the CamelBack version of the extension name. To achieve a consistent and compatible naming convention for storage of extension resources and the equivalent namespaces, extension names are converted to CamelBack - ignoring all non-alpha characters and treating them as separators instead.
In many cases, you want the page templates to includes additional resources supplied by the extensions without having to declare these each time in the page-template. To auto-include required resource links, you can declare these resources in the resource-links node, like so:
The link pathname to be supplied should not be absolute. For example, if the resources file mystyles.css is in the css folder under the resource node, then the pathname to supply is:
Note that this also allows you to declare external resources, simply by supplying the full URL instead of the relative pathname, for example:
Once required resource links are defined by your extensions, you can generate the include statements with a single call to include-extension-styles and include-extension-scripts templates pre-defined in webpal-core:
<title>Basic WebPal Site</title>
<!-- include all styles -->
<!-- include all scripts -->
This template generates <link> and <script> tags for all resource links, in document order.