Anaconda+django寫出第一個web app（五）
今天開始學習網頁風格和設計，就像python有Web框架一樣，也有一些CSS框架。對於CSS框架，我們可以使用默認的樣式，也可以在原基礎上編輯修改。本教程使用的是materialize這個CSS框架[1]，首頁界面如下：
點解GET STARTED，我們可以把它下載到本地使用，也可以直接復制相應的鏈接使用。
為了套用如下這個Cards界面，我們直接將代碼復制到home.html：
修改後的home.html內容如下：
{% load static %} <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="{% static ‘tinymce/css/prism.css‘ %}" rel="stylesheet"></head> <body> <div class="row"> {% for t in tutorials %} <div class="col s12 m6"> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">{{ t.tutorial_title}}</span> <p>{{ t.tutorial_published }}</p> <p>{{ t.tutorial_content|safe }}</p> </div> </div> </div> {% endfor %} </div> <script src="{% static ‘tinymce/js/prism.js‘ %}"></script> </body>
啟動服務器，刷新界面如下：
我們希望日期顯示的字體小一點，可以通過如下方式修改：
<p style="font-size:70%">{{ t.tutorial_published }}</p>
我們希望鼠標落在相應card時，該Card有個浮起效果，可以在如下這行代碼後添加hoverable：
<div class="card blue-grey darken-1 hoverable">
接下來，我們希望添加一個如下圖所示的導航欄，問題在於我們不是只在首頁顯示導航欄，隨著內容的增加，頁面的增加，如果每次都把這段代碼拷貝到相應的html頁面，將會使得代碼冗長且操作繁瑣。為了解決這個問題，我們可以使用extends和includes。
首先，我們新建一個header.html文件，將導航欄的信息存儲在裏面：
<head> {% load static %} <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="{% static ‘tinymce/css/prism.css‘ %}" rel="stylesheet"> </head> <body> {% block content %} {% endblock %} </body> <script src="{% static ‘tinymce/js/prism.js‘ %}"></script>
現在粘貼相應的導航欄代碼到header.html，修改後內容如下：
<head> {% load static %} <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="{% static ‘tinymce/css/prism.css‘ %}" rel="stylesheet"> </head> <body> <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo">Logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="sass.html">Sass</a></li> <li><a href="badges.html">Components</a></li> <li><a href="collapsible.html">JavaScript</a></li> </ul> </div> </nav> {% block content %} {% endblock %} </body> <script src="{% static ‘tinymce/js/prism.js‘ %}"></script>
此時home.html的內容如下
{% extends ‘main/header.html‘ %} {% block content %} <div class="row"> {% for t in tutorials %} <div class="col s12 m6"> <div class="card blue-grey darken-1 hoverable"> <div class="card-content white-text"> <span class="card-title">{{ t.tutorial_title}}</span> <p style="font-size:70%">{{ t.tutorial_published }}</p> <p>{{ t.tutorial_content|safe }}</p> </div> </div> </div> {% endfor %} </div> {% endblock %}
重新到瀏覽器刷新頁面，可以看到導航欄出現了：
我們對導航欄上顯示的字Sass, Components, JavaScript做出修改，得到如下界面：
如果我們想改變導航欄的顏色或者Card的顏色，該怎麽做呢？可以參考鏈接[2]，我暫時先不對此做出修改，之後想修改時再來操作。
參考鏈接：
[1] https://materializecss.com/
[2] https://pythonprogramming.net/css-django-tutorial/
Anaconda+django寫出第一個web app（五）