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`
```yml
- name: Home
  link: /
- name: About
  link: /about.html
```
- this data will be available at `site.data.navigation`. In ` _includes/navigation.html`
```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>
```
&nbsp;

**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`
```css
---
---
@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`
```scss
.current {
  color: green;
}
```
in `_layouts/default.html` add this styles.css under `<head>`
```html
<!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`
```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>
```