Fleeksite Templating Documentation

The host of content distribution methods available on the FleekSite Website Development Platform

We take asset delivery pretty seriously, so we've tried various different companies for our image storage and even built our own custom solutions.

Right now we deliver images using:

Amazon Simple Storage Service

Amazon CloudFront CDN

FleekSite Image Server (Resize)

FleekSite Root Image API

FleekSite Imgix CDN

So there's no shortage of methods for getting your images delivery as fast as possible. So how do we use these images dynamically in liquid ?

You use the {{image_url}} variable, this will automatically fill in with FleekSites current preferred image delivery method to ensure you have the fastest loading images.

The plan is to allow users to choose their delivery methods eventually, but for now FleekSite will automatically choose it for you, saving you the thought.

How To Stop A Page From Being Rendered By Liquid

To do this simply start the page with

<%= no_render %>

A Shell To Implement A Custom Styled Pagination

   {% if blogs.pagination.page > 1 %}
     {% for page in blogs.pagination.last_pages %}
       {% if page != blogs.pagination.page %}
           {{page}}                  
       {% endif %}
     {% endfor %}
     {% if blogs.pagination.more %} 
          {{blogs.pagination.page}}
         {% for page in blogs.pagination.next_pages %}
            {% if page != blogs.pagination.page and page > blogs.pagination.page %}
               {{page}}                    
            {% endif %}
         {% endfor %}
     {% endif %}     
   {% else %}
     {% if blogs.pagination.total_entries > blogs.pagination.page_size %}
          {% if blogs.pagination.more %}  
             {{blogs.pagination.page}}                    
          {% endif %}
          {% for page in blogs.pagination.next_pages %}
             {% if page != blogs.pagination.page and page > blogs.pagination.page %}
                {{page}}                    
             {% endif %}
          {% endfor %}
     {% endif %}
  {% endif %}

How To Load Your Posts and Comments Using Javascript

/api/v1

GET REQUESTS

/POSTS

/USERS

/COMMENTS

POST REQUESTS

How To Use Forms and the various options you can pass in.

1. success_url - this tells the server where to send the user next, after the form has been successfully submitted and processed. - Maybe a thank you page?
2. failure_url - this does the opposite, it's where the user will be sent if the form is not processed successfully.

1. /api/lead - leads are submitted to the endpoint via a post request
2. /ap/post - users can create posts on your website and they will be marked as user submitted, they will not be published by default.

An Image Resizer Comes Built In With The Fleeksite Templating Solution, Here's How It's Used

How To Make Single Page Templates

{% for image in media %}
 {{image.url}}
{% endfor %}

A list of the fields available when templating for the site.

We'll be taking a look at the cool uses of bits in your code.

{% for bit in bit_list %}
 {% if bit.category == social %}
  {{bit.name}}: {{bit.value}}
 {% endif %}
{% endfor %}

{{bits.social.facekook}}

{% for bit in bit_list.social %}
 {{bit.name}}: {{bit.value}}
{% endfor %}

We'll be looking at all the fields available for posts as well as the use of extra fields.

Liquid is the templating engine that Fleeksite uses in order to render dynamic data into the templates. Eg. from the content section.

We'll be going through all the basics you'll need to know to build a full fledged website.

There are two main types of operators in liquid:

1. Tags
2. Filters

Tags

These are denoted by a curly brace and a percentage sign, eg.

{% collection blogs %}

In the example above, a request is being made to MMS (the platform fleeksite runs on) to get blog posts for the current site, the tag is called collection, so the format is {% valid_tag options %}.

We can add a little more detail to this as well:

{% collection blogs, limit: 7, order: desc title, tag: featured %}

In this example, we are filtering the blogs by only getting blogs with the tag featured, then we are ordering the blogs by title, then finally limiting the number of blogs we get to 7.

Pretty useful and simple right?

great!

There are a number of tags, if you enter an invalid tag, then nothing will happen.

Filters

These are denoted by a pipe or vertical bar |. eg.

{{ apple pie | split: }}

This little piece of code takes apple pie and splits it at the spaces, what you'd be left with is a list of two words, apple and pie.

Custom Tags

We have just two custom tags here at Fleeksite:

1. Collections
2. Partials

See the Liquid Documentation at the links below for further guidance:

1. https://shopify.github.io/liquid/
2. Liquid for Designers · Shopify/liquid Wiki · GitHub
3. https://github.com/bettyblocks/liquid-elixir/tree/master/test/templates

