CSS не связывается с моим приложением Python / Flask - PullRequest
Новая
       32

CSS не связывается с моим приложением Python / Flask

0 голосов
/ 21 марта 2020

Кажется, я не могу связать мою таблицу стилей, может кто-нибудь сказать, почему?

Я пытаюсь создать образец экземпляра с базой данных, работающей на Flask.

Я думал, что это папка, но дважды проверил, находится ли она в нужном месте, и не могу понять, почему, потратил часы, пытаясь это исправить.

Мой HTML: 

{% extends "layout.html" %}

{% block title %}
    CS50_Web_Project1
{% endblock %}

{% block body %}
    <h1>Login to CS50_Web_Project1</h1>  

    <form action="{{ url_for('register') }}" method="POST">
    <button>Register</button>
    </form>   

{% endblock %}

Мой макет. html: 

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

        <!-- #olaf: own link to own style sheet-->

        <link rel="stylesheet" href="css/style.css" type="text/css" >

        <!-- #olaf: copied from  https://bootsnipp.com/snippets/GaEOX-->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    </head>
    <body>
        <div class="container">
            {% block body %}
            {% endblock %}
        </div>
    </body>
</html>

Мой CSS в формате css / style. css местоположение: 

    /* style.css */
.note
{
    text-align: center;
    height: 80px;
    background: -webkit-linear-gradient(left, #0072ff, #8811c5);
    color: #fff;
    font-weight: bold;
    line-height: 80px;
}
.form-content
{
    padding: 5%;
    border: 1px solid #ced4da;
    margin-bottom: 2%;
}
.form-control{
    border-radius:1.5rem;
}
.btnSubmit
{
    border:none;
    border-radius:1.5rem;
    padding: 1%;
    width: 20%;
    cursor: pointer;
    background: #0062cc;
    color: #fff;
}

My application.py:

import os

from flask import Flask, session, render_template, jsonify, request
from flask_session import Session
from sqlalchemy import create_engine
from sqlalchemy.orm import scoped_session, sessionmaker

app = Flask(__name__)

#from the internet...# app.config['DATABASE_URL'] = "path_to_db"


# Check for environment variable
if not "DATABASE_URL":
    raise RuntimeError("DATABASE_URL is not set")

# Configure session to use filesystem
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

# Set up database
engine = create_engine("DATABASE_URL")
db = scoped_session(sessionmaker(bind=engine))

#olaf: create a login page that has a form, containing "login" & "register" button
@app.route("/")
def index():

    return render_template("index.html")

#olaf: Login button
@app.route("/register", methods=["POST"])
def register():
    """Register for the site"""

    return render_template("registerSuccess.html")

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

Чтобы предоставить файл CSS в шаблоне Flask, необходимо использовать метод c для этого в шаблоне HTML {{ url_for(STATIC_DIR_NAME, filename=PATH_TO_FILE_IN_STATIC_DIR)}}.

В вашем layout.html

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

        <!-- #olaf: own link to own style sheet-->

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

        <!-- #olaf: copied from  https://bootsnipp.com/snippets/GaEOX-->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            {% block body %}
            {% endblock %}
        </div>
    </body>
</html>

Также, если вы будете следовать официальной документации , советы по макету должны это сделать. enter image description here Но если у вас есть пользовательская настройка проекта, вам может потребоваться указать приложению, где находится папка stati c.

Например, в вашем application.py

import os

from flask import Flask, session, render_template, jsonify, request
from flask_session import Session
from sqlalchemy import create_engine
from sqlalchemy.orm import scoped_session, sessionmaker

THIS_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_DIR = os.path.join(THIS_DIR, 'specific_path_to_static', 'static')

app = Flask(__name__, static_url_path=STATIC_DIR)

#from the internet...# app.config['DATABASE_URL'] = "path_to_db"


# Check for environment variable
if not "DATABASE_URL":
    raise RuntimeError("DATABASE_URL is not set")

# Configure session to use filesystem
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

# Set up database
engine = create_engine("DATABASE_URL")
db = scoped_session(sessionmaker(bind=engine))

#olaf: create a login page that has a form, containing "login" & "register" button
@app.route("/")
def index():

    return render_template("index.html")

#olaf: Login button
@app.route("/register", methods=["POST"])
def register():
    """Register for the site"""

    return render_template("registerSuccess.html")

Тогда шаблон flask должен найти файл style.css, предоставленный в файле layout.html.

0 голосов
/ 21 марта 2020

Первое решение, которое я могу предложить, - это загрузить файлы bootstrap и поместить их в локальный рабочий каталог, а затем создать папку для файлов stati c и попробовать следующий код 

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

...