অ্যাপ্লিকেশন .css ফাইল বাছাই করছে না (ফ্লাস্ক / পাইথন)

113

আমি একটি টেমপ্লেট রেন্ডার করছি, আমি বাহ্যিক স্টাইল শীট দিয়ে স্টাইল করার চেষ্টা করছি। ফাইলের কাঠামো নীচে রয়েছে।

/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 -->

যদিও আমার শৈলীর কোনও প্রয়োগ হচ্ছে না। এইচটিএমএল যে টেম্পলেটটি আমি রেন্ডার করছি তার সাথে কি এর কোনও সম্পর্ক আছে? অজগরটি দেখতে এই রকম।

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

আমি জানি যে এটি অনেকগুলি কাজ করছে, কারণ আমি এখনও টেমপ্লেটটি সরবরাহ করতে সক্ষম am যাইহোক, যখন আমি এইচটিএমএল এর "হেড" ট্যাগের মধ্যে "স্টাইল" ব্লক থেকে আমার স্টাইলিং কোডটি একটি বাহ্যিক ফাইলে স্থানান্তরিত করার চেষ্টা করেছি, তখন সমস্ত স্টাইলিং একটি খালি এইচটিএমএল পৃষ্ঠা রেখে চলে গেল। আমার ফাইল কাঠামোর সাথে কেউ ত্রুটি দেখতে পাচ্ছেন?

— জ্যাক
সূত্র

225

ফ্ল্যাস্ক আরম্ভের সময় আপনি যদি নির্দিষ্টভাবে ওভাররাইড না করেন তবে আপনার একটি 'স্ট্যাটিক' ফোল্ডার সেটআপ হওয়া দরকার (সিএসএস / জেএস ফাইলের জন্য)। আমি ধরে নিচ্ছি আপনি এটিকে ওভাররাইড করেননি।

CSS এর জন্য আপনার ডিরেক্টরি কাঠামোটি এমন হওয়া উচিত:

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

লক্ষ্য করুন যে আপনার / শৈলীর ডিরেক্টরিটি / স্থির অধীনে হওয়া উচিত

তারপরে, এটি করুন

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

ফ্লাস্ক এখন স্ট্যাটিক / স্টাইলস / মেইনপেজ.কমের অধীনে সিএসএস ফাইল সন্ধান করবে

— codegeek
সূত্র

4

এটি উত্তর হিসাবে পতাকাঙ্কিত করা উচিত। এই সমাধানটি আমার পক্ষে কাজ করেছে, যদি তা আপনার পক্ষে না হয় তবে দয়া করে আমাদের বলুন। অন্যথায় এটি পতাকা। @ জ্যাক

— শাহরিয়ার সালজুফি

2

কেন এটি সঠিক উত্তর হিসাবে চিহ্নিত করা হয়নি? এটা করা উচিত.

— pfabri

1

দুঃখিত, এইটিতে ফিরে আসতে ভুলে গেছেন :) স্থির ফোল্ডারটি অবশ্যই যাওয়ার উপায় ছিল

— জ্যাক

1

জাভাস্ক্রিপ্টের জন্য স্থিতিশীল ফোল্ডারে স্ক্রিপ্ট ফাইল যুক্ত করুন । <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— এইচআর

17

জিনজা 2 টেম্পলেটগুলিতে (যা ফ্লাস্ক ব্যবহার করে), ব্যবহার করুন

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

staticফাইল সাধারণত হয় staticফোল্ডারের, যদিও, যদি না অন্যথায় কনফিগার করা হয়েছে।

— njzk2
সূত্র

1

দুর্ভাগ্যক্রমে এটি আমাকে একটি ত্রুটি দিচ্ছে। বিল্ডআরার: ('মেইনপেজ.সিএস', {}, কিছুই নয়)

— জ্যাক

6

আমি একাধিক থ্রেড পড়েছি এবং এর মধ্যে কেউই এই সমস্যাটি স্থির করেনি যা লোকেরা বর্ণনা করছে এবং আমিও অভিজ্ঞতা পেয়েছি।

