Вэб хѳгжүүлэлтийг дотор нь хэрэглэгчид харагдах, хэрэглэгчийн харилцах хэсэг болох front-end, тухайн харилцааны үр дүнд(товч дарах, форм бѳглѳх г.м) цаана нь ямар үйлдэл гүйцэтгэх, логик ажиллагааг хийх back-end хэсэг гэж 2 хуваадаг.
Тэгэхээр бид front-end хэсгийг одоо хийнэ. Front-end хѳгжүүлэлтийн шаардлага дүрэм гэх зүйлийг энд бичих нь хэт анхан шатны зүйл учраас алгасъя. Манай нѳхцѳлд блог маань гүүглийн хайлтад ѳртѳх зорилготой тул mobile friendly буюу утсанд зориулсан хувилбартай хийх ёстой. Утас болон компьютероос үзэхэд зориулсан хэрэгслүүд байдгаас хэдийг дурдвал:
- Bootstrap — хамгийн алдартай олонд хүрсэн frontend library
- Foundation — хамгийн ѳндѳр customize хийх боломжит frontend library
- SemanticUI — хамгийн олон компоненттэй frontend library
- Бусад сангуудыг эндээс харж болно
Дээрхээс foundation -ыг сонгон UI(user interface) хэсгээ хийнэ. Шалтгааныг эндээс харж болно. Ер нь л customize хийх тал дээр хамгийн сайн нь болохоор мѳн дээр нь flexbox -ыг маш сайн integrate хийсэн учраас сонголоо.
Эхлээд django дээр template -ын удамшил ашиглах хэрэгтэй. templates хавтас дотор base.html нэртэй файл үүсгэж дотор нь доорх html -ыг бичнэ.
<!DOCTYPE html>
<html lang="mn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo Blog</title>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>Энд html хуудасны стандарт анхны маркапыг бичиж өгсөн түүнчлэн django template хэлний нэг боломж болох block -ыг ашиглан удамшил болгоно. {% block content %} -оос эхлээд {% endblock content %} хооронд өөр хуудасны контентийг гаргана. Ингэснээр зарим хэсгийн маркапыг дахин бичихээс зайлсхийх давуу талтай. Одоо templates/index.html дээр өөрчлөлт оруулна.
{% extends 'base.html' %}
{% block content %}
{% for blog in blogs %}
<a href="{{blog.get_absolute_url}}">{{blog.title}}</a>
{{blog.body}}
<hr>
{% endfor %}
{% endblock content %}templates/index.html дээр {% extends 'base.html' %} -ыг дуудсанаар base.html -ын дотор ашиглахыг зааж өгч, харин {% block content %} -с {% endblock content %} хооронд юу гарахыг нь бичиж өгнө. Ингээд render хийгдэх хуудсыг developer tools ээр нээгээд харвал доорх үр дүн гарна.
Харин одоо base.html болон django -ын template удамшлыг ашиглаад foundation ээ дуудан ашиглая.
Foundation -ын вэб сайтаас өөртөө тохируулан custom build хийн татаж авч болно эсвэл шууд download everything гээд бүгдийг нь татаж авч болно. Хэрвээ вэбийн дуудах хурдыг хурдан байлгана гэвэл хэрэглэхгүй компонентуудыг хасаж татаж авсан нь дээр. Татаж авсан файлыг төслийн хавтас дотор static хавтас үүсгэж дотор нь задална.
demo_project/
blog/
db.sqlite3
demo_project/
manage.py
README.md
static/
css/
foundation.min.css
js/
foundation.min.js
jquery.js
what-input.js
templates/Одоо demo_project/settings.py файлын хамгийн доод хэсэгт доорх кодыг хуулж тавина. Ингэснээр static файлуудын хавтасыг django -д зааж өгнө. Харин статик файлыг дуудахдаа domain-хаяг/static/css/foundation.min.css гэж дуудна гэсэн URL -ыг бас тохируулсан байна.
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)ингээд base.html дээр дараах өөрчлөлтийг оруулна. Django -ын template хэл нь бидэнд static файлууд дуудах нэг боломж {% static ..%}гаргаж өгсөн байгааг ашиглана. Ингэснээр дээр settings.py дээр тохируулж өгсөн хавтаснаас эдгээр файлыг хайх юм.
Жич
base.html-ын хамгийн дээд мөрөнд{% load static %}гэсэн байгааг мартаж болохгүй шүү.
{% load static %}
<!DOCTYPE html>
<html lang="mn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo Blog</title>
<link rel="stylesheet" href="{% static 'css/foundation.min.css' %}">
</head>
<body>
{% block content %}
{% endblock content %}
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/what-input.js' %}"></script>
<script src="{% static 'js/foundation.min.js' %}"></script>
<script>
$(document).foundation()
</script>
</body>
</html>Ингээд серверээ ажиллуулаад python manage.py runserver гээд хөтөчөө нээгээд localhost:8000 руу хандахад дараах үр дүнг харуулна.
Одоо маркап аа бага зэрэг янзалъя foundation-ын document дээрх navbar -ын маркапыг templates/base.html -ын {% block content %} -ын дээд талд байрлуулна.
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
{% block content %} <!-- block content хэсэг -->
{% endblock content %} Дараа нь templates/index.html дээр дараах өөрчлөлтийг оруулая. CSS -ын Flexbox -ыг foundation дээр бас ашиглах боломжтой тул доор ашиглав.
{% extends 'base.html' %}
{% block content %}
<div class="grid-x">
{% for blog in blogs %}
<div class="cell">
<div class="media-object">
<div class="media-object-section">
<h4><a href="{{blog.get_absolute_url}}">{{blog.title|capfirst}}</a></h4>
<p>{{blog.body|truncatechars:'140'}}</p>
<a href="{{blog.get_absolute_url}}">Үргэлжлэл...</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}Энд django дээрх өөрийнх нь template tag болох capfirst ашиглан зөвхөн эхний үсгийг томоор render хийх, truncatechars ашиглан нийт render хийх тэмдэгтийн тоог хязгаарлаж өгч байна. Ингээд эцсийн үр дүнг хөтчөөс харвал:
Өөрчлөлт орсон код github дээр тавигдсан байгаа. Master branch дээр хамгийн сүүлийн өөрчлөлтүүд харин бусад branch(001, 002 …) дээр тухайн нийтлэлд харьяалагдах өөрчлөлтүүд тус тус байна.
Хэрвээ энэ нийтлэл танд таалагдсан бол clap, share хийж бусад хүмүүст ч бас хүргээрэй.
