BR Notes - Zola

Templates (模板)

以 html 檔案建立網站的架構
index.html 是 web 預設作為首頁的名稱

Variables & Function (變數與函數)


{# expressions (表達式) #}
{{ value }} for expressions

{# 印出所有可用變數 #}
{{ __tera_context }}

{# 使用 config 的 title 變數 #}
{{ config.title }}

{# statements (聲明) #}
{% statements %} 

{# 區塊替換 #}
{% raw %}
  Hello {{ name }}
{% endraw %}

{# 設定變數 #}
{% set my_var = 2 %}

{# get page #}
{% set page = get_page(path="blog/page2.md") %}

{# get section #}
{% set section = get_section(path="blog/_index.md") %}

{# get url #}
{% set url = get_url(path="@/blog/_index.md") %}

if


{% if price < 10 or always_show %}
   Price is {{ price }}.
{% elif price > 1000 and not rich %}
   That's expensive!
{% else %}
    N/A
{% endif %}

loop

{# for 迴圈 #}
{% for page in section.pages %}
    <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
{% endfor %}

String (字串)


{# hello world! #}
{{ "hello " ~ 'world' ~ `!` }}

extends (繼承)

{# 繼承要放在第一行 #}
{% extends "base.html" %}

Home Page (首頁範例)

├── templates
│   ├── base.html
│   └── index.html

base.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyBlog</title>
</head>

<body>
  <section class="section">
    <div class="container">
      {% block content %} {% endblock %}
    </div>
  </section>
</body>

</html>

index.html

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  This is my blog made with Zola.
</h1>
{% endblock content %}

line 1 {% extends "base.html" %}
- 繼承 base.html 的內容
line 3 ~ 7 {% block content %}
- 對應 base.html 的 {% block content %} 區塊替換開頭
line 7 {% endblock content %}
- 對應 base.html 的 {% endblock %} 區塊替換結尾

Content Directory (頁面範例)

├── content
│   └── blog
│       ├── _index.md
│       ├── first.md
│       └── second.md
├── templates
│   ├── blog-page.html
│   └── blog.html

_index.md

+++
title = "List of blog posts"
sort_by = "date"
template = "blog.html"
page_template = "blog-page.html"
+++

代表 blog 這頁面本身，base_url/blog/
sort_by: 排序方式
template: 這個 section 套用的模板
page_template: 這個 setction 的 page 套用的模板

blog.html

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  {{ section.title }}
</h1>
<ul>
  <!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->  
  {% for page in section.pages %}
  <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
  {% endfor %}
</ul>
{% endblock content %}

line 5 {{ section.title }}
- 對應 _index.md 的 title 設定
- 兩個大括弧看來就代表變數名稱 {{ 變數名稱 }}
line 9 {% for page in section.pages %}
- 執行一個 for 迴圈
- section.pages 沒特別去設定，看來會自動計算這個頁面的檔案數量
- section.pages 沒有再用 {{}} 包住
- {% codes %} 看來是宣告一個程式區塊

blog-page.html

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  {{ page.title }}
</h1>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
{{ page.content | safe }}
{% endblock content %}

first.md

+++
title = "My first post"
date = 2019-11-27
+++

This is my first blog post.

second.md

+++
title = "My second post"
date = 2019-11-28
+++

This is my second blog post.

Zola

Templates (模板)

Variables & Function (變數與函數)

if

loop

String (字串)

extends (繼承)

Home Page (首頁範例)

Content Directory (頁面範例)

索引