Markup Factory | Docs - Template Engine

Template Engine Documentation

Templates

Markup Factory allows you, as a web designer, to design and create an HTML/XHTML template and then load the template in one or more variations into the system. The template can be coded to any standards and style that you desire. Many designers choose to use third party tools to initially create the design and layout for the website such as text editors, Adobe Dreamweaver^TM, Adobe Photoshop^TM, or Adobe Fireworks^TM. Once the initial site template is created, no special software is needed to setup and manage the website. Your task as a designer is to design and create a website template, then load in the appropriate code, CSS files, JavaScript files and any other objects required for the template design into Markup Factory. Once these components have been loaded into Markup Factory, the system will allow web developers and site administrators to create pages and categories to build out the website. Markup Factory provides a macro language that can be easily used to add functionality to the website templates including editable content regions, markup factory rich application modules, or other items.

It is also very simple to take an existing website and move the template into the Markup Factory CMS, then create the various pages of the site within the system. Often, an existing website can be moved into Markup Factory in a matter of minutes.

Once the website has been setup, a domain name can be pointed to the installation for use.

Sample Template

The example template code below illustrates a sample Markup Factory template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<Title>{{GetPageTitle}}<Title>
{{MetaData}}
{{HeadContent}}
<link href="/assets/handle/style.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <div id="header">
            <h1>{{GetPageTitle}}</h1>
        </div>
        <div id="maincontent">
            {{MainContent}}
        </div>
        <div id="sectionb">
            {{StaticContent ID=123}}
        </div>
        <div id="footer">
            {{Include name="Footer"}}
        </div>
    </body>
</html>

In this example, several system functions are placed within an XHTML code template. The non function regions of this template will become the "locked" portions of the website template. Markup Factory allows customizable content on a per page basis through the administration interface for content that will be outputted in place of the functions within the template.

Markup Factory supports a number of functions that may be used in the construction of your website template. The functions are described in more detail below. Please note that some of these functions may require the addition of optional Markup Factory Modules. The basic content functions all come standard with every Markup Factory package.

Template Stylesheets

You are free to use any stylesheets you choose in your templates. You can also specify a stylesheet to be used in the page editor for pages using that template. Styles from the specified CSS file will also be loaded into the editor and made available in the editor's style drop-down.

The editor will load all of the styles available from the specified CSS file for the template that the page is using. One limitation of the editor is that it will only list basic css rules such as:

.classname

The editor will not add element specific css rules or rules with complicated selectors, such as:

p.classname
#id div .classname

If necessary, you can configure a special stylesheet that will be used only in the editor to control the appearance of content within the editor and limit the style choices of your publishers.

To configure a style sheet to be used in the editor for a specific template:

Create or configure the stylesheet to be used in your editor and upload it to your Files (Assets) folder
Visit the Template Edit Page in the MF administration area
Select the appropriate stylesheet from the drop down list and click "save"
Now, when you load a page in the editor, it will provide the style list from the selected style sheet

By default, the editor will use the stylesheets defined in the template document head referenced in link tags.

Snippets

Snippets provide another place to store content that is used often througout your website on pages and in templates. Snippets can be used in a manner similar to include files and can also be called from within MFScript statements.

After creating a snippet in the snippets container, you can output the contents of the snippet in a template or page by including the following statement:

{{include name="Snippet Name"}}

If you are using dynamic snippets, you can pass a parameter in with the snippet call to use in the filter of the dynamic snippet. When you configure the filter in the dynamic snippet, set it to equal param.pname. For example:

{{include name="Snippet Name" pname="pname-value"}}

Alternatively, you can also call the Snippet from within an MFScript statement using the same format as you would call a nested template. For example:

{{MFSCRIPT if @path = "contact" then output $Snippet_Name}}

Functions

Markup Factory Functions are used in Templates, Snippets, and Pages to output content and data from the Markup Factory system in HTML format. The following is a list of available functions that are provided by the Markup Factory Template Engine.

The main content region for the page. This is the default content region for the page. This area will be replaced with dynamic module content when applicable or with the default static content for the page.

Parameters:

None

Sample Usage:

{{MainContent}}

where "123" is the region ID for content to be displayed in this place.

None

Sample Usage:

{{HeadContent}}

{{GetUpcomingEvents}}*

Outputs unordered list of upcoming events where ListID specifies the class name to be applied to the <ul> tag, and EventsToDisplay is the number of upcoming events to include in the list, and DaysToDisplay is the forward date range to take include in the events query. EmptyText is the text to display when there are no upcoming events within the DaysToDisplay range.

