This is just an example of how to start making your site AMP Compatible.
For this to work:
-
You must be on Mura 7.1.184 or greater
-
Add this to your theme eventhandler.cfc in the onRenderStart();
<!--- Allows AMP to work --->
<cfif $.event('amp') eq 1>
<cfset request.returnFormat='AMP'>
</cfif>
-
Place the
/amp_incfolder in thetheme/templates -
In the
html_head.cfmfile place the following just below the feeds.
Replace blog and news with the sections of the site you wish to expose to AMP
<!--- MURA AMP --->
<cfif len($.content().getFileName())>
<cfif listFindNoCase('Blog,News', $.content().getParent().getTitle()) >
<link rel="amphtml" href="#$.content().getURL(complete='true')#?amp=1" />
</cfif>
</cfif>
- In the
navbar.cfmwrap the standard cfml in the folowing<cfif>
<cfif request.returnFormat NEQ 'AMP'>
<!--- Standard Mura Navbar Code --->
<cfelse>
<!--- Include AMP Header --->
<div class="logo">
<a href="#$.createHREF(filename=$.content('filename'))#">
<amp-img src="#$.siteConfig('themeAssetPath')#/images/{-- your logo --}" height="50" width="150" alt="Mura AMP'd Up"></a>
</div>
</cfif>
- Lastly wrap the code in the templates you are using for the sections identified above in the folowing
<cfif>
<cfif request.returnFormat NEQ 'AMP'>
<!--- Your template code. In my case the two_column_SR and the three_column --->
<cfelse>
<cfinclude template = "amp_inc/page_amp.cfm">
</cfif>
- Once complete you should be able to navigate to a designated amp page with
?amp=1appended to the url and start validaiting your markup.
note for amp-youtube to work you'll need to create a Page/YouTube subtype and put the
/page_youtube/folder into thecontent_typesdirectory.