YikeSite Theme Documentation

YikeSite Themes consist of 5 elements. These are: 

  • The Layout. One HTML template file that controls the site, based on the powerful Liquid markup templating language.
  • Modules. HTML sub-templates that can be added as includes in The Layout, or as User Modules that end users can add to specific pages.
  • Stylesheets to style the HTML. The YikeSite Website Templates link to bootstrap stylesheets, which are modified through style.css. You are free to have whatever stylesheets you would prefer
  • Add your own custom Javascript. YikeSite Websites Templates have a link to jquery. 
  • Images that are used for your design.
  • Import / Export your theme for editing, and website as HTML. 
Themes can be edited online, or exported for editing on your desktop, zipped up an imported to any other site. 
 

We use liquid markup to power the layout for YikeSite pages. If you want to learn more about liquid syntax then please read the liquid for designers page on github.

Below are methods available throughout your sites. 


Site

Provides access to basic information about the account.

children

Returns an array of all the root pages of the site. 

Usage

{{ site.children }}

Example

{% for item in site.children %}
  <li><a href='{{ item.url }}'>{{ item.name }}</a></li>
{% endfor %}

cms_name

Returns the name of your CMS.

Usage

{{ page.site.cms_name }}

Example

Powered by {{ page.site.cms_name }}

cms_url

Returns the URL to your CMS.

Usage

{{ page.site.cms_url }}

Example

Powered by
<a href="{{ page.site.cms_url }}">
  {{ page.site.cms_name }}
</a>

hidden_children

Returns an array of all the hidden root pages.  

Usage

{{ site.hidden_children }}

Example

{% if site.hidden_children.size > 0 %}
  This site has {{ site.hidden_children.size }} hidden root-level pages.
{% endif %}

Returns an array of all the root pages of the site.

Usage

{{ site.menu }}

Example

{% for item in site.menu %}
  {% if item.urlname == page.root.urlname %}
<li class='active'>{% else %}<li>{% endif %}
 <a href='{{ item.url }}'>{{ item.name }}</a></li>
{% endfor %}

name

Returns the name of the account.

Usage

{{ page.site.name }}

Example

<h1>{{ page.site.name }}</h1>

url

Returns the account's domain and sub-domain if set, otherwise returns the site URL as a sub-domain.

Usage

{{ page.site.url }}

Example

<h1>
  <a href="{{ page.site.url }}">{{ page.site.name }}</a>
</h1>

url_id

Returns the account's unique sub-domain (chosen upon sign-up).

Usage

{{ page.site.url_id }}

visible_children

Returns an array of all the visible root pages.  

Usage

{{ site.visible_children }}

Example

{% for item in site.visible_children %}
  <li><a href='{{ item.url }}'>{{ item.name }}</a></li>
{% endfor %}

year

Returns the current year.

Usage

{{ page.site.year }}

Example

&copy; {{ page.site.year }} {{ page.site.name }}

Functions

Provides access to general information about the system, including abiltiy to edit, export, include, etc.

editing

Returns true if the editor is present on the current page.

Usage

{% if edit_mode %}
  <p>Useful information while editing.</p>
{% endif %}

exporting

Returns true if the template is being exported as HTML.

Usage

{% if exporting %}
  <p>Only shown if exporting is true.</p>
{% endif %}

include

Inserts the contents of the named module at the location of the tag.

Usage

{% include 'my_module' %}

Example

The theme's layout contains the following:

{% include 'header' %}
<p>I hope you find what you're looking for :)</p>

The header module contains:

<h1>Welcome to my website!</h1>

When the page is viewed, the user would see:

<h1>Welcome to my website!</h1>
<p>I hope you find what you're looking for :)</p>

logged in

Returns true if the viewer of the page is logged in.

Usage

{% if logged_in %}
  <p>Information displayed only to logged in users.</p>
{% endif %}

menus

Returns an HTML list containing links. The active page has a CSS class of active.

Usage

{{ page | menus, start_level=1, end_level=15 }}

