2.4 KiB
2.4 KiB
title: "1.6. Design & Templates"
In diesem Abschnitt wird die Konfiguration vorgenommen um das gemeinsame css und js zu nutzen.
Jinja 2 Templates hinzufügen
In einem ersten Schritt wird ein lokaler Ordner erstellt. Um Jinja2 Templates zu nutzen. und in settings.py referenziert
:::python
TEMPLATES = [ ...
{
'BACKEND': 'django.template.backends.jinja2.Jinja2',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {'environment': 'jinja2.Environment',},
}
Static Files (Css und js)
Sobald wir ein gemeinsames Template festgelegt haben kann dieses dann auf die gleiche Weise genutzt werden. Jetzt werden die gemeinsamen Static Files hinzugefügt settings.py:
:::python
STATIC_URL = '/assets/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/srv/static/design1/',
]
Layout bis wir ein gemeinsames haben
Jetzt kann testweise ein Layout erstellt werden:
layout.html
:::jinja2
{% load static %}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FET Layout</title>
<link rel="stylesheet" href="{% static 'app.css' %}">
{% block header %}
{% endblock %}
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="article.html">Article</a></li>
</ul>
</div>
</div>
{% block content %}
{% endblock %}
<script src="{%static 'app.js' %}"></script>
</body>
</html>
Ein einfaches Home / Hello World Template schaut dann so aus:
:::jinja2
{% extends 'layout.html' %}
{% block content %}
Hello World
{% endblock %}
Damit kann eine einfache views.py Datei erstellt werden:
:::python
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request, 'home.html')
und dieser View in der urls.py eingetragen werden:
:::python
from django.contrib import admin
from django.urls import path, include
from . import views
urlpatterns = [
path('', views.index, name='home')
]