Overview
Statamic supports AMP by providing a “pivot” route which serves an alternate set of views and layouts conforming to AMP requirements.
Turn it On
Enable AMP globally as an option in config/statamic/amp.php
. Any entry with a URL will then have its AMP version available at /amp/{url}
.
'enabled' => true,
Collections
Once enabled, you will have the ability to enable AMP on your individual collections.
#content/collections/blog.yaml
amp: true
Routes
You can add 'amp' => true
to a route to AMP it.
// config/statamic/routes.php
'routes' => [
'/flat' => [
'template' => 'flat',
'amp' => true,
]
]
AMP Views
Whenever you visit /amp/{url}
it will attempt to load whatever entry would be found at {url}, and swap out the regular view for a magical AMP one ✨.
AMP views follow the same exact file locations as regular views, except in an /amp
subdirectory.
resources/views/
|-- amp/
| |-- blog/
| |-- |-- index.antlers.html
| |-- |-- show.antlers.html
|-- blog/
|-- |-- index.antlers.html
|-- |-- show.antlers.html
For example, if an entry loaded a blog/show
view by default, its AMP view would be amp/blog/show
. You will need to create these alternate views yourself.
Variables
If an entry has an AMP URL, it will a corresponding amp_url
variable. You can use this to point to your AMP document from the original.
<link rel="amphtml" href="{{ amp_url }}" />
Similarly, you can use the permalink on the AMP view to link back to the canonical original.
<link rel="canonical" href="{{ permalink }}" />
Live Preview
When enabled, the Live Preview feature has the ability to preview the AMP versions of your entries.