کار با template ها در جنگو
تو این آموزش قراره نحوه کار با template ها در جنگو رو با هم یاد بگیریم.
ساخت قالب HTML برای نمایش Viewها
تا اینجای کار، ما مدل هامون رو ساختیم. Viewهامون رو تعریف کردیم و در نهایت URL هایی رو برای دسترسی به اون view ها ایجاد کردیم.
همونطور که قبلتر هم گفتیم، الگوهای URL ای که تعریف میکنیم برامون هر URL رو به یک view خاص متصل میکنن، بعدش اون view خاص، تصمیم میگیره که چه اطلاعاتی رو باید برای کاربر برگردونه. در نهایت هم template یا همون قالب های HTML مون هستن که نحوه، و شکل و شمایل نمایش داده شدن اطلاعات رو برامون پیاده‌سازی میکنن.
پس حالا که همه کارهامون رو کردیم، فقط میمونه ساختن یه قالب برای نمایش اطلاعات به کاربر:
توی دایرکتوری اپلیکیشن blog، فولدرها و فایلهای زیر رو ایجاد میکنیم:
templates/
blog/
base.html
post/
list.html
detail.html
خب دیگه حالا ساختار template وبلاگمون به شکل بالا هستش.
برای اینکه ساختارمون استاندارد و به راحتی قابل توسعه باشه، یه فایل html با اسم base.html درست میکنیم تا ساختار اصلی همه صفحاتمون بر مبنای اون قرار بگیره و بعداً تو سایر صفحات html مورد نیازمون بیایم و از این base.html ارث‌بری کنیم.
فایلهای list.html و detail.html هم همونطور که شاید از اسمشون متوجه شده باشین، قراره به ترتیب، لیست مطالب و همینطور محتوای کامل هر مطلب رو برامون نمایش بدن.
قسمت مهم:
فریمورک جنگو یک زبان template خیلی قدرتمند داره که به ما اجازه میده مشخص کنیم اطلاعات به چه صورت نمایش داده بشن. حالا یعنی چی در اختیار ما قرار میده؟
3 تا قابلیت مهم در اختیار ما قرار میده: template tag، template variable ، و template filter
حالا اینا هر کدوم چی هستن:
- Template tag : رندر شدن template ما رو این تگ به عهده داره و به این صورت هستش: {% tag %}
- Template variable : هر متغیری که توسط این قابلیت نوشته بشه، در زمان رندر شدن template ما، با مقدار اون متغیر جایگزین میشه. به این صورت نوشته میشه: {{ variable }}
- Template filter : با استفاده از فیلتر های template میتونیم نحوه نمایش داده شدن variable ها رو تغییر بدیم. به این صورت: {{ variable | filter }}
برای مشاهده لیست کامل تگ ها و فیلترهای template میتونین به اینجا مراجعه کنین:
https://docs.djangoproject.com/en/3.0/ref/templates/builtins/
برای شروع کار با template ها، کدهای زیر رو توی فایل base.html قرار میدیم:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/blog.css" %}" rel="stylesheet">
</head>
<body>
<div id="content">
{% block content %}
{% endblock %}
</div>
<div id="sidebar">
<h2>Djangocenter blog</h2>
<p>This is our first blog post in djangocenter.</p>
</div>
</body>
</html>
تو خط اول با نوشتن {% load static %} به جنگو میگیم template tag های static که توسط اپلیکیشن django.contrib.staticfiles توی INSTALLER_APPS قرار گرفته رو برامون لود کن.
بعد از لود کردن template tag های مورد نظر، میتونیم از {% static %} توی قالبمون استفاده کنیم.
با استفاده از این تگ میتونیم از فایلهای استاتیکی مثل blog.css که تو پوشه static اپلیکیشن بلاگ قرار دادیم استفاده کنیم.
مورد دیگه ای که داریم، 2 تا تگ {% block %} هستش. با استفاده از تگ block به جنگو میگیم که میخوایم توی اون نقطه یه فضایی داشته باشیم که بعداً محتوایی که قراره توش باشه رو به ازای هر template ای که از این قالب base.html ارث میبره، مشخص کنیم.
کدهای زیر رو به فایل post/list.html اضافه میکنیم:
{% extends "blog/base.html" %}
{% block title %}Djangocenter Blog List{% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{% endblock %}
با استفاده از تگ تمپلیت {% extends %} از blog/base.html ارث‌بری میکنیم. ( اینطوری به راحتی میتونیم از همه فایلهای استاتیک تعریف شده توی base.html و همینطور سایر المان هایی که توی اون قالب تعریف شده ان توی این قالب هم استفاده کنیم و از کدنویسی های زاید و مضاعف جلوگیری میشه)
کدهای موجود بین block title به جای قسمت block title موجود توی base.html قرار داده میشن.
همینطور کدهای موجود بین block content به جای قسمت block content موجود توی base.html قرار داده میشن.
یه حلفه مینویسیم که همه مطالب موجود توی دیتابیسمون رو برامون در بیاره.
در نهایت همونطور که مشاهده میکنین از template variable و template filter ها استفاده کردیم تا نحوه نمایش محتواهای مورد نظرمون رو تعریف کنیم.
فقط در خصوص template filter در نظر داشته باشین که میشه از چندین تا فیلتر پشت سر هم استفاده کرد. خروجی هر فیلتر، به عنوان ورودی فیلتر بعدی تلقی میشه.
خب، حالا اگر که توی کنسول ترمینال بیایم و python manage.py runserver رو بزنیم، باید سرور ران بشه و با رفتن به آدرس http://127.0.0.1:8000/blog/ توی مرورگر وب، همه مطالب منتشر شده مون رو مشاهده کنیم.
حالا کدهای زیر رو هم توی فایل post/detail.html قرار میدیم تا صفحه هر مطلب خاص رو درست کرده باشیم:
{% extends "blog/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
<h1>{{ post.title }}</h1>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|linebreaks }}
{% endblock %}
حالا توی مرورگرمون روی عنوان یکی از مطالب کلیک میکنیم.
بووووم!
وارد صفحه اون مطلب شدیم 😊
به همین سادگی!
نکته: دقت کنید که حتماً مطلبتون باید منتشر شده باشه و الا با خطای 404 مواجه میشید.
تو این قسمت یاد گرفتیم که چطور برای view های جنگو که ساختیم، بیایم و template مورد نظرمون رو قرار بدیم. (البته دقت کنین که به روش ساده و پایه این کار رو کردیم، برای انجام این کار، به صورت دیگه ای هم میشه عمل کرد که فعلاً اینجا باهاش کاری نداریم)
ضمناً توی این قسمت ما از template خاصی استفاده نکردیم(و حتی css ای رو هم تعریف نکردیم و فقط ساختیمش و گذاشتیم خالی بمونه)
در آینده از قالب های گرافیکی خفنی برای نمایش محتوامون استفاده خواهیم کرد. (که میتونین از طریق دوره ساخت وبلاگ با جنگو نحوه انجامش رو به خوبی یاد بگیرین)
در قسمت بعدی سیستم pagination یا صفحه بندی وبلاگ رو پیاده سازی میکنیم.
میتونین از اینجا وارد آموزش pagination در جنگو بشید.
تو آموزش های بعدی مرکز تخصصی آموزش جنگو، کلی مباحث مختلف و خوب داریم که بتونید هرچی بیشتر با مباحث فریمورک قدرتمند جنگو آشنا بشید و یادشون بگیرید.
سوالات و نظراتتون رو هم حتماً حتماً با ما در میون بذارید.
مطالب زیر را حتما مطالعه کنید
صفحه بندی صفحات در جنگو
ساخت URL برای وبلاگ در جنگو
ساخت view برای وبلاگ در جنگو
manager ها در جنگو
کار با دیتابیس جنگو
دیدگاهتان را بنویسید