2021年6月8日 星期二

模板和占位符搭起內容管理系統和設計師之間的橋樑


上圖說明如何使用模板和占位符搭起內容管理系統和設計師之間的橋樑，以下分別說明模板和占位符的關係：
  • 模板
模板是一個文本文件。它可以生成任何基於文本的格式（HTML、XML、CSV 等）。模板包含變量和標籤。變量是指模板轉換成HTML時，能由Python程式中的變數值替換，而標籤則是呈現控制模板的邏輯。

  • 佔位符

佔位符是一種在 HTML 模板中定義部分的簡單方法，當頁面呈現時，這些部分將填充來自數據庫的內容。在fullwidth模板中，標籤為placeholder就是佔位符。

1.fullwidth模板 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% extends "base.html" %}
{% load cms_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}
     {% placeholder "feature" %}
     {% placeholder "content" %}
     {% placeholder "splashbox" %}
{% endblock content %}

2.base.html模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{% load cms_tags menu_tags sekizai_tags %}
<!doctype html>
<html>
    <head>
        <title>{% block title %}This is my new project home page{% endblock title %}</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <style type="text/css">
            .nav {
                padding-left: 0;
            }
            .nav li {
                display: inline;
                list-style-type: none;
                padding-right: 20px;
            }
            .container {
                width: 940px;
                margin: 0 auto
            }
            .content {
                float: left;
                width: 80%;
            }
            .sidebar {
                float: left;
                width: 20%;
            }
        </style>
        {% render_block "css" %}
    </head>
    <body>
        {% cms_toolbar %}
        <div class="container">
            <ul class="nav">
                {% show_menu 0 100 100 100 %}
            </ul>
            {% block content %}{% endblock content %}
        </div>
        {% render_block "js" %}
    </body>
</html>

3.siderbar_left模版
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{% extends "base.html" %}
{% load cms_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}
    <div class="sidebar">
        {% placeholder "sidebar" %}
    </div>
    <div class="content">
        {% placeholder "content" %}
    </div>
{% endblock content %}

4.siderbar_right模版
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{% extends "base.html" %}
{% load cms_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}
    <div class="content">
        {% placeholder "content" %}
    </div>
    <div class="sidebar">
        {% placeholder "sidebar" %}
    </div>
{% endblock content %}



張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)