68 lines
No EOL
1.7 KiB
Markdown
68 lines
No EOL
1.7 KiB
Markdown
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>
|
|
```
|
|
|
|
|
|
**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>
|
|
``` |