Examples: Site Components
Download Examples
All the Site Component Examples are available as a jsHarmony CMS Theme. You can download the theme using the button above and extract it into a site SFTP folder to install. A video tutorial for installing templates can be found in Getting Started Tutorial 1.
Example 1 - XML Sitemap
The example generates an XML sitemap of the pages in the sitemap.
This site component will generate an XML file - the export path is set to "sitemap.xml" in the "cms-component-config".
The "jsh-foreach-item" tag iterates over the sitemap items that link to pages.
In this example the "<?xml" tag as put above the "cms-component-config" tag, to make sure that there are no spaces before tag, to help adhere to the XML spec.
<?xml version="1.0" encoding="UTF-8"?>
<script type="text/cms-component-config">
{
"target": "site",
"export": [
{ "export_path": "sitemap.xml" }
]
}
</script>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url jsh-foreach-item="_.filter(sitemap.allItems, function(item){ return item.sitemap_item_link_type=='PAGE'; })">
<loc><%=publish_params.published_url%><%=getSitemapURL(item)%></loc>
<lastmod><%=(new Date().toISOString())%></lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
</urlset>Example 2 - Dynamically Adding Files
Site Components can dynamically add files to the site using the "addFile" function.
In the example below, an HTML-based redirect is created for each "Exact Match" redirect defined in the site_redirects. Site redirects can be added under the Pages tab, in the Redirects submenu.
The "generateRedirect" function generates the HTML code for the redirect by using the "getEJSOutput" function to evaluate EJS / HTML as text content.
The component loops through the "site_redirects" object, and calls "generateRedirect" for each redirect.
After generating the code, the output of generateRedirect is written to the publish folder using the "addFile" function:
<script type="text/cms-component-config">
{
"title": "Routers",
"target": "site",
"export": [ { "export_path": "" } ]
}
</script>
<% function generateRedirect(redirect_dest){ return getEJSOutput(function(){ -%>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Redirecting to <%=publish_params.published_url%>/<%=redirect_dest%></title>
<meta http-equiv="refresh" content="0; URL=<%=publish_params.published_url%>/<%=redirect_dest%>">
<link rel="canonical" href="<%=publish_params.published_url%>/<%=redirect_dest%>">
<%_ }) } %>
<%
_.each(site_redirects, function(redirect){
if(redirect.redirect_url_type=='EXACT'){
var redirect_url = _.trimStart(redirect.redirect_url, '/');
var redirect_dest = _.trimStart(redirect.redirect_dest, '/');
addFile(redirect_url, generateRedirect(redirect_dest));
}
});
%>More Examples
Additional Site Component examples can be found in the Integrations reference. Site components are used to generate the routers and system files to integrate CMS static pages into existing web applications.
