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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

• html

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

• create a about.md file in root directory of site and add following

---
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  

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

<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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>