PCF Page Structure
PCF pages—the files that correspond to pages on the live website—are XML files with a few customizations to deliver extra functionality in Modern Campus CMS. This means that the content and overall page structure still need to adhere to XML syntax standards. Regular content editors don't need to be concerned with this as the WYSIWYG editor ensures all content is stored in the correct format. Users who have the ability to edit the page source code directly, however, should be aware that HTML standards are often more lax than XML in regards to syntax structure.
A PCF page is comprised of a prolog section of information about how to read and process the content, followed by the actual data structure.
PrologLink to this section
The prolog is the first few lines at the top of the document that determine what type of file it is, and how its contents should be viewed.
The first line is the declaration of the file-type:
<?xml version="1.0" encoding="UTF-8"?>This defines that the document's contents adhere to XML (version 1.0) syntax requirements and any character encoding used for special characters.
Next is the pcf-stylesheet declaration, which is a customized version of the universal equivalent xml-stylesheet.
<?pcf-stylesheet path="/_resources/xsl/interior.xsl" title="HTML" extension="html"?>Add more than one of these directives to generate additional products when the page is published. The extension needs to be unique to prevent an overwrite, but if multiple products need to share the same extension, the attribute allows for the creation of a unique filename by adding text before the extension. For example, the file about.pcf with extension="-test.html" would create the final product of about-test.html.
PCF-Stylesheet Attributes
| Attribute | Example | Description |
|---|---|---|
| path |
| Required. Defines the path to the XSL file that transforms the page. |
| extension |
| Required. Defines the extension that replaces the .pcf extension on publish. If the extension value does not contain a period, then Modern Campus CMS will add one as needed. |
| site |
| Defines an alternative site where the XSL file that was defined as part of the path resides. |
| title |
| Defines a friendly name, which appears in place of the extension on the tabs shown in the preview. If not given, the title is pulled from the extension value. |
| alternate |
| Used when there is more than one PCF-Stylesheet declaration to identify the file as a secondary output type in order to create a preview based on the alternative output. |
| params |
| Passes an <xsl:param> value to a top-level parameter by identifying the parameter with the same name and providing the value. To declare multiple params, separate by a semi-colon. |
| publish |
| Prevents the defined stylesheet from publishing. This is useful for stylesheets that should only create a preview, such as a debug XSL for developers. |
The next item on the page is typically the Doctype declaration:
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">In this statement, the root node document has been defined, as well as a reference to a file that carries a character map for converting HTML character entities to their XML equivalent.
DataLink to this section
In XML, all data needs to be contained within one root element. For 99% of our implementations, we have used document as our root element. Additionally, in order to use the element-style region tags, the root node is where the ouc namespace needs to be declared. It must look exactly like this (case-sensitive):
<document xmlns:ouc="http://omniupdate.com/XSL/Variables">Although it is not required, most implementations will then have the following three nodes:
<headcode></headcode> <!-- before closing head tag -->
<bodycode></bodycode> <!-- after opening body tag -->
<footcode></footcode> <!-- before closing body tag -->These provide an avenue for developers to add page-specific extra resources, such as CSS or JS, to three predetermined locations on the final HTML output. These are not official system elements, and are only utilized if the XSL is configured for them. Adding a <head> / </head> tag will cause errors on the page.
The next items in a typical setup are the common page properties. These are designated by the ouc:properties elements, which determine the form-fields that appear under Properties > Parameters.
<ouc:properties>
<title>Paget Title</title>
<meta name="Description" content="Page Description" />
<meta name="Keywords" content="Page Keywords" />
</ouc:properties>Property settings are often followed by standard editable regions, which look like:
<ouc:div label="maincontent" group="Everyone" button-text="Main Content">
<ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" wysiwyg-class="maincontent"/>
<p>Content goes here...</p>
</ouc:div>Note: the XML structure that houses these elements may change from template to template, and changing it may require updates to the XSL.
Complete ExampleLink to this section
<?xml version="1.0" encoding="UTF-8"?>
<?pcf-stylesheet path="/_resources/xsl/interior.xsl" title="HTML" extension="html"?>
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
<document xmlns:ouc="http://omniupdate.com/XSL/Variables">
<headcode></headcode> <!-- before closing head tag -->
<bodycode></bodycode> <!-- after opening body tag -->
<footcode></footcode> <!-- before closing body tag -->
<ouc:properties label="metadata">
<title>Interior</title>
<meta name="Description" content=" />
<meta name="Keywords" content=" />
</ouc:properties>
<ouc:properties label="config">
<parameter name="heading" type="text" group="Everyone" prompt="Page Heading" alt="Please enter the page heading.">Interior Title</parameter>
<parameter name="breadcrumb" type="text" group="Everyone" prompt="Breadcrumb" alt="Please enter the breadcrumb text. This is not used on index pages.">Interior Breadcrumb</parameter>
</ouc:properties>
<ouc:div label="maincontent" group="Everyone" button-text="Main Content">
<ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" wysiwyg-class="maincontent"/>
<p>Content goes here...</p>
</ouc:div>
<ouc:div label="additional-content" group="Everyone" button-text="Additional Content">
<ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" wysiwyg-class="additional-content"/>
<p>Content goes here...</p>
</ouc:div>
</document>