Creare un applicazione blog con django, parte 6: creare template django

 Frank    Feb. 9, 2020    4 min read    6.148

Ora che abbiamo creato viste e modelli di URL per l'applicazione blog. È il momento di creare i template HTML per visualizzare i post in modo amichevole per l'utente. La funzione render() cerca i template HTML all'interno di una directory chiamata templates all'interno della directory della tua applicazione.

Creare le seguenti directory e file all'interno della directory dell'applicazione blog:

(venv) mypc:~/venv/mysite/blog$ mkdir templates

$ cd templates

$ touch base.html

$ mkdir blog

$ cd blog

$ touch post_list.html post_detail.html


# mysite/blog/templates


templates/

   base.html
   blog/
       post_detail.html
       post_list.html

La struttura precedente sarà la struttura di file per i nostri template. Il file base.html includerà la struttura HTML principale del sito Web e dividerà il contenuto nell'area del contenuto principale e nel menu laterale. I file post_list.html e post_detail.html erediteranno dal file base.html per renderizzare rispettivamente i post per viste di lista e dettaglio

Django ha un potente linguaggio di template che ti consente di specificare come visualizzare i dati. Esso è basato su i tag, variabili e filtri:

  • I tag controllano la renderizzazione del template e si rappresentano così {% tag%}.
  • Le variabili vengono sostituite con i valori quando il template viene renderizzato e si rappresentano così {{ variabile }}.
  • I filtri ti consentono di modificare le variabili per la visualizzazione e si rappresentano così {{ variabile|filtro }}.

Puoi trovare ulteriori informazioni su i tag e filtri Django qui .

Ora modifichiamo il file base.html ed aggiungere il seguente codice:

<!-- mysite/blog/templates/base.html -->

{% load static %}
<!DOCTYPE html>
<html>
<head>
 <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>My blog</h2>
     <p>This is my blog.</p>
 </div>
</body>
</html>

{% load static %} dice a Django di caricare i tag statici forniti dall'applicazione django.contrib.staticfiles, che è contenuta nella voce INSTALLED_APPS dentro settings.py. Dopo averlo caricato, puoi utilizzare il tag {% static %} nel template. Con questo tag, puoi includere file statici, ad esempio, come file blog.css. Questo file non esiste ancora, ma lo creeremo presto.

Come puoi vedere ci sono due tag {% block% }. Questi dicono a Django che vogliamo definire un blocco in quell'area. I template che ereditano da questo template possono riempire questi i blocchi con il contenuto. Abbiamo definito un blocco chiamato title e un blocco chiamato content.

Ora modifichiamo il file post_list.html ed aggiungere il seguente codice:

<!-- mysite/blog/templates/blog/post_list.html -->

{% extends "base.html" %}

{% block title %}My Blog{% 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 %}

Con il tag {% extends %}, diciamo a Django di ereditare dal template base.html. Quindi, stiamo riempiendo i blocchi title e content del template di base con il contenuto. Abbiamo iterato tramite i post e visualizzare il loro titolo, data, autore e contenuto, tra cui un link nel titolo per l'URL canonico del post. Nel contenuto del post, abbiamo applicato due filtri: truncatewords tronca il valore al numero di parole specificato e linebreaks converte l'output in tag br di HTML. Puoi concatenare tutti i filtri che desideri; ciascuno di essi verrà applicato all'output generato da quello precedente.

Per creare il file blog.css. Innanzitutto, dobbiamo creare una directory chiamata static nella directory dell'applicazione blog. Django cercherà i file statici lì, in modo simile a come Django trova i template all'interno del blog/templates/.

Creare le seguenti directory e file all'interno della directory dell'applicazione blog:

(venv) mypc:~/venv/mysite/blog$ mkdir static

$ cd static

$ mkdir css

$ cd css

$ touch blog.css

# mysite/blog/static


static/

   css/
       blog.css

Ora modifichiamo il file blog.css ed aggiungere il seguente codice:

/* blog/static/css/blog.css */

body {
   margin:0;
   padding:0;
   font-family:helvetica, sans-serif;
}

a {
   color:#00abff;
   text-decoration:none;
}

h1 {
   font-weight:normal;
   border-bottom:1px solid #bbb;
   padding:0 0 10px 0;
}

h2 {
   font-weight:normal;
   margin:30px 0 0;
}

#content {
   float:left;
   width:60%;
   padding:0 0 0 30px;
}

#sidebar {
   float:right;
   width:30%;
   padding:10px;
   background:#efefef;
   height:100%;
}

p.date {
   color:#ccc;
   font-family: georgia, serif;
   font-size: 12px;
   font-style: italic;
}

Apri il terminale ed eseguire il comando python manage.py runserver per avviare il server di sviluppo. Visita http://127.0.0.1:8000/blog/ nel tuo browser e vedrai tutto in esecuzione. Tieni presente che devi avere i post con lo stato Published per mostrarli qui. Dovresti vedere qualcosa del genere:

Responsive image

Ora modifichiamo il file post_detail.html:

<!-- mysite/blog/templates/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 %}

Ritorna al tuo browser e fai clic su uno dei titoli dei post per dare un'occhiata alla vista di dettaglio di un post. Dovresti vedere qualcosa del genere:

Responsive image

Dai un'occhiata all'URL, dovrebbe essere /blog/2020/1/11/python-my-favorite-Programming-language/. Abbiamo creato un URL da SEO per il nostro blog.

Per ora è tutto. Il prossimo tutorial è di aggiungere l'impaginazione al nostro blog.

Se ti piace il mio contenuto, supportami! grazie.

Buy me a coffeeOffrimi un caffe'

Post correlati