網站搭建筆記精簡版---廖雪峰WebApp實戰-Day8:構建前端筆記
阿新 • • 發佈：2018-11-07
前面已經構建好MVC，可以進行視覺化，但是，老醜了，因此需要CSS等進行美化一下。這樣形容一下，html為網頁的骨架，JavaScript為網頁的肌肉，css為網頁的衣服。
模板下載
感謝強大的網際網路，我們可以通過這裡找到已經寫好的強大的CSS框架。它具備完善的響應式佈局，漂亮的UI，以及豐富的HTML元件，讓我們能輕鬆設計出美觀而簡潔的頁面。
下載後，看了下與廖老師的程式碼對比，有點不一樣呀，就直接下載了老師的github原始檔，將static裡的東西給複製過來。
模板生成
生成的許多前端網頁html模板，當需要修改頁首頁尾時候，需要所有的一個一個修改，老麻煩了，因此jinjia2的模板解決了這個問題，它具有“繼承”的方式，實現模板的複用更簡單。
base.html父模板編寫
接下來我們基於uikit這個css框架寫一下templates資料夾中的基網頁的模板__base__.html。之後的各個子網頁均基於這個網頁派生出來的。
“繼承”模板的方式是通過編寫一個“父模板”，在父模板中定義一些可替換的block（塊）。然後，編寫多個“子模板”，每個子模板都可以只替換父模板定義的block。當用的時候或做專案的時候直接在這個頁面上修改即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> # 用於子頁面定義一些meta，例如rss feed {% block meta %}<!-- block meta -->{% endblock %} # 用於子頁面覆蓋當前頁面的標題 <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title> <link rel="stylesheet" href="/static/css/uikit.min.css"> <link rel="stylesheet" href="/static/css/uikit.gradient.min.css"> <link rel="stylesheet" href="/static/css/awesome.css" /> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/md5.js"></script> <script src="/static/js/uikit.min.js"></script> <script src="/static/js/awesome.js"></script> # 子頁面可以在<head>標籤關閉前插入JavaScript程式碼 {% block beforehead %}<!-- before head -->{% endblock %} </head> <body> <nav class="uk-navbar uk-navbar-attached uk-margin-bottom"> <div class="uk-container uk-container-center"> <a href="/" class="uk-navbar-brand">Awesome</a> <ul class="uk-navbar-nav"> <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日誌</a></li> <li><a target="_blank" href="#"><i class="uk-icon-book"></i> 教程</a></li> <li><a target="_blank" href="#"><i class="uk-icon-code"></i> 原始碼</a></li> </ul> <div class="uk-navbar-flip"> <ul class="uk-navbar-nav"> {% if user %} <li class="uk-parent" data-uk-dropdown> <a href="#0"><i class="uk-icon-user"></i> {{ user.name }}</a> <div class="uk-dropdown uk-dropdown-navbar"> <ul class="uk-nav uk-nav-navbar"> <li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li> </ul> </div> </li> {% else %} <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陸</a></li> <li><a href="/register"><i class="uk-icon-edit"></i> 註冊</a></li> {% endif %} </ul> </div> </div> </nav> <div class="uk-container uk-container-center"> <div class="uk-grid"> # 子頁面的content佈局和內容 <!-- content --> {% block content %} {% endblock %} <!-- // content --> </div> </div> <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;"> <div class="uk-container uk-container-center uk-text-center"> <div class="uk-panel uk-margin-top uk-margin-bottom"> <p> <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo"></a> <a target="_blank" href="#" class="uk-icon-button uk-icon-github"></a> <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square"></a> <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter"></a> </p> <p>Powered by <a href="#">Awesome Python Webapp</a>. Copyright © 2014. [<a href="/manage/" target="_blank">Manage</a>]</p> <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p> <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a> </div> </div> </div> </body> </html>
blogs.html
接下來將上述__base__.html模板繼承一個blogs.html出來，即將block替代。
# 強調繼承自哪裡 {% extends '__base__.html' %} # 僅向block中的內容 {% block title %}日誌{% endblock %} {% block content %} <div class="uk-width-medium-3-4"> {% for blog in blogs %} <article class="uk-article"> <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2> # 若不加datetime則會顯示浮點的時間，datetime在app.py中定義 # 因此通過jinja2的filter（過濾器），把一個浮點數轉換成日期字串。 <p class="uk-article-meta">發表於{{ blog.created_at|datetime }}</p> <p>{{ blog.summary }}</p> <p><a href="/blog/{{ blog.id }}">繼續閱讀 <i class="uk-icon-angle-double-right"></i></a></p> </article> <hr class="uk-article-divider"> {% endfor %} </div> <div class="uk-width-medium-1-4"> <div class="uk-panel uk-panel-header"> <h3 class="uk-panel-title">友情連結</h3> <ul class="uk-list uk-list-line"> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">程式設計</a></li> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">讀書</a></li> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Python教程</a></li> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Git教程</a></li> </ul> </div> </div> {% endblock %}
app程式碼更改
在app.py中增加如下程式碼。
def datetime_filter(t):
delta = int(time.time() - t)
if delta < 60:
return '1分鐘前'
if delta < 3600:
return '%s分鐘前' % (delta // 60)
if delta < 86400:
return '%s小時前' % (delta // 3600)
if delta < 604800:
return '%s天前' % (delta // 86400)
dt = datetime.fromtimestamp(t)
return '%s年%s月%s日' % (dt.year, dt.month, dt.day)
...
init_jinja2(app, filters=dict(datetime=datetime_filter))
...
改後的app.py程式碼如圖
模板應用
接下來直接在cmd命令列輸入：python app.py，在瀏覽器輸入http://localhost:9000/即可。
參考部落格
廖雪峰的官方網站
CSS檔案github程式碼