web-dev-qa-db-ja.com

アプリケーションが.cssファイルを取得しない（flask / python）

外部のスタイルシートでスタイルを設定しようとしているテンプレートをレンダリングしています。ファイル構造は次のとおりです。

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.htmlは次のようになります

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

しかし、私のスタイルはどれも適用されていません。 htmlが私がレンダリングしているテンプレートであるという事実と関係がありますか？ pythonは次のようになります。

return render_template("mainpage.html", variables..)

私はまだテンプレートをレンダリングできるので、これだけで機能していることを知っています。ただし、htmlの「head」タグ内の「style」ブロックから外部ファイルにスタイリングコードを移動しようとすると、すべてのスタイリングがなくなり、htmlページがそのまま残りました。ファイル構造にエラーがありますか？

pythonhtmlcsstemplatesflask
70
Zack

Flaskの初期化中に特別にオーバーライドしない限り、（css/jsファイル用に） '静的'フォルダーをセットアップする必要があります。私はあなたがそれを上書きしなかったと仮定しています。

Cssのディレクトリ構造は次のようになります。

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

/ stylesディレクトリは/ staticの下にあることに注意してください

次に、これを行います

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

Flaskは、static/styles/mainpage.cssの下でcssファイルを探します。

154
codegeek

flaskが使用するjinja2テンプレートでは、

href="{{ url_for('static', filename='mainpage.css')}}"

staticファイルは、特に設定されていない限り、通常staticフォルダーにあります。

14
njzk2

私は複数のスレッドを読みましたが、誰もが説明している問題を解決したものはなく、私も経験しました。

Condaから離れてpipを使用してpython 3.7にアップグレードしようとしても、提案されたすべてのコーディングを試しましたが、いずれも修正されませんでした。

そして、ここに理由があります（問題）：

デフォルトでは、python/flaskは、次のようなフォルダー構造で静的およびテンプレートを検索します。

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
 and 
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

pycharm（またはその他）でデバッガーを使用して自分で確認し、アプリの値を確認することができます（app = Flask（name））および検索teamplate_folderおよびstatic_folderの場合

これを修正するには、アプリの作成時に次のような値を指定する必要があります。

TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')

# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)

tEMPLATE_DIRとSTATIC_DIRのパスは、ファイルアプリの場所によって異なります。私の場合、画像を参照してください。これは、srcの下のフォルダー内にありました。

あなたが望むようにテンプレートと静的フォルダを変更し、アプリ= Flaskに登録することができます...

実際、フォルダーをいじくり回すと問題が発生することがあり、時には機能しないこともありました。これにより、問題が完全に修正されます

htmlコードは次のようになります。

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

このコード

ここでフォルダーの構造

2
Stefano Tuveri

現在、flaskのバージョン1.0.2を実行しています。上記のファイル構造は私にとっては機能しませんでしたが、次のような構造が見つかりました。

     app_folder/ flask_app.py/ static/ style.css/ templates/
     index.html

（「static」と「templates」はフォルダであり、まったく同じ名前を付ける必要があります。）

実行しているflaskのバージョンを確認するには、ターミナルでPythonを開き、それに応じて以下を入力する必要があります。

輸入フラスコ

フラスコ-バージョン

1
Ly-Bach