How to Use Specific Custom Value in Layouts

You might have noticed, on the homepage of this blog, we have a big BloggerCMS element:

That one comes through Settings page eg Settings > Custom Values tab. For it's value this is what I specified:

<div class="well text-center clearfix"><h1><i class="fa fa-edit"></i> BloggerCMS</h1><p>Create your blog in less than five minutes !</p> See <a href="https://bloggercms.github.io/post/introducing-bloggercms.html">Introductory Post</a> or <a href="https://bloggercms.github.io/page/get-started.html">Getting Started Guide</a></div><br>

How to Use That?

If you notice in default layout; partials > sidebar.mustache file, we are showing up all custom values in sidebar through this snippet of code:

{{#customValues}}
        <div class="panel panel-primary">
            <div class="panel-heading"><strong>{{title}}</strong></div>
            {{{value}}}
        </div>
{{/customValues}}

Above piece of code will iterate over all custom values and show them in sidebar with their Title on top and Value below them. Let's assume we have added three custom values and as such data/customvalues.json contains those three custom values like:

[
    {
        "title": "Title 1",
        "value": "Value 1",
        "id": 1428735262
    },
    {
        "title": "Title 2",
        "value": "Value 2",
        "id": 2428735262
    },
    {
        "title": "Title 3",
        "value": "Value 3",
        "id": 3428735262
    }   
]

Let's further assume, we want to show only second custom value (Title 2) somewhere in our layout. To do so we would use this syntax:

{{#customValues.1}}
{{title}}<br>
{{value}}
{{/customValues.1}}

Here we use 1 for the second custom value because array indexing starts at 0; so first custom value will be at 0, second one at 1, third one at 2 and so on. When you place above mustache code somewhere in your template, it would output:

Title 2 
Value 2

In my case, I have only one custom value defined like:

[
    {
        "title": "BloggerCMS Intro Header On Homepage",
        "value": " <div class="\"well" clearfix="" text-center=""><br><h1><i class="\"fa" fa-edit=""> BloggerCMS</i></h1><p>Create your blog in less than five minutes !</p>See <a href="\"https:\/\/bloggercms.github.io\/post\/introducing-bloggercms.html\"">Introductory Post</a> or <a href="\"https:\/\/bloggercms.github.io\/page\/get-started.html\"">Getting Started Guide</a>",
        "id": 1428735262
    }
]

Therefore, in template's index.mustache file (since I only wanted to appear this custom value on homepage), I added this:

{{#customValues.0}}
    {{{value}}}
{{/customValues.0}}

Here I am using 0 because, I have only one custom value and as said before indexing starts from 0 and secondly I am only showing up value not title in my particular case.

Also notice that I am using three curly braces {{{value}}} instead of {{value}} because otherwise instead of that big BloggerCMS black box, mustache would have displayed it's HTML code on the homepage instead of generated html.