Flask наследование шаблонов со стилями CSS - PullRequest
0 голосов
/ 29 мая 2020

У меня есть файл base.html, от которого наследуются все остальные страницы. Базовые ссылки на main.css для определений классов стилей. Однако пока этот эффект не реализован.

Base. html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    {%block head%}
    {%endblock%}

    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}"/>

    {% if title %}
    <title> {{title}} </title>
    {%endif%}

  </head>
  <body>
    <h1>Task Master</h1>
    {%block body%}
    {%endblock%}
  </body>
</html>

index. html

<!DOCTYPE html>
{%extends "base.html"%}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
    <body>

    {%block body%}
    <div class="content">
      <table>
        <tr>
            <th>Task</th>
            <th>Added</th>
            <th>Actions</th>
        </tr>
        {%for task in tasks%}
        <tr>
            <td>{{task.content}}</td>
            <td>{{task.date_created.date()}}</td>
            <td>
              <a href="/delete/{{task.id}}">Delete</a>
              <br>
              <a href="/update/{{task.id}}">Update</a>
            </td>
        </tr>
        {%endfor%}
      </table>
      <form action="/" method="POST">
        <input type="text" name="content" id="content"/>
        <input type="submit" value="Add Task"/>
      </form>
    </div>
    {%endblock%}

  </body>
</html>

main. css

.h1{
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

И, наконец, app.py

from flask import Flask, render_template, url_for,request,redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)

class Todo(db.Model):
    id = db.Column(db.Integer,primary_key=True)
    content = db.Column(db.String(200),nullable=False)
    date_created = db.Column(db.DateTime,default=datetime.utcnow)

    def __repr__(self):
        return f'<Task {self.id}>'

@app.route('/',methods=['POST','GET'])
def index():
    if request.method == "POST":
        task_content = request.form['content']
        new_task = Todo(content=task_content)
        try:
            db.session.add(new_task)
            db.session.commit()
            return redirect('/')
        except:
            return "Failure to add content."
    else:
        tasks = Todo.query.order_by(Todo.date_created).all()
        return render_template('index.html',title='index',tasks=tasks)

@app.route('/delete/<int:id>')
def delete(id):
    task_to_delete = Todo.query.get_or_404(id)
    try:
        db.session.delete(task_to_delete)
        db.session.commit()
        return redirect('/')
    except:
        return 'Task cannot be deleted'

@app.route('/update/<int:id>',methods=['GET','POST'])
def update(id):
    task = Todo.query.get_or_404(id)
    if request.method == "POST":
        task.content = request.form['content']
        try:
            db.session.commit()
            return redirect('/')
        except:
            return 'Cannot update task'
    else:
        return render_template('update.html',task=task)


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

Я бы хотел, чтобы что-либо в теге <h1> в base. html было отформатировано в соответствии с определение h1 на main. css. Что мне нужно сделать, чтобы добиться такого эффекта?

1 Ответ

1 голос
/ 30 мая 2020

Вам не нужно объявлять тег html и другие теги в index.html, поскольку вы объявили их в base.html. Итак, ваш index.html должен выглядеть примерно так:

{%extends "base.html"%}
{%block body%}
<div class="content">
  <table>
    <tr>
        <th>Task</th>
        <th>Added</th>
        <th>Actions</th>
    </tr>
    {%for task in tasks%}
    <tr>
        <td>{{task.content}}</td>
        <td>{{task.date_created.date()}}</td>
        <td>
          <a href="/delete/{{task.id}}">Delete</a>
          <br>
          <a href="/update/{{task.id}}">Update</a>
        </td>
    </tr>
    {%endfor%}
  </table>
  <form action="/" method="POST">
    <input type="text" name="content" id="content"/>
    <input type="submit" value="Add Task"/>
  </form>
</div>
{%endblock%}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...