Python網頁設計:Flask使用筆記(二)- 搭配HTML和CSS

HTML

建立一個名為templates的資料夾,在裡面建立 index.html

#Flask會從templates裡面讀取html檔案

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask教學</title>
</head>
<body>
<h1>我的第一個Flask網站</h1>
<p> Flask是一個使用Python編寫的輕量級Web應用框架。</p>
</body>
</html>

修改在第一篇建立的 main.py檔案

from flask import Flask, render_template

前往 http://localhost:5000/

我的第一個Flask網站

增加更多頁面

在templates資料夾裡面建立 about.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask教學</title>
</head>
<body>
<h1>關於Flask網站</h1>
<p>本網站僅用於測試用途。</p>
</body>
</html>

修改main.py

from flask import Flask, render_template

前往 http://localhost:5000/about

關於Flask網站

用導航欄連結index.html和about.html

在templates資料夾裡面建立 template.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask模板</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/template.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">我的第一個Flask網站</h1>
<strong><nav>
<ul class="menu">
<li><a href="{{ url_for('index') }}">Index</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
</ul>
</nav></strong>
</div>
</header>

url_for() function 幫助我們連接index和about這兩個頁面,並且自動複製導航欄的程式碼至個別頁面當中

about.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask教學</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}

home.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask教學</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}

CSS

建立一個名為 static的資料夾,在裡面建立template.css

#Flask會從static裡面讀取 CSS, JavaScript, 圖片

template.css

/* 整體*/
body {
margin: auto;
max-width: 580px;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}

/* 頁腳*/
footer {
color: #888;
margin-top: 15px;
text-align: center;
padding: 10px;
}

連結CSS和HTML檔案

修改template.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask模板</title>

前往 http://localhost:5000/about

此時的網站已經出現CSS樣式了!

以下為Scripts

添加圖片
#在static資料夾中中放入圖片,並在html上加入以下程式
<img src="{{ url_for('static', filename='foo.jpg') }}">
添加Favicon
#在static資料夾中中放入icon,並在html上加入以下程式
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
添加class屬性,將CSS與HTML對應起來
<h2>
<img alt="Avatar" class="avatar" src="{{ url_for('static', filename='images/avatar.png') }}">
{{ name }}'s Watchlist
</h2>
...
<ul class="movie-list">
...
</ul>
<img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store