| {% extends "base.html" %} |
|
|
| {%- block head -%}{%- set page = page | default(value = section) -%} |
| {%- set title = page.title -%} |
| {%- set meta_article_type = true -%} |
| {%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = " ", to = " ") | trim | truncate(length = 200)) -%} |
| {%- set linked_css = ["/syntax-highlighting.css"] -%} |
| {%- set css = ["/template/book.css", "/layout/reading-material.css", "/component/code-snippet.css"] -%} |
| {%- set js = ["/js/book.js"] -%} |
| {%- endblock head -%} |
|
|
| {%- block content -%}{%- set page = page | default(value = section) -%} |
|
|
| {# Search this page-or-section's ancestor tree for a section that identifies itself as a book, and save it to a `book` variable #} |
| {% for ancestor_path in page.ancestors | concat(with = page.relative_path) %} |
| {# Get the ancestor section from this ancestor path string #} |
| {% if ancestor_path is ending_with("/_index.md") %} |
| {% set potential_book = get_section(path = ancestor_path) %} |
| {% endif %} |
|
|
| {# Check if the ancestor section is the root of a book, and if so, set it to a variable accessible outside the loop #} |
| {% if potential_book.extra.book %} |
| {% set_global book = get_section(path = potential_book.path ~ "_index.md" | trim_start_matches(pat="/")) %} |
| {% endif %} |
| {% endfor %} |
|
|
| {# Map this book's chapter path strings to an array of sections #} |
| {% set chapters = [] %} |
| {% for chapter_path in book.subsections %} |
| {% set_global chapters = chapters | concat(with = get_section(path = chapter_path)) %} |
| {% endfor %} |
| {% set chapters = chapters | sort(attribute = "extra.order") %} |
|
|
| {# A flat list of all pages in the ToC, initialized to just the book root section but updated when we generate the ToC #} |
| {% set flat_pages = [book] %} |
| {% set flat_index_of_this = 0 %} |
|
|
| <section class="three-column-layout"> |
| <aside class="chapters" data-chapters> |
| <div class="wrapper-outer"> |
| <div class="wrapper-inner"> |
| <button class="close-chapter-selection" data-close-chapter-selection> |
| <svg viewBox="0 0 24 24"> |
| <polygon points="20.7,4.7 19.3,3.3 12,10.6 4.7,3.3 3.3,4.7 10.6,12 3.3,19.3 4.7,20.7 12,13.4 19.3,20.7 20.7,19.3 13.4,12" /> |
| </svg> |
| </button> |
| <ul> |
| <li class="title{% if current_path == book.path %} active{% endif %}"><a href="{{ book.path | safe }}" title="{{ book.title | safe }}">{{ book.title }}</a></li> |
| </ul> |
| {% for chapter in chapters %} |
| <ul> |
| <li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path | safe }}" title="{{ chapter.title | safe }}">» {{ chapter.title }}</a></li> |
|
|
| {% set_global flat_pages = flat_pages | concat(with = chapter) %} |
| {% if chapter == page %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %} |
|
|
| {% if chapter.pages %} |
|
|
| {% for chapter_page in chapter.pages | sort(attribute = "extra.order") %} |
|
|
| {% set_global flat_pages = flat_pages | concat(with = chapter_page) %} |
| {% if chapter_page == page %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %} |
|
|
| <li {% if current_path == chapter_page.path %}class="active"{% endif %}><a href="{{ chapter_page.path | safe }}" title="{{ page.title | safe }}">» {{ chapter_page.title }}</a></li> |
|
|
| {% endfor %} |
|
|
| {% endif %} |
| </ul> |
| {% endfor %} |
| </div> |
| </div> |
| </aside> |
|
|
| <section class="reading-material"> |
| <div class="block"> |
| <div class="article-title"> |
| <h1> |
| <button title="Open chapter selection" class="open-chapter-selection" data-open-chapter-selection> |
| <svg viewBox="0 0 24 24"> |
| <rect x="2" y="4" width="20" height="2"/> |
| <rect x="2" y="18" width="20" height="2"/> |
| <rect x="2" y="11" width="20" height="2"/> |
| </svg> |
| </button> |
| <span>{{ page.title }}</span> |
| </h1> |
| </div> |
| <article> |
| {{ page.content | safe }} |
| </article> |
|
|
| <hr /> |
|
|
| <div class="prev-next"> |
| {% if flat_index_of_this >= 1 %} |
| {% set prev = flat_pages | nth(n = flat_index_of_this - 1) %} |
| {% endif %} |
| {% if prev %} |
| <a href="{{ prev.path | safe }}" title="{{ prev.title | safe }}"> |
| <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" /> |
| <polygon points="24.71,10.71 23.29,9.29 12.59,20 23.29,30.71 24.71,29.29 15.41,20" /> |
| </svg> |
| {{ prev.title }} |
| </a> |
| {% else %} |
| <a></a> |
| {% endif %} |
|
|
| {% if flat_index_of_this < flat_pages | length - 1 %} |
| {% set next = flat_pages | nth(n = flat_index_of_this + 1) %} |
| {% endif %} |
| {% if next %} |
| <a href="{{ next.path | safe }}" title="{{ next.title | safe }}"> |
| {{ next.title }} |
| <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" /> |
| <polygon points="16.71,9.29 15.29,10.71 24.59,20 15.29,29.29 16.71,30.71 27.41,20" /> |
| </svg> |
| </a> |
| {% endif %} |
| </div> |
| </div> |
| </section> |
|
|
| <aside class="contents"> |
| <ul> |
| <li class="title"> |
| <a href="#" title="{% if page.toc | length > 0 %}Contents (top ↑){% else %}Back to top ↑{% endif %}"> |
| {% if page.toc | length > 0 %}Contents<span> (top ↑)</span>{% else %}Back to top ↑{% endif %} |
| </a> |
| </li> |
| </ul> |
| <ul> |
| {% for depth_1 in page.toc %} |
| <li><a href="#{{ depth_1.id }}" title="{{ depth_1.title | safe }}">{{ depth_1.title }}</a></li> |
| {% for depth_2 in depth_1.children %} |
| <ul> |
| <li><a href="#{{ depth_2.id }}" title="{{ depth_2.title | safe }}">{{ depth_2.title }}</a></li> |
| {% for depth_3 in depth_2.children %} |
| <ul> |
| <li><a href="#{{ depth_3.id }}" title="{{ depth_3.title | safe }}">{{ depth_3.title }}</a></li> |
| {% for depth_4 in depth_3.children %} |
| <ul> |
| <li><a href="#{{ depth_4.id }}" title="{{ depth_4.title | safe }}">{{ depth_4.title }}</a></li> |
| {% for depth_5 in depth_4.children %} |
| <ul> |
| <li><a href="#{{ depth_5.id }}" title="{{ depth_5.title | safe }}">{{ depth_5.title }}</a></li> |
| {% for depth_6 in depth_5.children %} |
| <ul> |
| <li><a href="#{{ depth_6.id }}" title="{{ depth_6.title | safe }}">{{ depth_6.title }}</a></li> |
| </ul> |
| {% endfor %} |
| </ul> |
| {% endfor %} |
| </ul> |
| {% endfor %} |
| </ul> |
| {% endfor %} |
| </ul> |
| {% endfor %} |
| {% endfor %} |
| </ul> |
| </aside> |
| </section> |
| {%- endblock content -%} |
|
|
