Site:Frontend:BuildingBlocks
Contents |
Introduction
The following are the building blocks to create your website: pages, page includes, modules, and static resources.
Pages
Pages are the most basic requirement for building a site. A page consists of the HTML necessary to display your page. Pages have the ability to reference the template engine, but this is entirely optional.
Example: Create a "Hello World" page
- Create a new Site by clicking Add > Site and enter a site name.
- Click on the pages tab, click Add Page, and choose a name for your page.
- Enter the following HTML and click save.
<html> <head> <title>This is an example page.</title> </head> <body> HELLO WORLD </body> </html>
Static Resources
Each site has an upload system with the easy Metrixstream drag&drop uploader. This is intended to offer a storage location for all of your images, style sheets, javascript, etc.
The benefit of using the integrated static resource system, is that you don't need to worry about all of the complicated browser cache headers. You also can rely on the built in load balancing for when your website gets lots of traffic and needs to scale up to meet the demand.
The static resource uploader is located by clicking on the FILES link once you are viewing your site from within Metrixstream. (Home -> Sites tab -> Your site -> FILES)
From this page you can edit your existing static resources from within your browser, or you can upload new content by dragging it on the Java Uploader. From within your site, you need to reference the getStaticUrl or getVersionedStaticUrl macro, so that your website can generate the correct URL to your static resource.
Next to each file, there is a SITE CODE to use to reference the file in your site page.
Macros
- getStaticUrl(fileName)
- Generates a URL that serves the static resource file referenced by fileName.
- getVersionedStaticUrl(fileName)
- Generates a URL that serves the static resource file referenced by fileName. This URL breaks any browser cache anytime the Site version number changes.
Example
Let's assume you have a javascript file named main.js. You would reference this in your HTML in the example below.
<html>
<head>
<script type="text/javascript" src="<?cs call:getStaticUrl("main.js") ?>"></script>
</head>
<body>
sample page
</body>
</html>
Concatenation
The SiteEngine has built in support to concatenate static resources on the fly. A common example is to concatenate all of your CSS files into one single file, as well all of your javascript files into a single file. This allows greater flexibility, because you can keep your content separated by filename, but you can serve them through a single request, which helps tremendously with website performance. The resulting file is cached, so there is no need to worry about any performance issues.
Macros
- addFileToConcatenatedFile(fileName, catFileName)
- Adds standard static files referenced by fileName to the new concatenated file referenced by catFileName.
- getConcatenatedStaticUrl(catFileName)
- Generates a URL that serves the concatenated file referenced by catFileName.
- getConcatenatedVersionedStaticUrl(catFileName)
- Generates a URL that serves the concatenated file referenced by catFileName. This URL breaks any browser cache anytime the Site version number changes.
Example: Non-Concatenated Method
Html Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?cs call:getVersionedStaticUrl("main.css") ?>" />
<link rel="stylesheet" type="text/css" href="<?cs call:getVersionedStaticUrl("lightbox.css") ?>" />
<script type="text/javascript" src="<?cs call:getVersionedStaticUrl("jquery-1.3.2.min.js") ?>"></script>
<script type="text/javascript" src="<?cs call:getVersionedStaticUrl("jquery.galleryview-1.1.js") ?>"></script>
<script type="text/javascript" src="<?cs call:getVersionedStaticUrl("main.js") ?>"></script>
</head>
<body>
sample page
</body>
</html>
Example: Concatenated Method
Template Code: Top of the Page
<?cs call:addFileToConcatenatedFile("jquery-1.3.2.min.js", "newMain.js") ?>
<?cs call:addFileToConcatenatedFile("jquery.galleryview-1.1.js", "newMain.js") ?>
<?cs call:addFileToConcatenatedFile("main.js", "newMain.js") ?>
<?cs call:addFileToConcatenatedFile("main.css", "newMain.css") ?>
<?cs call:addFileToConcatenatedFile("lightbox.css", "newMain.css") ?>
Html Code: Below Template Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?cs call:getConcatenatedVersionedStaticUrl("newMain.css") ?>" />
<script type="text/javascript" src="<?cs call:getConcatenatedVersionedStaticUrl("newMain.js") ?>"></script>
</head>
<body>
sample page
</body>
</html>