1. Hover over the content dropdown and click all
2. Click the Curate button and fill the form, the image is optional, but if you do not upload the primary image here, you will need to set it inside in the post editing section.
3. Click Create and you'll be directing to the post editing page.
4. You'll find numerous different sections depending on the type of post, have a look through and fill the appropriate sections.
5. At the bottom you will find the option to upload images, upon uploading an image, you can choose to set the image as primary by clicking the star or delete the image by clicking the trash can.

1. Login to the site you want to upload a template for, you'll know you are logged into the correct site when the sites name appears in big blue letters at the top left hand corner of the admin .
2. Hover over the design option and go to all templates:
3. On The Templates Page, click the upload template button:
4. Next, click the choose files button and select your UNZIPPED* folder using GOOGLE CHROME*, then hit upload.

That's it!

That's all there is to adding a new template or uploading your site.

There's going to be a lot of pictures here to make it easy getting started, so here we go:

1. Head To The Sites Page by click Sites on the menu bar.
2. Hit The New Site Button and fill the information properly to create the site:
3. Upon successful submission, you'll be brought back to the sites page, click the name of the site you just created in order to sign into that site.
4. When you see the big blue words at the top right hand corner change to the site name, it means you're logged into that site.

That's it! You're site is ready to be designed.

Lorem the It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

How to leverage layouts

<html>
  <body>
    {{content}}
  body>
html>

How to create and customise your login forms

1. Email/Password
2. Google
3. Facebook
4. Email Magic Link

Email/Password

1. session[email]
2. session[password]

GOOGLE

1. session[s_type] - google
2. session[s_token] - google id token

FACEBOOK

1. session[s_type] - facebook
2. session[s_token] - facebook auth token

MAGIC LINK

1. session[email]

For customising your email templates

1. The Welcome Email
2. The Password Reset Email
3. The Magic Link Email

• The authentication token is available in all templates using this notation:

{{token.value}}

• Only HTTPS links work in emails

The Welcome Email

https://{{site.domain}}/auth/confirm/{{token.value}}?success_url=/login&failure_url=/

THE PASSWORD RESET EMAIL

https://{{site.domain}}/setpass?key={{token.value}}

THE MAGIC LINK EMAIL

https://{{site.domain}}/login?code={{token.value}}

We'll take a quick look at the functionalities of the for loop

{% collection pages, limit: 10, tag: fun, name: things %}
{% for thing in things.entries %} 
 {% if forloop.first %}
  {{thing.name}}
 {% elsif forloop.last %}
  {{forloop.index}}
 {% endif %}
{% endfor %}

{%for i in array.items limit: 3 %}
  {{i}}
{%endfor%}
next
{%for i in array.items offset:continue limit: 3 %}
  {{i}}
{%endfor%}
next
{%for i in array.items offset:continue limit: 3 %}
  {{i}}
{%endfor%}

{%for i in array.items offset:continue limit:3 %}
  {{i}}
{%endfor%}

The partial tag is denoted by

{% partial %}

A partial tag is used to put one page or partial into another page, the name of the partial is the name of the page that you want to pull. eg.

{% partial menu %}

This example would look for the template with the title menu and replace the partial block on the page, with whatever is in the menu template.

A Quick Look At Conditional Tags

{% if 4 > 5 %}
 less is greater
{% elsif 3 == 2 %}
 3 is 2
{% else %}
 neither
{% endif %}

{% if 'apples' like 'apple' %}
  true
{% else %}
  false
{% endif %}

{% if 'apples' contains 'apple' %} 
  true 
{% else %} 
  false 
{% endif %}
        

{% unless name == PearOrAvacado %}
 {{role}}
{% else %}
 {{other_role}}
{% endunless %}

{% case a.size %}
 {% when 1 %}
  Small
 {% when 2 %}
  Big
{% endcase %}

{% collection %}

{% collection blogs, name: featured_blogs %}

{% collection products, tag: special %}
{% for product in products.entries %}
  {{product.title}}
{% endfor %}

{% collection users, limit: 4 %}
{% for user in users.entries %}
  Hi! {{user.first_name}} {{user.last_name}}
  {{user.tags}} : {{ user.tags | contains: 'tag' }}
  {% assign random_tag = user.tags | random %}
  {{random_tag}}
{% endfor %}

{% collection landings, order: inserted_at desc %}

{% collection pages, limit: 5 %}

{% collection pictures, override_page: true %}

{% collection blogs, starred: true %}

{% collection blogs, user_sub: true %}

{% collection blogs, label: tech %}

{% collection blogs, status: Draft %}

{% collection blogs, starred: true %}

{% collection blogs, user: 230 %}