initial

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

@@ -0,0 +1,68 @@
+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>
+```