AMPx Accelerated Mobile Pages (AMP) for MODX Evo

AMPx Accelerated Mobile Pages (AMP) for MODX Evo

AMPx snippet for MODx Evolution adds support for the Accelerated Mobile Pages (AMP) Project, an open-source initiative launched by Google as a way to improve the overall performance of mobile websites with a lightweight HTML framework that can load instantly everywhere.

With AMPx snippet all posts, category and homepage on your MODx site will have dynamically generated AMP-compatible versions.

With AMPx you can easily create a fully navigable and customizable AMP-compatible website

Installation

Step 1) install with Packagemanager

Step 2) Create a new resource:

  • template amp-blank
  • richtext: no
  • content: [! ampx!]
  • pagetitle: amp

Step 3) Add to the HEAD tag a link the AMP version

<link rel="amphtml" href="[ (site_url)][~57~]?id=[*id*]"/>

or use with If snippet:

<link rel="amphtml" href="[(site_url)][~57~]?ampid=[*id*][[if? &is=`[*id*]:=:1` &then=`&tpl=amp-Template-Home`]]"/>

<link rel="amphtml" href="[(site_url)][~57~]?ampid=[*id*][[if? &is=`[*isfolder*]:is:1` &then=`&tpl=amp-Template-Container`]]"/>

you can pass tpl parameter via URL:

<link rel="amphtml" href="[ (site_url)][~57~]?ampid=[*id*]&tpl=amp-Template-Home"/>

<link rel="amphtml" href="[ (site_url)][~57~]?ampid=[*id*]&tpl=amp-Template-Container"/>

IMPORTANT: Replace 57 with the ID of resource created at Step 2

Tips:

1) Caching

Caching is not very important, because Google displays AMP pages from AMP Cache CDN, not from your site, ie:

https://cdn.ampproject.org/c/tattoocms.it/amp.html?ampid=172

 

For better local performance, you can cache the [[ampx]] snippet call, but you have to enable "Cache is based on Resource ID and $_GET parameters" on Manager > Tools > Configuration > Site > Document caching type

cache settings modx evolution

2) Display Template variable in amp page from main doc

Basic call

[[AMPtv? &tv=`downloadlink`]]

Output tv using modx widget (ie hyperlink)

[[AMPtv? &tv=`downloadlink` &widget=`1`]]

Output only if tv is not empty (with If snippet):

[[if? &is=`[!amptv? &tv=`downloadlink`!]:!empty` &then=`<a href="[[amptv? &tv=`downloadlink`]]" target="_blank" alt="download">Download</a>`]]

 

Issues:

1) validation error with any active plugins that loads something (like js to the page code) with OnWebPagePrerender

Comments