initial

joplin notion extension/Web Development/Extras/jekyll/Layouts.md

@@ -0,0 +1,62 @@
+Layouts
+A way to creating template of page and also supporting markdown
+
+- In root directory (`site` here) create `_layouts` and create `default.html`
+In `_layouts/default.html`
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>{{ page.title }}</title>
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>
+```
+- html
+```html
+---
+layout: default
+title: Home
+---
+<h1>{{ "Hello World!" | downcase }}</h1>
+```
+- create a about.md file in root directory of site and add following
+```md
+---
+layout: default
+title: About
+---
+# About page
+
+This page tells you a little bit about me.
+```
+Now opening `http://localhost:4000/about.html` will open this about.md with markdown content rendered
+&nbsp;
+
+Includes
+- The `include` tag allows you to include content from another file stored in an `_includes` folder. 
+at  `_includes/navigation.html`. here `page.url` is used to detect url so that current page link will be colored as red
+```html
+<nav>
+  <a href="/" {% if page.url=='/' %} style="color: red;"{% endif %} >Home</a>
+  <a href="/about.html" {% if page.url=='/about.html' %} style="color: red;"{% endif %} >About</a>
+</nav>
+```
+Now using this in `_layouts/default.html`
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>{{ page.title }}</title>
+  </head>
+  <body>
+    {% include navigation.html %}
+    {{ content }}
+  </body>
+</html>
+
+```