joplin-notes/joplin notion extension/Web Development/Extras/jekyll/Data files.md

Data files

• It is important to separate the content from layouts so store them in _data folder. Data files supported are YAML, JSON, and CSV. YAML ones are most common for this
• To create a array of objects where each objects have property ie name and link at _data/navigation.yml

- name: Home
  link: /
- name: About
  link: /about.html

• this data will be available at site.data.navigation. In _includes/navigation.html

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %} style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

 

Assets

• Other files like css,js and images can be included in assets folder

  .
  ├── assets
  │   ├── css
  │   ├── images
  │   └── js
  ...
  

• css is necessary too as inline styles are not a good idea always so in assets/css/styles.scss

---
---
@import "main";

• then create _sass at root directory as @import main will tell to look for file main.scss at _sass so at _sass/main.scss

.current {
  color: green;
}

in _layouts/default.html add this styles.css under <head>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

• finally add the class current too in _includes/navigation.html

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}"{% if page.url == item.link %} class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>