#12 Django ile Blog Sitesi Yapımı IV
Eğitim video linki : https://www.youtube.com/watch?v=w7xmjROI938&t=3s
Template dinamikleştirme
- Dinamikleştirme olayı için views.py dosyasında ufak değişikler yapmalıyız.
from django.shortcuts import render
from django.utils import timezone
from .models import Gonderi
def gonderi_listesi(request):
gonderiler= Gonderi.objects.filter(y_tarihi__lte=timezone.now()).order_by('y_tarihi')
return render(request, 'blog/gonderi_listesi.html', {'gonderiler':gonderiler})
- gonderi_listesi.html doyasını açalım.
<html>
{{gonderiler}}
</html>
- gonderi_listesi.html dosyasını güncelleyelim.
<html>
<head>
<title>Bilgisayar Kavramları</title>
</head>
<body>
<div>
<h1><a href="/">Bilgisayar Kavramları Blog</a></h1>
</div>
{% for gonderi in gonderiler %}
<div>
<h1><a href="">{{ gonderi.baslik }}</a></h1>
<p>{{ gonderi.icerik|linebreaks }}</p>
<a href=""><p>{{ gonderi.tag|linebreaks }}</p></a>
<p>Yayınlandı {{ gonderi.y_tarihi }}</p>
</div>
{% endfor %}
</body>
</html>
Bootsrap ekleme
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='https://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
CSS dosyası ekleme
- blogSitesi/static/css dizininde blog_site.css dosyası oluşturalım.
h1 a {
color: black;
font-family: 'Russo One', sans-serif;
text-decoration:none;
}
.content_container{
margin-left: 270px;
}
h1:hover{
color:green;
font-weight: 900;
background-color: white;
text-decoration:none;
}
.date {
float: right;
color: #828282;
}
.post {
margin-bottom: 70px;
}
hr{
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
width: 750px;
height: 0.5px;
}
.post h1 a, .post h1 a:visited,.post h1 a:hover{
text-decoration:none;
color: #000000;
font-weight: 1200;
}
.post a{
color: black;
font-family: 'Russo One';
font-size: bold;
text-decoration:none;
}
.post a:hover{
font-weight: 900;
background-color: white;
text-decoration:none;
}
- gonderi_listesi.html dosyasının içerisine css dosyamızın yolunu eklememiz gerekiyor.
<link rel="stylesheet" href="{% static 'css/blog_site.css' %}">
- gonderi_listesi.html dosyamızın son hali şu şekildedir.
{% load staticfiles %}
<html>
<head>
<title>Bilgisayar Kavramlar</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='https://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog_site.css' %}">
<body>
<div>
<h1><a href=""><img src="https://i.hizliresim.com/okvjO9.png">Bilgisayar Kavramları Blog Sayfası</a></h1>
</div>
<div class="content_container">
<div class="row">
<div class="col-md-8">
{% for gonderi in gonderiler %}
<div class="post">
<h1><a href="">{{ gonderi.baslik }}</a></h1>
<p>{{ gonderi.icerik|linebreaks }}</p>
<div class="date"> <p>Yayinlandi: {{ gonderi.y_tarihi }}</p></div>
<a href="" class="tag"><p>{{ gonderi.tag|linebreaks }}</p></a>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>