Statie 2: How add Contact Page With Data

This post was updated on April 2018
Updated with Statie 4.0, parameters section in statie.yml config for loading global data and Neon to Yaml migration.

In first post about Statie you generated simple index with layout. Today we look on first semi-dynamic feature: data structures.

Contact Page with Socials Accounts Data Separated

First, create a file in the /source directory called contact.latte.

The file name is relevant to the url - this file will be accessible at /contact.

<!-- source/contact.latte -->
---
layout: default
---

{block content}
    <h1>First Hour is on me - Call me now!</h1>

    <ul>
        <li>Phone: <a href="tel:123456789">123 456 789</a>a></li>
        <li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
        <li>Twitter: <a href="https://twitter.com/wise-programmer">@wiseProgrammer</a></li>
        <li>Facebook: <a href="https://facebook.com/wise-programmer">Wise Programmer</a></li>
        <li>LinkedIn: <a href="https://linkedin.com/wise-programmer">Wise Programmer</a></li>
        <li>Github: <a href="https://github.com/wise-programmer">@WiseProgrammer</a></li>
    </ul>
{/block}


If you use smart Gulp script, you can already check the page at localhost:8000/contact.

How to decouple Information to Data Structures

We are programmers and we don't like data coupled to the code. You wouldn't put your repository class to your Homepage.latte template, would you?

What if...

There are 2 basic ways to data structures. It depends, whether you need it locally or globally.

In both cases, we modify the template the same way:

<!-- source/contact.latte -->
---
layout: default
---

{block content}
    <h1>First Hour is on me - Call me now!</h1>

    <ul>
        {foreach $contactMethods as $contactMethod}
            <li>
                {$contactMethod['type']}:
                <a href="{$contactMethod['link']}">{$contactMethod['name']}</a>
            </li>
        {/foreach}

        <!-- or shorter -->
        <!-- <li n:foreach="$contactMethods as $contactMethod"> -->
    </ul>
{/block}

1. Local Values in between ---

How Does it Work?

Everything located between two "triple-hyphens" (---) will be accessible only in the one template as variables.

In code words:

---
key: "value"
---

{$key} <!-- shows "value" -->

How to Use it?

All we need for our contact page is simple array. Putting data above to an array in PHP would look like this:

$contactMethods = [
    [
        'type' => 'Phone',
        'link' => 'tel:123456789',
        'name' => '123 456 789'
    ], [
        'type' => 'Email',
        'link' => 'mailto:[email protected]',
        'name' => '[email protected]'
    ], [
        'type' => 'Twitter',
        'link' => 'https://twitter.com/wise-programmer',
        'name' => '@wiseProgrammer'
    ], [
        'type' => 'Facebook',
        'link' => 'https://facebook.com/wise-programmer',
        'name' => 'Wise Programmer'
    ], [
        'type' => 'LinkedIn',
        'link' => 'https://linkedin.com/wise-programmer',
        'name' => 'Wise Programmer'
    ], [
        'type' => 'Github',
        'link' => 'https://github.com/wise-programmer',
        'name' => '@WiseProgrammer'
    ]
];

Now we put this data to Yaml format and place them to our contact.latte.

<!-- source/contact.latte -->
---
layout: default
contactMethods:
    -
        type: Phone
        link: tel:123456789
        name: 123 456 789
    -
        type: Email
        link: mailto:[email protected]
        name: [email protected]
    -
        type: Twitter
        link: https://twitter.com/wise-programmer
        name: @wiseProgrammer
    -
        type: Facebook
        link: https://facebook.com/wise-programmer
        name: Wise Programmer
    -
        type: LinkedIn
        link: https://linkedin.com/wise-programmer
        name: Wise Programmer
    -
        type: Github
        link: https://github.com/wise-programmer
        name: @WiseProgrammer
---

{block content}
    <h1>First Hour is on me - Call me now!</h1>

    <ul>
        {foreach $contactMethods as $contactMethod}
            <li>
                {$contactMethod['type']}:
                <a href="{$contactMethod['link']}">{$contactMethod['name']}</a>
            </li>
        {/foreach}
    </ul>
{/block}

Save file and look on the contact page.

2. Global or Bigger Amount of Data

I use this option in 2 cases:

I would use this option in this case.

How does it Work?

Statie uses statie.yml in the root directory and its parameters section.

As convention, I put global data to /source/_data directory. But it's up to you, where you put it.

How to Use it?

We simple move whole contactMethods to this file:

# /source/_data/contacts.yml
parameters:
    contactMethods:
        ...

And import it in statie.yml:

# statie.yml
imports:
    - { resource: 'source/_data/contacts.yml' }

And that's it!

Save file, look on the contact page and it still works!

Now You Know

Happy coding!



Do you want more on this topic? You might like these related posts: Statie: How to run it Locally, Statie 3: How to Add Reusable Parts of Code, Statie 4: How to Create The Simplest Blog

What do you think?


GitHub RSS @votrubaT Like what I write about? Hire me & we can work together