iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1

接下來介紹一下Templates。Lektor使用Jinja2的格式產生網頁,若有興趣的話可以參考Jinja2官網

前一篇有提到model與template的關係,model與template的檔名相同,可以輕易建立起關聯。

Template暗號

Template中有一些特定的變數要先了解一下:

變數名稱 說明
this 現在取得的Record,像是從資料庫中取得的資料,可以用this抓到,拿來做後續的處理
site 可以獲取其他頁面的資料
alt 定義網頁語言的值,類型為文字
config 處理專案的配置資訊

Template基本用法

先來看一下之前用quickstart產生的範例檔案,開啟template/page.html,可以看到以下程式碼:

{% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %}
{% block body %}
  <h2>{{ this.title }}</h2>
  {{ this.body }}
{% endblock %}

上面的程式碼,除了熟悉的<h2></h2>標籤之外,其他都是jinja2的語法。在page.html中,包含1個extends2個block,將於下面繼續說明。

Extends

在第一行出現的{% extends "layout.html" %},代表這個檔案會參照layout.html的內容。以下是layout.html的內容:

<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}">
<title>{% block title %}Welcome{% endblock %} — LektorTest</title>
<body>
  <header>
    <h1>LektorTest</h1>
    <nav>
        <!-- 省略 -->
    </nav>
  </header>
  <div class="page">
    {% block body %}{% endblock %}
  </div>
  <footer>
    © Copyright 2019 by Chih-Chieh Chang.
  </footer>
</body>

從程式碼中可以看到,<title><div class="page">2個標籤中,都有一個{% block %}{% endblock %}的樣式的程式碼,所以當page.html中使用{% extends "layout.html" %}page.html就可以使用layout.html的版面,並設定這2個block裡面的內容。也就是說,當Lektor產生靜態網頁時,在page的這個頁面中,會使用layout.html設定的畫面,並根據page.html設定的block,使頁面中指定的位置出現我們要的資訊,可以想像是layout.html有title這個凹槽,而page.html設定這個凹槽要放的東西。

Block

在知道page.html使用layout.html的版面後,下面將說明block的用法。

block title

首先看到page.html第2行:

{% block title %}{{ this.title }}{% endblock %}

這行程式碼就會取代layout.html裡面的{% block title %}Welcome{% endblock %}

要了解{{ this.title }}的意義,就要回去看page.ini

[model]
name = Page
label = {{ this.title }}

[fields.title]
label = Title
type = string

[fields.body]
label = Body
type = markdown

在page.ini設定的資訊中,有包含title及body兩個欄位,正好符合page.html中使用的變數名稱,所以新產生的網頁,<title></title>裡面顯示的內容會變為{{ this.title }} - LektorTest,而{{ this.title }}會是什麼,就會依照他抓到的資訊內容去顯示。

block body

page.html剩下的程式碼長這樣:

{% block body %}
  <h2>{{ this.title }}</h2>
  {{ this.body }}
{% endblock %}

跟上面提到的一樣,這裡的部分是設定layout.html裡的{% block body %}{% endblock %}凹槽。除了設定內容以外,還有加上了<h2>標籤,多設定了內容顯示的樣式。

由於page.html是預設的頁面樣式,若content中沒有指定model,就會指定預設_model: page。下面用quickstart中,about的頁面來說明:

About頁面產生邏輯

以下將Lektor顯示about的邏輯簡要說明一遍,當使用Lektor在本機運行lektor serve,連線到127.0.0.1:5000/about,網站會作下列事情:

  1. 首先在content資料夾中找到about/contents.lr檔案,
    tree view on about

    about/contents.lr內容如下:

    title: About this Website
    ---
    body:
    
    This is a website that was made with the Lektor quickstart.
    
    And it does not contain a lot of information.
    
  2. 因為檔案中沒有指定model,使用page.inipage.html產生網頁。

  3. page.html中使用{% extends "layout.html" %},將以layout.html為框架建立網頁。

  4. page.html設定block title及block body。

  5. titleAbout this Website

  6. body

    This is a website that was made with the Lektor quickstart.
    
    And it does not contain a lot of information.
    
  7. 生成網頁原始碼如下:

    <!doctype html>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ '/static/style.css'|url }}">
    <title>About this Website — LektorTest</title>
    <body>
    <header>
        <h1>LektorTest</h1>
        <nav>
            <!-- 省略 -->
        </nav>
    </header>
    <div class="page">
        <h2>About this Website</h2>
           This is a website that was made with the Lektor quickstart.
    
            And it does not contain a lot of information.
    </div>
    <footer>
        © Copyright 2019 by Chih-Chieh Chang.
    </footer>
    </body>
    
  8. 生成畫面如下:
    about page

團隊系列文

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難!新手用JavaScript入門做自己的玩具~
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
Clarence - LINE bot 好好玩 30 天玩轉 LINE API
塔塔默 - 用Python開發的網頁不能放到Github上?Lektor說可以!!
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。


上一篇
Lektor的肉,還有看得見與看不見的戀情
下一篇
時尚外衣任你挑,Lektor主題功能介紹
系列文
用Python開發的網頁不能放到Github上?Lektor說可以!!31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言