Example

{{ page | menus, 1, 3 }}

viewing

Returns true if the editor is not present on the current page. This can be useful if JavaScript is conflicting with the editor.

Usage

{% if view_mode %}
  <p>This page is not being edited.</p>
{% endif %}

Page Content

Provides access to general information about a given page including link to edit or administrate, files and images on the page, whether it is hidden, etc.

Returns the URL to the administration section for the page.

Usage

{{ page.admin_link }}

Example

<a href="{{ page.admin_link }}">Page Settings</a>

body

Returns the page's contents.

Usage

{{ page.body }}

custom_date

Returns the custom date associated with this page (can be changed in the page's settings).

Usage

{{ page.custom_date }}

Example

This page's custom date: {{ page.custom_date | date: "%B %e, %Y" }} 

Refer to the documentation on date formats.

description

Returns the page's description.

Usage

{{ page.description }}

Returns the URL to the editing mode for the page.

Usage

{{ page.edit_link }}

Example

<a href="{{ page.edit_link }}">Edit Page</a>

embed_code

Returns the embed code if the module is present on the page.

Usage

{{ page.embed_code }}

Example

<h3>Video</h3>
{{ page.embed_code }}

files

Returns a hash of files attached to the page.

Usage

{{ page.files }}

Example

{% for file in page.files %}
  {% if file.extension == 'mp3' %}
    <a href="{{ file.src }}" class="jquery-mp3-player">{{ file.title }}</a>
  {% endif %}
{% endfor %}

The attributes available for an individual file are

  • file.title, the title the file was given when uploaded;
  • file.filename, the actual name of the file;
  • file.extension, the file type;
  • file.src, the URL to the file.

id

Returns the page's ID.

Usage

{{ page.id }}

Example

<div id="page_{{ page.id }}">
  <!-- Your content here -->
</div>

name

Returns the page's name.

Usage

{{ page.name }}

Example

<h2>{{ page.name }}</h2>

Returns a full URL to the page.

Usage

{{ page.permalink }}

Example

<a href="{{ page.permalink }}">
    Permalink to this page
</a>

url

Returns the URL to the current page.

Usage

{{ page.url }}

urlname

Returns the name of the page formatted for a URL.

Usage

{{ page.urlname }}

is_hidden?

Returns true if the page is hidden from the navigation (can be changed in the page's settings).

Usage

{% if page.is_hidden? %}
  This page is hidden.
{% endif %}

Example

{% if page.is_hidden? %}
  <p>This page is hidden.</p>
{% endif %}

modules

A page can have a single liquid page module attached to it. When you add the page module to a page, it will pull in all available liquid partials that you have in your template. On the design tab for your site, you can add more modules under the "page modules" tab.

All Modules

Returns an array of modules attached to the page.

Usage

{% if page.modules contains "blog" %}
  The page module called _blog.liquid is attached to this page!
{% endif %}

Example

{% if page.parent.modules contains "blog" %}
  Do something special just for blog posts.
{% endif %}

has_embed_code?

Returns true if the page has the embed code module.

Usage

{% if page.has_embed_code? %}
  The embed code is present.
{% endif %}

Example

{% if page.has_embed_code? %}
  {{ page.embed_code }}
{% endif %}

Returns an HTML list with CSS classes for styling of all the parents of the page.

Usage

{{ page.breadcrumbs }}

Example

{{ page.breadcrumbs }}

<!-- The output of the above line will be similar to this -->
<ul class="breadcrumbs">
  <li class="some-more"><a href="/locations">Locations</a></li>
  <li class="some-more"><a href="/locations/canada">Canada</a></li>
  <li class="one-more"><a href="/locations/canada/british-columbia">British Columbia</a></li>
  <li class="last-one">Victoria</li>
</ul>

Returns the children of the page as a hash.

Usage

{{ page.children }}

Example

{% if page.has_children? %}
  This page has {{ page.children.length }} sub-pages.
{% endif %}

Returns true if the page has any sub-pages (whether or they be hidden).

Usage

{% if page.has_children? %}
  This page has sub-pages.
{% endif %}

Returns true if the page has any hidden sub-pages.

Usage

{% if page.has_hidden_children? %}
  This page has hidden sub-pages.
{% endif %}

Returns true if the page has a parent page.

Usage

{% if page.has_parent? %}
  This page has a parent-page.
{% endif %}

Returns true if the page has any visible sub-pages.

Usage

{% if page.has_visible_children? %}
  This page has visible sub-pages.
{% endif %}

Returns the sub-pages of the page which are hidden as a hash.

Usage

{{ page.hidden_children }}

Example

{% if page.has_hidden_children? %}
  This page has {{ page.hidden_children.length }} subpages.
{% endif %}

Returns true if the page is a root page.

Usage

{% if page.root? %}
  This is the root page.
{% endif %}

Returns the depth of the page in the navigation.

Usage

{{ page.level }}

Returns the next page. The last page returns itself.

Usage

{{ page.next_page }}

Example

<a href="{{page.next_page}}">Go to next page</a>

Returns the parent-page.

Usage

{{ page.parent }}

Example

<a href="{{ page.parent.url }}">Parent</a>

Returns the previous page. The first page returns itself.

Usage

{{ page.previous_page }}

Example

<a href="{{ page.previous_page }}">Go to previous page</a>

Returns the sub-pages of the page which are visible as a hash.

Usage

{{ page.visible_children }}

Example

{% if page.has_visible_children? %}
  This page has {{ page.visible_children.length }} subpages.
{% endif %}

Returns the root ancestor of the page.

Usage

{{ page.root }}

Example

<a href="{{ page.root.url }}">
  Go back to {{ page.root.name }}
</a>

Images

Providing information about and manipulation of images

description

Returns an image's description.

Usage

{{ page.first_image.description }}

first_image

Returns the first image of the attached images.

Usage

{{ page.first_image }}

Example

<img src="{{ page.first_image.src }}" alt="{{ page.first_image.title }}">

has_images?

Returns true if the page has images.

Usage

{% if page.has_images? %}
  This page has images.
{% endif %}

Example

{% if page.has_images? %}
  <p>This pages has images, it may take longer to load.</p>
{% endif %}

id

Returns an image's ID.

Usage

{{ page.first_image.id }}

images

Returns a hash of images attached to the page.

Usage

{{ page.images }}

Example 1

This page has {{ page.images.length }} images.

Example 2

{% if page.has_images? %}
  Here are the images in reverse order:<br/>
  {% for img in page.images_reverse %}
    <img src="{{ img.src }}"/>
  {% endfor %}
{% endif %}

images_reverse

Returns a hash of images attached to the page in reverse order from page.images.

Usage

{{ page.images_reverse }}

last_image

Returns the last image of the attached images.

Usage

{{ page.last_image }}

Example

<img src="{{ page.last_image.src }}" alt="{{ page.last_image.title }}">

src

Returns an image's URL.

Usage

{{ page.first_image.src }}

Example

<img src="{{ page.first_image.src }}" alt="{{ page.first_image.description }}">

thumb_src

Returns an image's thumbnail URL.

Usage

{{ page.first_image.thumb_src }}

Example

<a href="{{ page.first_image.src }}">
  <img src="{{ page.first_image.thumb_src" alt="{{ page.first_image.title }}">
</a>

title

Returns an image's title.

Usage

{{ page.first_image.title }}

RSS Feeds

Each page in your site has an RSS feed. All you need to do is add ".rss" to any page and the RSS feed will return all visible sub-pages. Each sub-page shows up as an entry in any given page's RSS feed.

If a page does not have any sub-pages but it has the image gallery module installed, each image in the gallery will show up as an entry in the RSS feed.

Usage

Append ".rss" to the end of ANY url.

Example

http://www.yoursite.com/blog (normal URL)
http://www.yoursite.com/blog.rss (RSS feed URL containing sub-pages)