62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
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
|
|
|
|
|
|
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>
|
|
|
|
```
|