Build member site pages with Liquid

​

Know the folder

• No subfolders. A name uses lowercase letters, digits, hyphens and underscores. Names that start with a dot are ignored.
• A page is a file and a row. pages/<slug>.liquid holds the content, and a row in config/pages.json holds the slug, title, position, published flag, layout and menu. A new page needs both. A site holds at most 50 pages.
• The home page’s slug is / in config/pages.json, and its file is pages/index.liquid. A slug is never index.

​

Pick a layout

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }} | {{ site.name }}</title>
    {{ content_for_header }}
  </head>
  <body>
    {% render 'nav' %}
    {{ content_for_layout }}
    {{ 'site.js' | asset_url | script_tag }}
  </body>
</html>

​

Read the Liquid objects

• Every url is a path on your company’s domain, such as /accounts/rileys-shop/about. Use it as written in links.
• An unpublished page isn’t listed. A page with published: false isn’t in site.pages, site.pages_menu or any menu.
• Don’t read member data in Liquid. Don’t read member or member.<field> in a layout, section, snippet or page. Member data is leaving member site Liquid, and fluid member-site lint warns on every member.<field> it finds. Read the viewer’s data in a script.
• Keep members’ data out of settings. config/settings.json is the same for every viewer.

<nav>
  {% for item in settings.menu.menu_items %}
    <a href="{{ item.url }}">{{ item.title }}</a>
  {% endfor %}
</nav>

​

Use tags and filters

{% section 'hero' %}
<main style="color: {{ settings.primary_color }}">
  <h1>{{ site.name }}</h1>
  {% render 'card' %}
</main>

​

Know the frame’s rules

Content-Security-Policy: frame-ancestors 'self'; sandbox allow-scripts allow-forms

• No cookies and no storage. A site’s JavaScript has no cookie, and reading document.cookie throws. It has no localStorage or sessionStorage. Don’t build sign-in, “remember me” or any state that relies on them, and never put a token or other credential in Liquid, settings or an asset.
• Scripts and forms only. The sandbox grants scripts and forms. The browser also blocks popups, alert and confirm dialogs, and navigation of the top page.
• Fluid draws the account menu. It appears outside the frame on every page, even a page with the layout none. No template can hide or replace it, so don’t build a second account menu or a sign-out link.
• Link inside the site. Use site.pages and menu url values. A click navigates inside the frame.
• Reach Fluid with fluid.fetch. The frame has no cookie, so the page’s own fetch to a Fluid API carries no session and fails. Call window.fluid.fetch(path, init) instead, which behaves like fetch. See Read viewer data in site scripts.

​

Use text assets only

@font-face {
  font-family: "Riley Serif";
  src: url("https://media.example.com/fonts/riley-serif.woff2") format("woff2");
}

.hero {
  background-image: url("https://media.example.com/images/hero.jpg");
}

​

Preview and publish