Parameters:

ListID
EventsToDisplay
DaysToDisplay
EmptyText

Sample Usage:

{{GetUpcomingEvents ListID="calendar_events" EventsToDisplay="5" DaysToDisplay=90 EmptyText="No events in the next 90 days."}}

Displays a login / register form. All attributes are optional.

Parameters:

Message(optional): a message to display above the login fields
MessageClass(optional): the class to apply to the message text
AllowRegistration(optional): true or false value indicating whether to allow registration on the login form

Sample Usage:

{{Login Message="?" MessageClass="?" AllowRegistration="?"}}

Displays the newsletter sign up form

Parameters:

None

Sample Usage:

{{NewsletterSignup}}

Displays the logged in status data

Parameters:

None

Sample Usage:

{{Status}}

Displays a compact site search form

Parameters:

None

Sample Usage:

{{Search}}

Outputs the Markup Factory powered by logo.

Parameters:

None

Sample Usage:

{{PoweredBy}}

Parameters:

None

Sample Usage:

{{SlideShow}}

Allows you to output a date is different formats.

Parameters:

Date - a date string to format
Format - a string specifying the format to output

Formatting Options
- %m - Month as a decimal (02)
- %B Full month name (February)
- %b Abbreviated month name (Feb )
- %d Day of the month (23)
- %O Ordinal of day of month (eg st or rd or nd)
- %j Day of the year (54)
- %Y Year with century (1998)
- %y Year without century (98)
- %w Weekday as integer (0 is Sunday)
- %a Abbreviated day name (Fri)
- %A Weekday Name (Friday)
- %H Hour in 24 hour format (24)
- %h Hour in 12 hour format (12)
- %N Minute as an integer (01)
- %n Minute as optional if minute <> 0
- %S Second as an integer (55)
- %P AM/PM Indicator (PM)

Sample Usage:

{{FormatDate Date="9/1/08" Format="%B %d%O, %Y"}} Output September 1st, 2008

Truncates text to a certain number of characters.

Parameters:

Text - the text to be truncated
Length - the number of characters to output (respects HTML and word boundaries)

Sample Usage:

{{Truncate Text="Hello World." Length="5"}} Output Hello

MFScript

MFScript can be used to create dynamic templates within Markup factory. Output options HTML code can be included in the output string to make dynamic templates that change based on Markup Factory parameters.

MFScript may also be initiated from within regular page content. The nest limit on templates is 6 levels deep. After 6 levels of nesting, a rendering message will be displayed.

The general format of MFScript statements is as follows:

{{MFSCRIPT if @path = "string" OR @tag = "string" then output "string"}}

Logical Operators

IF
OR
AND

Comparison Operators

= - Equals
!= - Does not equal
<> - Does not equal
< - Less than
> - Greater than
<= - Less than or equal to
>= - Greater than or equal to
in - Checks to see if the left hand value exists in the right hand value, for example: "d" in "a,b,c,d,e" would evaluate as "true"
inlist - similar to the "in" operator, but treats the right hand value as a comma delimted list, determine in the left hand value is an item in the list. For example: "7" inlist "7,5,9" would evaluate as "true" although "7" inlist "17,6,9" would evaluate as "false"

Runtime Variables:

@file - The URL after the domain name (i.e. /scripts/mf/page.asp). Trailing forward slashes ("/") will be removed.
@path1 - The first segment of the current URL, i.e. /path1/path2/path3/.../pathN
@path2 - The second segment of the current URL, i.e. /path1/path2/path3/.../pathN
@pathN - The "Nth" segment of the URL, i.e. /path1/path2/path3/.../pathN
@handle - The handle of you installation (i.e. handle.markupfactory.com).
@host - The domain name as entered in the browser's address bar.
@template - The name of the template being rendered.
@templateid - The template id of the template being rendered.
@username - The username of the logged in user.
@userid - The user id of the logged in user.
@userfirstname - The first name of the logged in user.
@userlastname - The last name of the logged in user.
@useremail - The email address of the logged in user.
@usergroups - A comma delimited list of the group IDs that the logged in user is a member of.
@date - Today's date in the format MM/DD/YYYY
@time - The date and time in the format MM/DD/YY HH:MM:SS
@url - Alias for @file
@cursorPosition - used in dynamic snippets to denote the position of the cursor in returned record sets

Output options:

"string"
where string is any alpha numeric string. Escape character is double quote. Must be surrounded by quotes. For example, to include an email link in the template if the page path is set to "contact", you would use the following MFScript:
{{MFSCRIPT if @path = "contact" then output "<a href=""mailto:email@domain.com"">email@domain.com</a>"}}
$template_name
can be used in nested template configurations. If the template name has a space in it's name, the space must be replaced by an underscore ‘_' within MFScript. For example, to nest the template "Test Template" in another template, you would use the following MFScript:
{{MFSCRIPT output $Test_Template}}

Writing Valid and Accessible Template Code

Because of the flexibity of the Markup Factory Templae Engine, you are free to use any HTML, XHTML, and CSS markup you desire in your template. We at Markup Factory encourage you to write accessible and valid code for many reasons. Accessible and valid code is best practice in modern web design. There are numerous resources available on the internet to help today's web designer write accessible and valid code. The benefits of writing your code in this manner include the following:

Browser Compatibility
Modern web browsers are increasingly becoming more standards compliant. As web browsers continue to improve, your accessible and valid code will render more consistently on web browsers with less hacking and incompatibilities to contend with.
Searchability
Today's search engines often rank websites with valid code higher than those without. Creating valid code also helps search engines more properly index your content and gives you the opportunity to place important keywords in some of the tags that are required by valid code.
Faster Page Load Times
Because of the way that valid code is constructed, it will often be less bulky and less resource intensive to render. Browsers can render CSS based layouts much faster than table based layouts. This provides your visitors with a more efficient and pleasurable experience as they browse your website.
Accessibility
The term accessibility derives it's name from allowing your content to be accessible to individuals with impairments. Although a minority, it is often important for these individuals to be able to access the information on your website. These individuals sometimes employ the use of screen readers and other devices that work based on the requirements of accessible and valid code.
Maintainability
Writing valid code often makes maintanance of the website much easier. The code tends to be lighter weight and other designers will immediately see how your code was put together. With CSS based layouts, it is easy to quickly roll out a site wide style update or reorganization of your structure. Adding navigational buttons to CSS based layouts is dramatically more simple than other methods.
Usability
The requirements for writing valid code inherently encourage the designer to create a more usable website. Many of the benefits listed above contribute to better usability in direct and indirect ways.
Increased Sales and Conversions
Coupled with good design, better usability often translates into increased sales or conversions. This is a very tangible and measureable benefit to writing valid and accessible code.

Below is a list of some of our favorite resources for helping you learn about and create valid and accessible template code:

Markup Factory employs the use of some standard CSS styles that are applied to system generated code. These styles must be used if your website uses any of this code and may also be used elsewhere in your website design for consistency. The Markup Factory CSS styles are included by default in your installation and may be modified to change the style output of Markup Factory generated content.

Markup Factory Documentation

Open up a can of Markup Factory on your website.

Template Engine Documentation

Templates

Sample Template

Template Stylesheets

Snippets

Functions

{{MainContent}}

Parameters:

Sample Usage:

{{StaticContent}}

Parameters:

Sample Usage:

{{GetPageTitle}}

Parameters:

Sample Usage:

{{GetLatestBlogPost}}

Parameters:

Sample Usage:

{{GetLatestBlogPosts}}

Parameters:

Sample Usage:

{{GetBlogPostLists}}

Parameters:

Sample Usage:

{{GetBlogArchiveList}}

Parameters:

Sample Usage:

{{GetBlogCategoryList}}

Parameters:

Sample Usage:

{{GetNewsletterSignup}}

Parameters:

Sample Usage:

{{GetDate}}

Parameters:

Sample Usage:

{{MetaData}}

Parameters:

Sample Usage:

{{HeadContent}}

Parameters:

Sample Usage:

{{GetUpcomingEvents}}*

Parameters:

Sample Usage:

{{Login}}

Parameters:

Sample Usage:

{{NewsletterSignup}}

Parameters:

Sample Usage:

{{Status}}

Parameters:

Sample Usage:

{{Search}}

Parameters:

Sample Usage:

{{PoweredBy}}

Parameters:

Sample Usage:

{{SlideShow}}

Parameters:

Sample Usage:

{{FormatDate}}

Parameters:

Formatting Options

Sample Usage:

{{Truncate}}

Parameters:

Sample Usage:

MFScript

Logical Operators

Comparison Operators

Runtime Variables:

Output options:

Writing Valid and Accessible Template Code