Converting AMP HTML Pages to Layouts and Pages
This guide will help you convert a static theme file into Liquid layouts and pages to be used as platformOS components.
Your layout will include what's before and after the content of your HTML page. You will put the content of the HTML page into a separate page.
Requirements
To follow this tutorial, you should have a static HTML theme downloaded and added to the codebase of your Instance. This tutorial uses the Blog template from AMP Start.
Steps
Converting HTML pages to layouts and pages is a three-step process:
Step 1: Create page for content
From the HTML page, copy the content into a separate Liquid page, e.g. views/pages/blog.liquid:
- Tip: The
maintag is usually a good indicator of where the content is starting and ending. - Add a slug to your page.
- The page will use layout named
applicationby default, so you don't have to specify it because it will be namedapplication. - Add a title to your page to make it dynamic.
app/views/pages/blog.liquid
{% content_for 'meta_title' %}Blog{% endcontent_for %}
<main id="content">
<article class="recipe-article">
<header>[...]</header>
<section>[...]</section>
</article>
</main>
Step 2: Edit layout
Edit your layout app/views/layouts/application.liquid:
- Cut the first part of the HTML page and add it to the top of your layout.
- Replace or add the
title. content_for_layoutwill be populated by theblog.liquidpage content.- Cut the footer part of the HTML page and add it to the bottom of your layout.
- Add
ampto thehtmltag.
Note
Read more about the AMP HTML Specification
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>The Recipe Blog</title>
<link rel="canonical" href="https://{{ context.location.host }}/{{ context.page.slug }}">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>
{% yield 'meta_title' %}
</title>
</head>
<body>
{{ content_for_layout }}
</body>
</html>
Now, if you sync and check the page, you will find that it's working and it's still a valid AMP page. However, images aren't displayed, because their relative path has changed.
Step 3: Adjust image paths
Change the path of images using the asset_url filter. Modify each image path from
<amp-img src="../img/blog/spritzer.jpg" width="1280" height="853" layout="responsive" alt="The final spritzer" class="mb4 mx3"></amp-img>
to
<amp-img src="{{ 'img/blog/spritzer.jpg' | asset_url }}" width="1280" height="853" layout="responsive" alt="The final spritzer" class="mb4 mx3"></amp-img>
Sync. Images are now displayed.
Next steps
Congratulations! You have converted an HTML template into platformOS pages and layouts. This means that you can now use all the capabilities of the platform, for example, you can feed data to the pages with GraphQL: