Site:Frontend:BuildingBlocks
MetrixAdmin (Talk | contribs) m (→Pages) |
MetrixAdmin (Talk | contribs) m |
||
| Line 21: | Line 21: | ||
<body> | <body> | ||
HELLO WORLD | HELLO WORLD | ||
| + | </body> | ||
| + | </html> | ||
| + | |||
| + | == Page Includes == | ||
| + | |||
| + | Page Includes are useful for sharing common page elements between pages. A perfect example of a page include is a header and footer. Normally these properties are the same across all pages. By referencing a page include you can make changes once and all of your pages will be automatically updated. | ||
| + | |||
| + | Referencing a page include is done through Clearsilver. | ||
| + | |||
| + | === Example: Create a Page Include === | ||
| + | |||
| + | #From within your site, click on the page include tab, click Add Page Include, enter a page include name, and enter the following contents into the page include. | ||
| + | |||
| + | <nowiki> | ||
| + | <div><a href="/?page=home">HOME</a></div> | ||
| + | <div><a href="/?page=profiles">PROFILES</a></div> | ||
| + | <div><a href="/?page=content">CONTENT</a></div></nowiki> | ||
| + | |||
| + | #Let's assume we named the page include above "header". | ||
| + | #Now lets reference it within our page. | ||
| + | |||
| + | <html> | ||
| + | <head> | ||
| + | <title>This is an example page.</title> | ||
| + | </head> | ||
| + | <body> | ||
| + | <?cs evar:MS.site.pageinclude["header"] ?> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 11:44, 1 October 2011
Contents |
Introduction
Building a website is really all about using the tools at your disposal. On this page you will learn what tools are available, how to use them, and explanations on when to use them.
Pages
Pages are the most basic component for building a site. A page is referenced from a URL. If you create a page titled "hello", then you would access it by navigating to http://www.example.com/?page=hello.
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>
Page Includes
Page Includes are useful for sharing common page elements between pages. A perfect example of a page include is a header and footer. Normally these properties are the same across all pages. By referencing a page include you can make changes once and all of your pages will be automatically updated.
Referencing a page include is done through Clearsilver.
Example: Create a Page Include
- From within your site, click on the page include tab, click Add Page Include, enter a page include name, and enter the following contents into the page include.
<div><a href="/?page=home">HOME</a></div> <div><a href="/?page=profiles">PROFILES</a></div> <div><a href="/?page=content">CONTENT</a></div>
- Let's assume we named the page include above "header".
- Now lets reference it within our page.
<html> <head> <title>This is an example page.</title> </head> <body> <?cs evar:MS.site.pageinclude["header"] ?> </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>
