.Css dosyasını (flask / python) almayan uygulama

114

Harici bir stil sayfasıyla biçimlendirmeye çalıştığım bir şablonu oluşturuyorum. Dosya yapısı aşağıdaki gibidir.

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

mainpage.html şuna benzer

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

Yine de stillerimden hiçbiri uygulanmıyor. Bunun html'nin oluşturduğum bir şablon olmasıyla bir ilgisi var mı? Python buna benzer.

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

Bunun işe yaradığını biliyorum, çünkü şablonu hala oluşturabiliyorum. Bununla birlikte, stil kodumu html'nin "head" etiketi içindeki bir "stil" bloğundan harici bir dosyaya taşımayı denediğimde, tüm stil kayboldu ve çıplak bir html sayfası kaldı. Dosya yapımda herhangi bir hata gören var mı?

— Zack
kaynak

230

Flask'ın başlatılması sırasında özel olarak geçersiz kılmadığınız sürece bir 'statik' klasör kurulumuna (css / js dosyaları için) sahip olmanız gerekir. Bunu geçersiz kılmadığını varsayıyorum.

Css için dizin yapınız şöyle olmalıdır:

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

/ Styles dizininizin / static altında olması gerektiğine dikkat edin.

O zaman bunu yap

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

Flask şimdi css dosyasını static / styles / mainpage.css altında arayacaktır.

— kodaman
kaynak

4

Bu cevap olarak işaretlenmelidir. Bu çözüm benim için çalıştı, eğer sizin için değilse, lütfen bize yardım etmemizi söyleyin. Aksi takdirde işaretleyin. @zack

— Shahryar Saljoughi

2

Bu neden doğru cevap olarak işaretlenmedi? Olmalı.

— pfabri

1

Üzgünüz, buna geri dönmeyi unuttum :) statik klasör kesinlikle gitmenin yoluydu

— Zack

1

Javascript için statik klasöre komut dosyası ekleyin . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— 25'te

17

Jinja2 şablonlarında (şişenin kullandığı),

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

staticDosyaları genellikle staticyapılandırılmış sürece rağmen, klasör.

— njzk2
kaynak

1

Bu maalesef bana bir hata veriyor. BuildError: ('mainpage.css', {}, Yok)

— Zack

6

Birden fazla iş parçacığı okudum ve hiçbiri insanların anlattığı sorunu çözmedi ve ben de yaşadım.

Python 3.7'ye yükseltmek için conda'dan uzaklaşıp pip kullanmayı bile denedim, önerilen tüm kodlamaları denedim ve hiçbiri düzeltilmedi.

Ve işte neden (sorun):

varsayılan olarak python / flask statik ve şablonu aşağıdaki gibi bir klasör yapısında arayın:

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

Pycharm'daki hata ayıklayıcıyı (veya başka herhangi bir şeyi) kullanarak kendiniz doğrulayabilir ve uygulamadaki değerleri kontrol edebilir (app = Flask ( ad )) ve teamplate_folder ve static_folder'ı arayabilirsiniz

Bunu düzeltmek için, uygulamayı şu şekilde oluştururken değerleri belirtmeniz gerekir:

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 ve STATIC_DIR yolu, dosya uygulamasının bulunduğu yere bağlıdır. benim durumumda, resme bakın, src altındaki bir klasörde bulunuyordu.

Şablonu ve statik klasörleri istediğiniz gibi değiştirebilir ve app = Flask ...

Aslında, klasörle uğraşırken sorunu yaşamaya başladım ve bazen çalışmadım. bu sorunu sonsuza kadar düzeltir

html kodu şöyle görünür:

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

Bu kod

İşte klasörlerin yapısı

— Stefano Tuveri
kaynak

2

: Hala codegeek tarafından sağlanan çözüm izledikten sonra sorunlarınız
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

Gelen Google Chrome statik dosyaları yeniden olmayacak yükle düğmesini (F5) basılarak. Kabul edilen çözümü izlediyseniz ancak yine de CSS'de yaptığınız değişiklikleri görmüyorsanız, ctrl + shift + Rönbelleğe alınmış dosyaları yok saymak ve statik dosyaları yeniden yüklemek için düğmesine basın .

In Firefox yeniden düğmesine basarak statik dosyaları yeniden belirir.

In the Edge statik dosyasını yeniden etmez yenileme düğmesine basarak. Tuşuna ctrl + shift + Rbasmanın önbelleğe alınmış dosyaları yok sayması ve statik dosyaları yeniden yüklemesi gerekir. Ancak bu benim bilgisayarımda çalışmıyor.

— Christian Johansen
kaynak

Çok teşekkür ederim, sorunumu Google Chrome'da çözdü (Ctrl + shift + R). Önbelleğe alınan dosyaları otomatik olarak yok saymanın bir yolu var mı?

— Alexis

1

Şu anda şişenin 1.0.2 sürümünü çalıştırıyorum. Yukarıdaki dosya yapıları benim için çalışmadı, ancak işe yarayan bir tane buldum, bunlar aşağıdaki gibidir:

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

(Lütfen 'statik' ve 'şablonların' klasörler olduğunu ve tamamen aynı şekilde adlandırılması gerektiğini unutmayın.)

Çalıştırdığınız flask sürümünü kontrol etmek için Python'u terminalde açmalı ve buna göre aşağıdakileri yazmalısınız:

ithalat şişesi

şişe - versiyon

— Ly-Bach
kaynak

Pardon ama ne yaptığınızı tam olarak anlatır mısınız? Ben de aynı sorunla mücadele ediyorum!

— user3002996

0

Şişe proje yapısı farklıdır. Soruda belirttiğiniz gibi proje yapısı aynı ama tek sorun stiller klasörü ile ilgili. Stiller klasörü statik klasörün içinde olmalıdır.

static/styles/style.css

— Gopi P
kaynak

0

Bu konuya eklemek için bir nokta daha var.

.Css dosya adınıza alt çizgi eklerseniz işe yaramaz.

— SW Jeong
kaynak

0

Eklenecek bir nokta daha. Yukarıdaki olumlu oy verilen yanıtların yanı sıra, lütfen aşağıdaki satırın app.pydosyaya eklendiğinden emin olun :

app = Flask(__name__, static_folder="your path to static")

Aksi takdirde, şişe statik klasörü algılayamayacaktır.

— Sanjay Nandakumar
kaynak

0

Yukarıdaki yöntemlerden herhangi biri çalışmıyorsa ve kodunuz mükemmelse, Ctrl + F5 tuşlarına basarak sıkı yenilemeyi deneyin. Tüm boşlukları temizleyecek ve ardından dosyayı yeniden yükleyecektir. Benim için çalıştı.

— Hackytech
kaynak

-8

Laravel şablonuna benzediğinden oldukça eminim, benimkini böyle yaptım.

<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />

Başvurulan: CSS dosyası yol oluşturma sorunu

İçeriğini bir .html dosyasından okuyan basit cep şişesi uygulaması. Harici stil sayfası engelleniyor mu?

— nCore
kaynak

2

Size oy vermeyecek ama eğitiminiz için Laravel PHP ve Flask Python. Benzer şekilde çalışmazlar. Çok farklı dizin yapıları ve davranışları vardır.

— Bay Concolato

Statik dosyaları içe aktarmak için bu statik dosyaları statik bir klasöre yerleştirmemiz gerekir. Verdiğiniz klasör yapısı normal bir HTML dosyası ile çalışır. ama Flask ile değil

— Gopi P