Controlling <head/>Element
Control HTML elements in a page's <head/>
In C1 CMS, you can append and override elements in the HTML <head/> of a page with CMS Functions and HTML content bits.
This allows you to control the <title/>, <meta/> elements and other <head/> elements so they match specific content on a page. Besides, you can include links to CSS files ( <link/>) and scripts ( <script/>) on the functionality that requires them rather than including those in global templates.
To override or append the HTML <head/> elements, simply specify them within the <head> element in your CMS Function or HTML content bit.
As a result, C1 CMS will merge elements in a way that makes sense. For example, if a CMS Function specifies a page's title and description, it can overwrite these settings made at global template level.
<head>
<title>A new page title</title>
<meta name="description" content="A new description" />
<link rel="stylesheet" type="text/css" href="another-style.css">
<script type="text/javascript" src="another-script.js">
</head>In the example above, the elements in the HTML <head/> are specified in a CMS Function's markup. The title and the meta description will overwrite any provided at the page template or page levels, the link to a CSS file and a script will be added to the final page.
You can use the above approach in:
- Any XHTML document – for instance, in a page or a blog post when switched to Code View, you can manipulate the HTML
<head/>elements, and this will show up on a final page or blog post as a result. - Any CMS Function that emits an XHTML document – for instance, Razor Functions or XSLT Functions.
ASP.NET User Controls
This feature is not available for ASP.NET Web Forms controls (User Controls). Here you should keep using the standard ASP.NET API for this.
As to ASP.NET Web Forms, which already provide the HTML <head/> access, you still have all the ASP.NET Web Forms features to manipulate the HTML <head/>, for example:
Please note that C1 CMS with <head/> elements set via the XHTML document feature is compatible with the ASP.NET Web Form approach.
How it works
If you return an XHTML document (with xmlns etc), C1 CMS parses out the head and body:
- The content of the
<body />element will be shown at the location where the document or function is placed. - The content of the
<head />element will be merged into the final page's<head/>.
Within the <head/> element, duplicate tags will be eliminated using the following rules:
<title />: The most recent (see below) will be used. It means that the <title/> in functions will always override that in templates.<meta />: The most recent (see below) will be used. Again, the <meta …/> elements in functions will always override those in templates. Please note that here the@nameor@propertyvalue is used as the key to locate duplicated<meta/>elements. Examples:<meta name="description" content="A" />and<meta name="description" content="B" />share thename(“description”) and only B will be shown.- Likewise with overriding Open Graph tags:
<meta content="A" property="og:title" />and<meta content="B" property="og:title" />- here only B will be shown.
<script />tags that are identical (for instance, multiplescripttags including the same jQuery version) are reduced to 1.<link />tags that are identical are reduced to 1.
If elements have an id attribute and share the same value, only the last one will be shown.
Example:
<script id=”jQuery” src=”some-path” /> <script id=”jQuery” src=”some-other-path” />
In the sample above, only "some-other-path" will be emitted.
Most recent elements
Please note that here the "most recent" stands for the most deeply nested <head/> element in the rendered page. In simple English: the page template will always lose to a CMS Function that overrides an element like <title />.
Ordering elements
C1 CMS will show <head/> elements in the order they are encountered.