এমনকি আমি কন্ডো থেকে সরে যেতে এবং পাইপটি ব্যবহার করার চেষ্টা করেছি, পাইথন ৩.7-এ উন্নীত করতে, আমি প্রস্তাবিত সমস্ত কোডিং চেষ্টা করেছি এবং সেগুলির কোনও ঠিক করা হয়নি।

এবং এখানে (সমস্যা) কেন:

ডিফল্টভাবে পাইথন / ফ্লাস্ক ফোল্ডার কাঠামোতে স্থির এবং টেম্পলেটটি সন্ধান করুন:

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

আপনি পাইচার্ম (বা অন্য কিছু) এ ডিবাগার ব্যবহার করে নিজের দ্বারা যাচাই করতে পারেন এবং অ্যাপ্লিকেশনটির (মান = ফ্লাস্কের নাম ) নামগুলি পরীক্ষা করতে পারেন )) পারেন এবং টেম্পলেট_ফোল্ডার এবং স্ট্যাটিক_ফোল্ডার অনুসন্ধান করতে পারেন

এটি ঠিক করতে, অ্যাপটি তৈরি করার সময় আপনাকে মানগুলি নির্দিষ্ট করতে হবে:

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 পথটি ফাইল অ্যাপটি কোথায় রয়েছে তার উপর নির্ভর করে। আমার ক্ষেত্রে, ছবিটি দেখুন, এটি এসআরসি-র অধীনে একটি ফোল্ডারের মধ্যে অবস্থিত।

আপনি ইচ্ছামতো টেম্পলেট এবং স্ট্যাটিক ফোল্ডারগুলি পরিবর্তন করতে এবং অ্যাপ্লিকেশন = ফালস্কে নিবন্ধন করতে পারেন ...

সত্য কথা বলতে গেলে, আমি ফোল্ডারটির সাথে ঝামেলা করার সময় সমস্যার মুখোমুখি হতে শুরু করেছি এবং কখনও কখনও কাজ করি নি। এটি একবার এবং সকলের জন্য সমস্যার সমাধান করে

এইচটিএমএল কোডটি দেখতে এমন দেখাচ্ছে:

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

এই কোড

এখানে ফোল্ডারগুলির গঠন

— স্টেফানো টুভেরি
সূত্র

2

: এখনো codegeek দ্বারা উপলব্ধ সমাধান নিম্নলিখিত পর সমস্যা হচ্ছে
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

ইন গুগল ক্রোম রিলোড বোতাম (F5 চাপুন) স্ট্যাটিক ফাইল পুনরায় লোড করা হবে না টিপে। আপনি যদি স্বীকৃত সমাধানটি অনুসরণ করে থাকেন তবে তবুও আপনি সিএসএসে পরিবর্তনগুলি না দেখেন, তবে ctrl + shift + Rক্যাশেড ফাইলগুলিকে উপেক্ষা করতে এবং স্থিতিশীল ফাইলগুলি পুনরায় লোড করতে টিপুন ।

ইন ফায়ারফক্স পুনরায় লোড করুন বোতামটি টিপে স্ট্যাটিক ফাইল পুনরায় লোড বলে মনে হচ্ছে।

ইন এজ রিফ্রেশ বোতামটি স্ট্যাটিক ফাইল পুনরায় লোড না টিপে। টিপে ctrl + shift + Rক্যাশেড ফাইলগুলি উপেক্ষা এবং স্থিতিশীল ফাইলগুলি পুনরায় লোড করার কথা। তবে এটি আমার কম্পিউটারে কাজ করে না।

— খ্রিস্টান জোহানসেন
সূত্র

আপনাকে অনেক ধন্যবাদ এটি গুগল ক্রোমে আমার সমস্যা সমাধান করেছে (Ctrl + shift + R)। ক্যাশেড ফাইলগুলি স্বয়ংক্রিয়ভাবে উপেক্ষা করার কোনও উপায়?

— অ্যালেক্সিস

1

আমি এখন ফ্লাস্কের 1.0.2 সংস্করণ চালাচ্ছি। উপরের ফাইল স্ট্রাকচারগুলি আমার পক্ষে কাজ করে নি, তবে আমি এটির একটি পেয়েছি যা নীচে রয়েছে:

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

(দয়া করে মনে রাখবেন যে 'স্ট্যাটিক' এবং 'টেমপ্লেটগুলি' ফোল্ডার যা ঠিক একই জিনিসটির নামকরণ করা উচিত))

আপনি কোন ফ্লাস্কের সংস্করণটি চালাচ্ছেন তা পরীক্ষা করতে আপনার টার্মিনালে পাইথনটি খুলতে হবে এবং সেই অনুযায়ী নিম্নলিখিতটি টাইপ করতে হবে:

আমদানি ফ্লাস্ক

ফ্লাস্ক - রূপান্তর

— Ly দ্বারা-বাখ
সূত্র

দুঃখিত, তবে আপনি দয়া করে ঠিক কি বর্ণনা করতে পারেন? আমি একই ইস্যু নিয়ে লড়াই করছি!

— user3002996

0

ফ্লাস্ক প্রকল্পের কাঠামোটি আলাদা। আপনি যেমন প্রশ্নে উল্লেখ করেছেন প্রকল্পের কাঠামো একই তবে কেবল সমস্যাগুলি হ'ল শৈলী ফোল্ডার। স্টাইলস ফোল্ডারটি অবশ্যই স্থির ফোল্ডারের মধ্যে আসতে হবে।

static/styles/style.css

— গোপী পি
সূত্র

0

এই থ্রেডে যুক্ত করার জন্য আরও একটি বিষয়।

আপনি যদি আপনার .css ফাইলের নামটিতে একটি আন্ডারস্কোর যোগ করেন তবে এটি কার্যকর হবে না।

— এসডাব্লু জিওং
সূত্র

0

আরও একটি বিষয় যুক্ত করতে হবে above উপরের আপব্যাটেড উত্তরের সাথে সাথে, দয়া করে নিশ্চিত করুন যে নীচের লাইনটি app.pyফাইলটিতে যুক্ত হয়েছে :

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

অন্যথায় ফ্লাস্ক স্ট্যাটিক ফোল্ডার সনাক্ত করতে সক্ষম হবে না।

— সঞ্জয় নন্দকুমার
সূত্র

0

উপরের যে কোনও পদ্ধতি যদি কাজ না করে এবং আপনার কোডটি নিখুঁত হয় তবে Ctrl + F5 চেপে শক্ত রিফ্রেশ করার চেষ্টা করুন। এটি সমস্ত চেস সাফ করবে এবং তারপরে ফাইলটি পুনরায় লোড করবে। এটা আমার জন্য কাজ করে।

— Hackytech
সূত্র

-8

আমি নিশ্চিত যে এটি লারাভেল টেম্পলেটটির অনুরূপ, আমি এভাবেই আমার কাজ করেছি।

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

রেফারার্ড : সিএসএস ফাইলের পথে চলার সমস্যা

সাধারণ ফ্লাস্ক অ্যাপ্লিকেশন যা একটি html ফাইল থেকে এর সামগ্রী পড়ে। বাহ্যিক স্টাইল শীটটি অবরুদ্ধ হচ্ছে?

— nCore
সূত্র

2

আপনাকে ভোট দিতে যাচ্ছে না তবে আপনার উন্নয়নের জন্য, লারাভেল পিএইচপি এবং ফ্লাস্ক পাইথন। তারা একইভাবে কাজ করে না। তাদের খুব আলাদা ডিরেক্টরি স্ট্রাকচার এবং আচরণ রয়েছে।

— মিঃ কনকোলটো

স্ট্যাটিক ফাইলগুলি আমদানি করতে আমাদের সেই স্ট্যাটিক ফাইলগুলি একটি স্ট্যাটিক ফোল্ডারে স্থাপন করতে হবে। আপনার দেওয়া ফোল্ডার কাঠামোটি একটি সাধারণ এইচটিএমএল ফাইলের সাথে কাজ করে। তবে ফ্লাস্কের সাথে নয়

— গোপী পি