settings

Jekyll Data Files Configuration Guide

Jekyll Data Files Configuration Guide

Overview

The _data directory in Jekyll allows you to store structured data that can be easily accessed in your templates. This guide provides a comprehensive overview of each data file in the Snowlake Jekyll Theme.

1. clients_carousel.yml

Purpose

Manages the configuration for the clients/brands carousel section.

Structure

brands:
  images:
    - img: "/assets/images/art/z1.svg"
      url: "#"
      alt: "brand z1"
    # More brand entries...

Key Properties

  • img: Path to brand logo/image
  • url: Link for the brand (can be external or internal)
  • alt: Alternative text for accessibility

Usage Example

{% for brand in site.data.clients_carousel.brands.images %}
  <a href="{{ brand.url }}">
    <img src="{{ brand.img }}" alt="{{ brand.alt }}">
  </a>
{% endfor %}

2. general_settings.yml

Purpose

Centralized configuration for site-wide settings, including metadata, logos, contact information, and social links.

Key Sections

Site Identity

title: "Snowlake - Creative Business and Startup Jekyll Theme"
email: "[email protected]"
description: "Theme description..."
favicon: "/assets/images/favicon.webp"

SEO Metadata

meta_og_image: "/assets/images/meta-image.webp"
meta_twitter_image: "/assets/images/meta-image.webp"

Logos

black_logo_1x: "/assets/images/logo.webp"
black_logo_2x: "/assets/images/[email protected]"
light_logo_1x: "/assets/images/logo-light.webp"
light_logo_2x: "/assets/images/[email protected]"

Contact Information

address_01: 'Moonshine St. 14/05 Light City, London'
phone_number: "+00 (123) 456 78 90"

social_accounts:
  title: "Follow Us"
  links:
    - url: "#"
      icon: "jam jam-twitter"
    # More social links...

external_links:
  title: "Learn More"
  links:
    - url: "#"
      text: "About Us"
    # More external links...

Usage Example

<footer>
  <div class="contact-info">
    {{ site.data.general_settings.address_01 }}
    {{ site.data.general_settings.phone_number }}
  </div>
  <div class="social-links">
    {% for account in site.data.general_settings.social_accounts.links %}
      <a href="{{ account.url }}"><i class="{{ account.icon }}"></i></a>
    {% endfor %}
  </div>
</footer>

3. navigation.yml

Purpose

Defines the site-wide navigation menu structure with support for mega menus and dropdown levels.

Structure

main_menu:
  - text: "Home"
    url: "/"
    menu_type: "megamenu"
    submenu:
      - text: "Digital Startup"
        url: "/"
      # More submenu items...
  • megamenu: Multi-column dropdown menu
  • dropdown: Standard dropdown menu
  • level_two: Nested dropdown menu

Usage Example

<nav>
  {% for item in site.data.navigation.main_menu %}
    <div class="nav-item">
      <a href="{{ item.url }}">{{ item.text }}</a>
      {% if item.submenu %}
        <div class="submenu">
          {% for subitem in item.submenu %}
            <a href="{{ subitem.url }}">{{ subitem.text }}</a>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  {% endfor %}
</nav>

4. one_page_nav.yml

Purpose

Configures navigation links for single-page websites with section-based scrolling.

Structure

one_page_nav_settings:
  links:
    - text: "Home"
      url: "#home"
      section_id: "home"
    # More section links...

Usage Example

<nav class="one-page-nav">
  {% for link in site.data.one_page_nav.one_page_nav_settings.links %}
    <a href="{{ link.url }}" data-section="{{ link.section_id }}">
      {{ link.text }}
    </a>
  {% endfor %}
</nav>

5. reviews.json

Purpose

Stores customer testimonials with ratings and metadata.

Structure

[
  {
    "name": "Eric Mill",
    "avatar": "/assets/images/art/u1.webp",
    "text": "Testimonial text...",
    "date": "January 14, 2019",
    "ratings": "three"
  }
  // More reviews...
]

Usage Example

<section class="testimonials">
  {% for review in site.data.reviews %}
    <div class="review">
      <img src="{{ review.avatar }}" alt="{{ review.name }}">
      <p>{{ review.text }}</p>
      <div class="review-meta">
        <span>{{ review.name }}</span>
        <span>{{ review.date }}</span>
      </div>
    </div>
  {% endfor %}
</section>

6. team_carousel.yml

Purpose

Manages team member information for team/staff sections.

Structure

members:
  - name: "Gibson Robert"
    designation: "Financial Analyst"
    description: "Team member description..."
    image: "/assets/images/art/te1.webp"
    social_icons:
      - icon: "jam jam-facebook"
        url: "https://facebook.com"
      # More social links...

Usage Example

<section class="team-carousel">
  {% for member in site.data.team_carousel.members %}
    <div class="team-member">
      <img src="{{ member.image }}" alt="{{ member.name }}">
      <h3>{{ member.name }}</h3>
      <p>{{ member.designation }}</p>
      <div class="social-links">
        {% for social in member.social_icons %}
          <a href="{{ social.url }}"><i class="{{ social.icon }}"></i></a>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</section>

Best Practices

  1. Keep data files well-organized and descriptive
  2. Use meaningful keys and follow consistent naming conventions
  3. Validate YAML/JSON syntax
  4. Separate content from presentation
  5. Use data files for dynamic, frequently changing content

Performance Considerations

  • Minimize the number of data files
  • Keep file sizes small
  • Use caching mechanisms
  • Optimize liquid template rendering

Version Compatibility

Tested with:

  • Jekyll 4.x
  • Liquid 4.x
  • YAML 1.2