200 lines
4.0 KiB
ReStructuredText
200 lines
4.0 KiB
ReStructuredText
|
:title: Examples
|
||
|
|
:date: 2022-09-30
|
||
|
|
|
||
|
|
========
|
||
|
|
Examples
|
||
|
|
========
|
||
|
|
|
||
|
|
Blog site example
|
||
|
|
=================
|
||
|
|
|
||
|
|
For the blog, we will need to create three template files and at least two
|
||
|
|
.rst files.
|
||
|
|
|
||
|
|
Edit your **settings.toml**:
|
||
|
|
|
||
|
|
.. code-block:: toml
|
||
|
|
|
||
|
|
[defaults]
|
||
|
|
template = 'post.jinja2'
|
||
|
|
type = 'post'
|
||
|
|
|
||
|
|
[site]
|
||
|
|
title = 'My Blog'
|
||
|
|
|
||
|
|
Generate Pygments theme:
|
||
|
|
|
||
|
|
.. code-block:: shell
|
||
|
|
|
||
|
|
make css default
|
||
|
|
|
||
|
|
Create basic template **layouts/base.jinja2**:
|
||
|
|
|
||
|
|
.. code-block:: jinja
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link rel="stylesheet" href="/css/pygments/{{ pygments_theme }}.css">
|
||
|
|
<link rel="stylesheet" href="/css/style.css">
|
||
|
|
<title>{{ page.title }} | {{ site.title }}</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
{% block content %}{% endblock %}
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
Home page template **layouts/index.jinja2**:
|
||
|
|
|
||
|
|
.. code-block:: jinja
|
||
|
|
|
||
|
|
{% extends "base.jinja2" %}
|
||
|
|
{% block content %}
|
||
|
|
<h1>{{ site.title }}</h1>
|
||
|
|
<ul id="posts">
|
||
|
|
{% for post in aggr.posts %}
|
||
|
|
<li>
|
||
|
|
<a href="{{ post.path }}">{{ post.title }}</a>
|
||
|
|
<span class="meta"> — {{ post.date }}</span>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
{{ html | safe }}
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
Posts tempalte **layouts/post.jinja2**:
|
||
|
|
|
||
|
|
.. code-block:: jinja
|
||
|
|
|
||
|
|
{% extends "base.jinja2" %}
|
||
|
|
{% block content %}
|
||
|
|
<a href="/">Back to the home page</a>
|
||
|
|
<article>
|
||
|
|
{{ html | safe }}
|
||
|
|
</article>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
Create dummy home page **content/index.rst** with fields:
|
||
|
|
|
||
|
|
.. code-block:: rst
|
||
|
|
|
||
|
|
:title: Homepage
|
||
|
|
:date: 1970-01-01
|
||
|
|
:type: page
|
||
|
|
:template: index.jinja2
|
||
|
|
|
||
|
|
Create first blog post **content/hello_world.rst**:
|
||
|
|
|
||
|
|
.. code-block:: rst
|
||
|
|
|
||
|
|
:title: Hello, World!
|
||
|
|
:date: 1970-01-01
|
||
|
|
|
||
|
|
=============
|
||
|
|
Hello, World!
|
||
|
|
=============
|
||
|
|
|
||
|
|
Hello, there! This is my first site built with *re*\ **Structured**\ *Web*!
|
||
|
|
|
||
|
|
Now build site:
|
||
|
|
|
||
|
|
.. code-block:: shell
|
||
|
|
|
||
|
|
make
|
||
|
|
make serve
|
||
|
|
|
||
|
|
Page navigation
|
||
|
|
===============
|
||
|
|
|
||
|
|
This code is used on this site to organize pagination.
|
||
|
|
|
||
|
|
**settings.toml**:
|
||
|
|
|
||
|
|
.. code-block:: toml
|
||
|
|
|
||
|
|
[site]
|
||
|
|
[[site.sidebar]]
|
||
|
|
title = 'First'
|
||
|
|
url = '/first.html'
|
||
|
|
|
||
|
|
[[site.sidebar]]
|
||
|
|
title = 'Second'
|
||
|
|
url = '/second.html'
|
||
|
|
|
||
|
|
[[site.sidebar]]
|
||
|
|
title = 'Third'
|
||
|
|
url = '/third.html'
|
||
|
|
|
||
|
|
**layouts/template.jinja2**:
|
||
|
|
|
||
|
|
.. code-block:: jinja
|
||
|
|
|
||
|
|
{# Display Sidebar #}
|
||
|
|
<strong>Contents</strong>
|
||
|
|
<ul id="contents">
|
||
|
|
{% for item in site.sidebar %}
|
||
|
|
<li>
|
||
|
|
<a href="{{ item.url }}">{{ item.title }}</a>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
{# Page content #}
|
||
|
|
<article>
|
||
|
|
{{ html | safe }}
|
||
|
|
</article>
|
||
|
|
|
||
|
|
{# Pagination #}
|
||
|
|
{% for item in site.sidebar %}
|
||
|
|
{% if item.title == page.title %}
|
||
|
|
{% set current = site.sidebar.index(item) %}
|
||
|
|
{% set last = site.sidebar.index(site.sidebar[-1]) %}
|
||
|
|
{% if current == 0 %}
|
||
|
|
{# If curret page is a first page #}
|
||
|
|
<a href="{{ site.sidebar[current+1].url }}">
|
||
|
|
{{ site.sidebar[current+1].title }} --></a>
|
||
|
|
{% elif current == last %}
|
||
|
|
{# If curret page is a last page #}
|
||
|
|
<a href="{{ site.sidebar[current-1].url }}">
|
||
|
|
<-- {{ site.sidebar[current-1].title }}</a></div>
|
||
|
|
{% else %}
|
||
|
|
<a href="{{ site.sidebar[current-1].url }}">
|
||
|
|
<-- {{ site.sidebar[current-1].title }}</a>
|
||
|
|
<a href="{{ site.sidebar[current+1].url }}">
|
||
|
|
{{ site.sidebar[current+1].title }} --></a>
|
||
|
|
{% endif %}
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
|
||
|
|
**content/index.rst**:
|
||
|
|
|
||
|
|
.. code-block:: rst
|
||
|
|
|
||
|
|
:title: Homepage
|
||
|
|
:date: 1907-01-01
|
||
|
|
|
||
|
|
=======
|
||
|
|
Welcome
|
||
|
|
=======
|
||
|
|
|
||
|
|
Hello, there!
|
||
|
|
|
||
|
|
Page example e.g. **content/first.rst**:
|
||
|
|
|
||
|
|
.. code-block:: rst
|
||
|
|
|
||
|
|
:title: First
|
||
|
|
:date: 1907-01-01
|
||
|
|
|
||
|
|
=====
|
||
|
|
First
|
||
|
|
=====
|
||
|
|
|
||
|
|
First page.
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
Page ``:title:`` and sidebar's ``title`` in **settings.toml** item must be
|
||
|
|
the same. Otherwise pagination not be displayed.
|