Freestyle Template

The freestyle template allows creating an own layout of both list and detail view not tight to the RapidWeaver Blog Layout.

For this, remove the RapidWeaver Blog Layout Template from Poster 2.

Freestyle Template

Add a freestyle template of type detail. For having a different layout for list mode, add another freestyle template of type list. If only the detail template is available, this will also be used for list mode.

Freestyle Template

Freestyle Template

Afterwards, add our own layout stacks (like from Foundry, Foundation, BWD, standard Stacks plugin, etc.) inside the freestyle template and add content placeholders with help of mustache tags. These placeholders will then pull in the content of the different items.

Freestyle Template

Mustache Tags

Reference: https://github.com/bobthecow/mustache.php/wiki

Variables

The most basic tag type is the variable. A {{name}} tag in a basic template will try to find the name key in the current context. If there is no name key, nothing will be rendered.

All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.

Dot Notation

Dot notation is a shortcut syntax for quickly accessing methods or properties of variables.

Given the following context:

- header
    - image
        - src

You can use dot notation to access the attributes of a variable:

{{header.image.src}}

List of Mustache Tags

  • id
  • title
  • slug
  • link
  • permalink
  • external_link
  • subtitle
  • description
  • share_links
  • draft
  • display_list
  • sort_index
  • lightbox
  • disqus
  • header
    • content
    • image
      • src
      • alt
  • body
    • content
  • summary
    • content
  • main
    • content
  • tag
    • raw
    • array
    • link
  • category
    • raw
    • array
    • link
  • author
    • raw
    • array
    • link
  • custom
    • metadata
  • preview_image
    • src
  • date
    • raw
    • format
    • array
  • itunes
    • file
    • duration
    • length
    • type
  • readmore
    • display
    • link
    • text
    • title
  • back
    • display
    • link
    • text
    • title

Example Templates

Detail

<div class="poster-top blog-archive-entries-wrapper">
{{#post}}
<div id="{{id}}" class="blog-entry poster-item poster-detail">
    <article>
        {{#header.content}}
            <section>
                <div class="poster-header-content">{{{header.content}}}</div>
            </section>
        {{/header.content}}

        <section>
            <div class="poster-body">
                <h2 class="blog-entry-title poster-title">
                <a href="{{link}}" class="blog-permalink">{{title}}</a>
                </h2>

                <div class="poster-metadata">
                    <div class="blog-entry-date"><time datetime="{{date.raw}}"><span class="poster-date">{{date.format}}</span></time> 
                    {{{category.link}}} {{{author.link}}} {{{custom.metadata}}}
                    </div>
                </div>

                <div class="blog-entry-body poster-body-content">
                    {{{body.content}}}

                    {{#back}}
                        {{#display}}
                        <span class="blog-read-more poster-back"><a href="{{link}}">{{text}}</a></span>
                        {{/display}}
                    {{/back}}

                    {{{tag.link}}}
                </div>
            </div>
        <section>

    </article>
</div>
{{/post}}
</div>

{{#nav_post}}
<div class="poster-navigation">
{{#prev}}
<span class="poster-navigation-post-prev"><a href="{{link}}" title="{{{title}}}">{{{text}}}</a> </span>
{{/prev}}
<span class="poster-navigation-post-text">{{{text}}} </span><span class="poster-navigation-post-counter">{{counter}} / {{last}}</span>
{{#next}}
<span class="poster-navigation-post-next"> <a href="{{link}}" title="{{{title}}}">{{{text}}}</a></span>
{{/next}}
</div>
{{/nav_post}}

List

<div class="poster-top poster-list">
{{#post}}
<div id="{{id}}" class="blog-entry poster-item poster-list-item">
    <article>
        {{#header.content}}
            <section>
                <div class="poster-header-content"><a href="{{link}}">{{{header.content}}}</a></div>
            </section>
        {{/header.content}}

        <section>
            <div class="poster-body">
                <h1 class="blog-entry-title poster-title">
                <a href="{{link}}" class="blog-permalink">{{title}}</a>
                </h1>

                <div class="poster-metadata">
                    <div class="blog-entry-date"><time datetime="{{date.raw}}"><span class="poster-date">{{date.format}}</span></time> 
                    {{{category.link}}} {{{author.link}}} {{{custom.metadata}}}
                    </div>
                </div>

                <div class="blog-entry-body poster-body-content">
                    {{{body.content}}}

                    {{#readmore}}
                        {{#display}}
                        <span class="blog-read-more poster-readmore"><a href="{{link}}">{{text}}</a></span>
                        {{/display}}
                    {{/readmore}}

                    {{{tag.link}}}
                </div>
            </div>
        <section>

    </article>
</div>
{{/post}}
</div>

{{#nav_page}}
<div class="poster-navigation">
{{#prev}}
<span class="poster-navigation-page-prev"><a href="{{link}}" title="{{{title}}}">{{{text}}}</a> </span>
{{/prev}}
<span class="poster-navigation-page-text">{{{text}}} </span><span class="poster-navigation-page-counter">{{counter}} / {{last}}</span>
{{#next}}
<span class="poster-navigation-page-next"> <a href="{{link}}" title="{{{title}}}">{{{text}}}</a></span>
{{/next}}
</div>
{{/nav_page}}
Back
< Previous Post