TIL Python Basics Day 59 - Blog Capstone Project: Adding Styling

{% include %}

Jinja templates: you can just create a header and footer template which can then be applied to all web pages in your website.
Changeable part of your webpage: e.g. the body of the page.

header.html

• starter script
  -Bootstrap core CSS
  -Custom fonts for this template
  -Custom styles for this template

footer.html

• end of the script
  -Bootstrap core JavaScript
  -Custom scripts for this template

Docs

Directing to the page (linking)

server.py------------------

@app.route('/blog/<index>')
def get_blog(index):


index.html------------------	
                     #name of the function
<a href="{{ url_for('get_blog', index=3) }}">Go To Blog</a>

In each module,

• delete nav bar and instead add {% include %}- header and footer
• directory change
  (doesn't need to include "starter css, bootstrap js code" as it's already in header&footer )

Rendering Individual Posts

1. Use "dot notation" than [bracket] to access variable Docs
2. Using custom class
   -Create class module
   -Get blog contents from API
   -Create Post class object 'post_obj' with parameters
   -Use 'for loop' to get hold of every post in the list( for loop for counting posts)
   -Appending and creating a new list object holding each info

post.html is just a template. It doesn't need for loop. Static HTML template is rendered for every single post.

posts.py

'''Provides accessible template from Post object'''

class Post:
    def __init__(self, id, author, title, subtitle,
    dates, image, body):
        self.id = id
        self.author = author
        self.title = title
        self.subtitle = subtitle
        self.dates = dates
        self.image = image
        self.body = body

main.py

from posts import Post
"""
Returns blog post object from API
Creates a new list of objects from Post class
"""

posts = requests.get("https://api.npoint.io
/5abcca6f4e39b4955965").json()
post_objects = []
for post in posts:
    post_obj = Post(post["id"], post["title"],
    		post["subtitle"], post["body"])
    
    post_objects.append(post_obj)


print(post_objects)
#[<post.Post object at 0x0000000003BC3DA0>, 
<post.Post object at 0x0000000003BC3240>, 
<post.Post object at 0x0000000003BC3128>]

#--------------------------------------------------
@app.route("/")
def home():
	"""Passes post_objects list as parameter """
    return render_template("index.html",  all_posts=post_objects)
   
#--------------------------------------------------
   
@app.route("/post/<int:index>")
def show_post(index):
    """Passes post object as requested_post, only when its id matches with index from url"""
    requested_post = None
    for blog_post in post_objects:
        if blog_post.id == index:
            requested_post = blog_post
    return render_template("post.html", post=requested_post)    

index.html

• 'for loop' for repeated display
• href to be rendered to 'post/<index>' page
• Note that anchor tag starts right after for loop, embracing all h2, h3, p tags inside for loop and ends right before dates and endfor. Everything except date linked to show_post function.

 <!-- Main Content -->
  <div class="container">

       {% for post in all_posts: %}
            <a href="{{ url_for('show_post', index=post.id)}}">
            <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>
            {{post.dates}} </p>
       {% endfor %}

        </div>

Final Result

• Home
  

• About
  

• Contact
  

• Post
  

Finally back to studying routine. It was very hard to focus on studying after a long holiday. I've completed task one by one. I want to finish two modules a day but it's not easy. Good thing is I feel like getting grisp of it. I will be able to build some projects until the end of the month. 2 weeks. I can do it!