Day 57 - Jinja & Blog Project


Posted by pei_______ on 2022-06-06

learning from 100 Days of Code: The Complete Python Pro Bootcamp for 2022


Jinja - template languge

  • 內建在Flask中

main.py

from flask import Flask, render_template
from random import randint
from datetime import datetime
import requests

app = Flask(__name__)


# 對應 index.html
@app.route('/')
def home():
    random_num = randint(0, 10)
    current_year = datetime.today().year

    # 將變數(name=value)傳入,供HTML讀取
    return render_template("index.html", num=random_num, year=current_year)


# 對應 guess.html
@app.route('/guess/<name>')
def guess(name):
    your_name = name.title()

    age_url = f"https://api.agify.io?name={name}"
    age_response = requests.get(url=age_url)
    age_guess = age_response.json()["age"]

    gender_url = f"https://api.genderize.io/?name={name}"
    gender_response = requests.get(url=gender_url)
    gender_guess = gender_response.json()["gender"]
    return render_template("guess.html", name=your_name, age=age_guess, gender=gender_guess)


# 對應 blog.html (HTML的get_url()回傳參數: num)
@app.route('/blog/<num>') 
def get_blog(num):
    blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
    blog_response = requests.get(blog_url)
    all_posts = blog_response.json()
    return render_template("blog.html", posts=all_posts)


if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <h1>Hello World!</h1>
    <!-- HTML導入python運算 -->
    <h2>{{5*6}}</h2>
    <!-- HTML中導入python變數 -->
    <h3>Random number: {{ num }}</h3>
    <!-- HTML中傳送連結(python中函式,可附上參數) -->
    <a href="{{ url_for('get_blog', num=3) }}">Go to blog</a>
</body>
<footer>
    Copyright {{ year }}. Build by Penny.
</footer>
</html>

guess.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guess</title>
</head>
<body>
<!-- HTML中導入python變數 -->
<h1>Hello {{ name }},</h1>
<h2>I think you are {{ gender }},</h2>
<h3>And maybe {{ age }} years old.</h3>
</body>

blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
</head>
<body>
<!-- HTML中使用python迴圈(for / if) -->
    {% for post in posts: %}
        {% if post["id"] == 2: %}
            <h1>{{ post["title"] }}</h1>
            <h2>{{ post["subtitle"] }}</h2>
        {% endif %}
    {% endfor %}

</body>
</html>



簡易 Blog 設計


blog.py

from flask import Flask, render_template
import requests

app = Flask(__name__)

BLOG_URL = " https://api.npoint.io/c790b4d5cab58020d391"
BLOG_RESPONSE = requests.get(url=BLOG_URL)
BLOG_POSTS = BLOG_RESPONSE.json()

@app.route('/')
def home():
    global BLOG_POSTS
    print(BLOG_POSTS)
    return render_template("index.html", posts=BLOG_POSTS)

@app.route('/blog/<id>')
def get_post(id):
    global BLOG_POSTS
    index = int(id) - 1
    return render_template("post.html", post=BLOG_POSTS[index])

if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>


   {% for post in posts:%}
        <div class="content">
            <div class="card">
                <h2>{{ post["title"]}}</h2>
                <p class="text">{{ post["subtitle"]}}</p>
                <a href="{{ url_for('get_post', id=post['id']) }}">Read</a>
            </div>
        </div>
    {% endfor %}


</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My blog</h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h1>{{ post["title"] }}</h1>
                <h2>{{ post["subtitle"] }}</h2>
                <p>{{ post["body"] }}</p>
            </div>

    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

#Python #課堂筆記 #100 Days of Code







Related Posts

Valid Parentheses

Valid Parentheses

Git筆記 Going back & Undoing Changes

Git筆記 Going back & Undoing Changes

[Oracle Debug] 實現用regexp_substr分解資料成多個欄位

[Oracle Debug] 實現用regexp_substr分解資料成多個欄位


Comments