#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>

results matching ""

    No results matching ""