Resources
Introduction
Any site extension can supply it's own set of resources, such as images, CSS or Javascript files. The webpal-core extension only supplies a minimal set of default resources, as we attempted to make the core as light-weight as possible.
Resources
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.
Resource Links
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:
css/mystyles.css
Note that this also allows you to declare external resources, simply by supplying the full URL instead of the relative pathname, for example:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Auto-including Resources
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:
<xsl:template match="/web/pages//page"
mode="page-template">
<html lang="en">
<head>
<title>Basic WebPal Site</title>
<!-- include all styles -->
<xsl:call-template name="include-extension-styles"/>
</head>
<body>
...
</body>
<!-- include all scripts -->
<xsl:call-template name="include-extension-scripts"/>
</html>
</xsl:template>
This template generates <link> and <script> tags for all resource links, in document order.