Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active June 23, 2024 17:30
Show Gist options
  • Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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 all_posts: %}
<div class="content">
<div class="card ">
<h2>{‌{ post.title }}</h2>
<p>{‌{ post.subtitle }}</p>
<a href="{‌{ url_for('show_post', index=post.id) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Raw
main.py
from flask import Flask, render_template
from post import Post
import requests
posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
post_objects = []
for post in posts:
post_obj = Post(post["id"], post["title"], post["subtitle"], post["body"])
post_objects.append(post_obj)
app = Flask(__name__)
@app.route('/')
def get_all_posts():
return render_template("index.html", all_posts=post_objects)
@app.route("/post/<int:index>")
def show_post(index):
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)
if __name__ == "__main__":
app.run(debug=True)
Raw
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>
Raw
post.py
class Post:
def __init__(self, post_id, title, subtitle, body):
self.id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
@Rimon83
Copy link

Rimon83 commented Jun 23, 2024

This is my solution, I used only one HTML file to render all blogs or one blog details by using if condition in HTML file:

server.py

from flask import Flask, render_template, url_for
import requests

app = Flask(__name__)

url = "https://api.npoint.io/5956e24d0b30106f8263"
response = requests.get(url=url)
response.raise_for_status()
blogs = response.json()


@app.route("/")
def blog_page():
    return render_template("blog.html", blogs=blogs)


@app.route("/blog/<int:blog_id>")
def show_blog(blog_id):
    index = blog_id - 1
    print(blog_id)
    return render_template("blog.html", blog=blogs[index],
                           blog_id=blog_id)


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

blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blogs</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="header">
    <h1>Blogs</h1>
</div>

<div class="container">
    {% if blog_id %}
    <div class="card">
        <h2>{{blog["title"]}}</h2>
        <h4>{{blog["subtitle"]}}</h4>
        <p>{{blog["body"]}}</p>
    </div>

    {% else %}
    {% for blog in blogs %}
    <div class="card">
        <h2>{{blog.title}}</h2>
        <h4>{{blog.subtitle}}</h4>
        <a href="{{ url_for('show_blog', blog_id=blog.id) }}">Read</a>
    </div>
    {% endfor %}
    {% endif %}

</div>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment