বাংলায় জ্যাঙ্গো

বাংলায় জ্যাঙ্গো ( python/django tutorail in Bangla) টিউটোরিয়াল সিরিজের আজকের পর্বে আপনাদেরকে স্বাগতম। আজ আমরা আমাদের পেজে style যোগ করে আমাদের ওয়েবসাইটকে রঙিন করে তুলবো।
প্রথমে settings.py ফাইলে নিচের লাইন যোগ করি

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

এটা দ্বারা আমরা জ্যাঙ্গ কে বোঝাচ্ছি যে, তোমার সকল static(css, js) ফাইল static নামের ডিরেক্টরিতে রাখা আছে।
এখন প্রজেক্ট ডিরেক্টরিতে (যেখানে manage.py ফাইল রয়েছে) static নামের ডিরেক্টরি তৈরি করি। এর মধ্যে style.css ফাইল তৈরী করি।
আমাদের html ফাইলকে বলে দিতে হবে যে আমরা কোথায় স্টাইল যোগ করেছি

templates/post_list.html ফাইল খুলে শুরুতে যোগ করি
{% load static %}
staticfiles নামের একটি template tag লোড করলাম। templatetag সম্পর্কে আমরা পরবর্তিতে জানবো। এটি যোগ করার মাধ্যমে আমরা static ব্যাবহার করতে পেরেছি এবং বলতে পেরেছি যে setting এ যে static url আছে তা ব্যাবহার কর ।

<head></head> এর মধ্যে যোগ করি

<link rel="stylesheet" href="{% static 'style.css' %}">

আমাদের post_list.html এর চেহারা হবে:

 

{% load static %}
<html>
   <head>
      <link rel="stylesheet" href="{% static 'style.css' %}">
   </head>
   <body>
      <h1>স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এ </h1>
      <h2>সকল পোষ্ট তালিকা </h2>
      <ul>
      {% for post in post_list %}
         <li>{{ post.title }}</li>
         <br>
      {% endfor %} 
      </ul>
   </body>
</html>

আমরা “স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এ” লেখার রং পরিবর্তন করব । লেখাটি আছে h1 ট্যাগ এর মধ্যে। সুতরাং,
static/style.css যোগ করি:
h1{color:blue}
এভাবে যা ইচ্ছা style যোগ করে আমাদের পেজকে সাজাতে পারি

Bootsrap যোগ করি
bootstrap হল html, css ও javascript ফ্রেমওয়ার্ক যা দিয়ে খুব সহজে ওয়েব ডিজাইন করা যায়। bootstrap পেজ থেকে bootstrap ডাউনলোড করি । ডাউনলোড ফাইল Extract করে css, fonts, js ফোল্ডার আমাদের static ডিরেক্টরিতে রাখি । এবার আমাদের templates/post_list.html এর <head></head> এর মধ্যে Bootstrap ফাইলের Link যোগ করি।

<head>
{% load static %}
   <link rel="stylesheet" href="{% static 'style.css' %}">
   <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
   <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

পেজ রিলোড দিলে পরিবর্তন দেখতে পাবেন।


কিন্তু আমাদের আগের স্টাইল তো কাজ করছে না। এর কারন আমরা bootstrap যোগ করেছি সবার শেষে যার কারনে bootstrap প্রাধান্য পাচ্ছে। আমাদের নিজের স্টাইলকে প্রাধান্য দিতে চাইলে style.css সবার শেষে লিঙ্ক করতে হবে।
আমাদের পেজকে ইচ্ছামত bootstrap দিয়ে সাজিয়ে নিই

#templates/post_list.html

<html>
<head>
{% load static %}

   <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
   <script src="{% static 'js/bootstrap.min.js' %}"></script>
   <link rel="stylesheet" href="{% static 'style.css' %}">

</head>
<body>
   <div class="container">
      <div class="page-header page-header-custom">
         <h1 class="text-center">বাঙলায় জ্যাঙ্গো </h1>
      </div>
      <div class="jumbotron">
         <h2>সকল পোষ্ট তালিকা </h2>
         {% for post in post_list %}
              <h3>{{ post.pk }}-{{ post.title }}</h3>
         {% endfor %}
      </div>
    </div>
</body>
</html>

static/style.css

.page-header-custom{
    background-color: powderblue;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

 পূর্ববর্তী পোষ্ট                                                                               পরবর্তী পোষ্ট

8
Leave a Reply

avatar
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of