Adding HTML in MindTouch
The following encapsulates everything you might need to know about adding HTML (HTML5) to your MindTouch environment (Professionals Only).
First off, the way to add HTML on each page is NOT through the "</> HTML" or "View > Source".
- HTML should only be added through the Smart Content Editor and then selecting Style > DekiScript once in edit mode via the "Edit" button found in the user menu. DekiScript is a language MindTouch created that allows uniquely formatted HTML and JS, inlined CSS, and page manipulation such as template calls, content reuse, content trees, machine learning, and more to be created all under 1 type of scripting language. Being all of these things, it is worth noting that the syntax will be different from what you may be used to with other HTML. See 'Syntax Differences' below to see everything that is different from what you are used to.
- The problem with adding complex HTML via the View Source of HTML view mode is because on save or on the flip of the editor back to the visual mode, the HTML elements sometimes get injected with paragraph elements and has been known to change to keep the source error free and keep the same reliability we had before (WYSIWYG). Adding classes and ids for instance will always work in the "View" > "Source/HTML", but changing the structure and tags will likely change. If you wish to find out more about this, let your account's Customer Success MindTouch Representative know, but just be aware that HTML written in a DekiScript block will never change and will always preform the same way it did the last time it was edited. Once again, see 'Syntax Differences' below to see syntax changes that you might be used to doing in HTML5 that might not work in your DekiScript block.
Where to put HTML
The following covers where and what to do based on the nature of the HTML change you would like to make.
Single Page HTML
In the event you wish to add your own HTML to an individual page within your MindTouch environment, such as the home page, you just edit that given page and apply the given HTML you wish to add directly to the page in a DekiScript block.
Multiple Page HTML (Global)
Should you wish to apply HTML on every page, every content page, every special page, or globally but only to certain users, browser, or whatever else, you are going to use a combination of CSS in the Control Panel and HTML in the template directories. Based on where you would like to place it on the following for all pages, you can use the following image. For all other branding regions, refer to 'Regions'.
The most popular branding regions are the Header, Footer, and then Content Header and Footer. Links to the Header and Footer can be found in the Site Tools > Dashboard > Branding > Header Template or by navigating to the Template Directory within the Dashboard and locating the said template you are trying to access.
Within Meta Tag
In the event you want to add things to the Page Head, Meta Tag, or Page Tail, please do not add it to the header, footer, or any other template. Things such as font-family sources or an additional Google Analytic authentication need to be done in the Site Tools > Control Panel > Custom HTML > Page Head (see ' Custom HTML' for more).
Syntax differences between HTML and DekiScript
Text must be surrounded by quotes
<h1>'Title'</h1> <p>'Words'</p> /* or */ <h1>"Title"</h1> <p>"Words"</p>
Quotes within text must be escaped with a backslash
<p>John's Car</p> <p>Did you read the book "Book title"?</p>
<p>'John\'s Car'</p> <p>'Did you read the book "Book title"?'</p> /* or */ <p>"John's Car"</p> <p>"Did you read the book \"Book title\"?"</p>
Breaks, images and a few other blocks break without a closing slash or tag
<img src="tree.png" alt="Tree"> <br> <p>Tree Description</p>
<img src="tree.png" alt="Tree"/> <br/> <p>'Tree Description'</p> /* or */ <img src="tree.png" alt="Tree"></img> <br></br> <p>'Tree Description'</p>
Inline text of different html tags must be separated by a semi colon
<p>Do <strong>NOT</strong> forget to wear protective eyeware</p>
/* DekiScript Equivalent */ <p>'Do '; <strong>'NOT '</strong>; 'forget to wear protective eyeware'</p> /* or */ <p>'Do '; <strong>'NOT '</strong>; 'forget to wear protective eyeware' </p>
DekiScript/HTML Best Practices:
- All code done in DekiScript blocks, NOT in the source of a given page.
- Insert comments before substantial code blocks to explain the purpose.