Sure. @TomWell @DFink
I’ll use some simple code.
First I would recommend setting up a local development environment if you don’t have one. It is great for testing out different CMS.
And the go to modx.com and download it for free.
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Mar 31 2015 23:02:22 GMT+0000 (UTC) -->
<html data-wf-site="54de3f9776b509d72ca98bbb" data-wf-page="55010674de74515e5236e4b6">
<head>
<title>[[*pagetitle]] - [[++site_name]]</title>
<base href="[[++site_url]]" />
</head>
<body>
This code outputs the pages title and site name to the title tag in the head section of the webpage.
You can use the [[*pagetitle]] anywhere you would like the title of the page you are publishing to appear.
Example
standard Webflow code: <div class="class created in Webflow"><h1>This is my main heading</h1></div>
In Modx: <div class="class created in Webflow"><h1>[[*pagetitle]]</h1></div>
The built in fields that I have used the most are
Title = [[*pagetile]]
Description = [[*description]]
Content = [[*content]]
Published on=[[*publishedon]]
A template variable or TV is simple a costume field you can use to extend the built in fields used in Modx.
For example if for some reason I didn’t like the Title field (outputted using [[*pagetitle]] in the code) I could create a new one. I might call it “themoreawsometitle” I would then use [[*themoreawsometitle]] in my code to output that field. (this is a silly example)
A chunk is the same as a Webflow symbol. Re-usable code.
Say you had a complex site and were going to need many templates. It would be a pain to have to recreate the <head> every time. This is especially true when adding in all of the types of data that could be in the head tag.
My solution would be to create a chunk called “head” and put this code inside:
<head>
<title>[[*pagetitle]] - [[++site_name]]</title>
<base href="[[++site_url]]" />
</head>
Then declare it in the template like this:
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Mar 31 2015 23:02:22 GMT+0000 (UTC) -->
<html data-wf-site="54de3f9776b509d72ca98bbb" data-wf-page="55010674de74515e5236e4b6">
[[$head]]
<body>
Lets review the basics;
We learned about some of the built fields used in Modx like “Title”(this is called in the code like this [[*pagetitle]])
We learned about template variables also know as TVs. These are custom fields called in the code like this [[*nameOfYourTVhere]]
We also learned about chunks. These are where you put your re-usable code like your footer, header and navigation elements. You call them into your code with this declaration [[$nameOfYourChunk]]
Full example
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Mar 31 2015 23:02:22 GMT+0000 (UTC) -->
<html data-wf-site="54de3f9776b509d72ca98bbb" data-wf-page="55010674de74515e5236e4b6">
<head>
<meta charset="utf-8">
<meta name="description" content="[[*description]]">
<!-- these two meta tags are using TVs to populate their content-->
<meta name="keywords" content="[[*keywords]]">
<meta name="author" content="[[*author]]">
<!-- end of meta tags using TVs-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<title>[[*pagetitle]] - [[++site_name]]</title>
<base href="[[++site_url]]" />
</head>
<body>
<!-- chunk containing HTML for my header and navigation elements. This will be used in other templates so I used a chunk-->
[[$headerNav]]
<!-- end of chunk-->
<main>
<h1>[[*pagetitle]]</h1>
<article class="webflow class"> [[*content]]</article>
</main>
[[$footer]]
</body>
</html>
. I found this video tutorial helpful in understanding Modx. He is using an older version of modx, and if you are using Their Cloud hosting I think you can ignore the installation process (which would be used with other hosts).
