Day 059
Udemy Python Bootcamp Day 059
Blog Capstone Project Part 2 - Adding Styling
Step 1 - Download the starting project
Step 2 - Get the home page to work
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def get_all_posts():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
Step 3 - Fix the header and footer
静的フォルダのファイル(画像、css、js)アドレスの変更
main navbarに
fixed-top classを追加してもnavbarは修復できませんが、クエリー応答から見ると、多くの人が同じ問題に直面しているようですか?
アンジェラは、次のコードも追加しました.
ファイルがアップグレードされてからは必要ないようです.
Step 4 - Using Jinja Include fo Render Templates
Include Tag from Jinja
{% include 'header.html' %}
Body
{% include 'footer.html' %}<body> tagと</body> tagは異なるhtmlファイルでも正常に動作します...!
Step 5 - Make the About and Contact Pages Work
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ url_for('get_all_posts') }}">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ url_for('about_page') }}">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{ url_for('contact_page') }}">Contact</a></li>@app.route('/about')
def about_page():
return render_template('about.html')
@app.route('/contact')
def contact_page():
return render_template('contact.html')
そう書きました.ソリューションから見ると、このような複雑なコンテンツを書く必要はありません.
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact">Contact</a></li>そして
index.htmlのように{% include 'header.html' %}{% include 'footer.html' %}で上下にカットすればいい!Step 6 - Fetch and render the blog posts from an API
{% for post in all_posts: %}
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">{{ post.title }}</h2>
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
</a>
<p class="post-meta">
Posted by
<a href="#!">{{ post.author }}</a>
on {{ post.date }}
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
{% endfor %}import requests
@app.route('/')
def get_all_posts():
posts = requests.get("https://api.npoint.io/2b75de17c055f76690b5").json()
return render_template('index.html', all_posts=posts)
Step 7 - Rendering Individual Posts
post.html <div class="post-heading">
<h1>{{ post.title }}</h1>
<h2 class="subheading">{{ post.subtitle }}</h2>
<span class="meta">
Posted by
<a href="#!">{{ post.author }}</a>
on {{ post.date }}
</span>
</div>index.html <a href="{{ url_for('post', index=post.id) }}">main.py @app.route('/post/<int:index>')
def post(index):
requested_post = None
for blog_post in posts:
if blog_post["id"] == index:
requested_post = blog_post
return render_template('post.html', post=requested_post)
main.pyを書くのは難しいですが、簡単です.ただし個々のpostで上欄をクリックすると、正しいページを呼び出すことができません.
個別の記事ページでnavigation barを正常に呼び出すには、私が最初に作成した
{{ url_for('get_all_posts') }}と同じ方法で作成する必要があります.FINAL
https://gist.github.com/awesomekimn/2834b9f397700b61c29f2f59296517e5
ああ...ファイルがアルファベット順に並んでいて不便です...
Reference
この問題について(Day 059), 我々は、より多くの情報をここで見つけました https://velog.io/@awesomee/Day-059テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol