Building a Blog Website with Django
To display database contant on a frontend page, integrate Django's routing, views, and models. Start by ensuring the Article model uses an AutoField for the primary key to enable automatic ID generation.
# blog/models.py
from django.db import models
class Article(models.Model):
article_id = models.AutoField(primary_key=True)
title = models.CharField(max_length=200)
content = models.TextField()
author = models.CharField(max_length=100)
published_date = models.DateTimeField(auto_now_add=True)
Run migrations to apply changes:
python manage.py makemigrations
python manage.py migrate
Add articles via the Django admin interface. Configure URLs in the project's urls.py to map routes to views.
# project/urls.py
from django.contrib import admin
from django.urls import path
from blog.views import article_list, article_detail
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', article_list, name='blog_list'),
path('blog/article/<int:article_id>/', article_detail, name='article_detail'),
]
Create views to handle data retreival and template rendreing.
# blog/views.py
from django.shortcuts import render, get_object_or_404
from .models import Article
def article_list(request):
posts = Article.objects.all().order_by('-published_date')
return render(request, 'blog/list.html', {'posts': posts})
def article_detail(request, article_id):
post = get_object_or_404(Article, pk=article_id)
return render(request, 'blog/detail.html', {'post': post})
Design templates for the blog list and detail pages.
<!-- blog/templates/blog/list.html -->
<!DOCTYPE html>
<html>
<head>
<title>Blog Posts</title>
<style>
.container { width: 960px; margin: auto; }
.post-item { background: #f0f8ff; margin: 10px; padding: 15px; }
.post-title { font-size: 1.5em; color: #333; }
.post-meta { color: #777; }
</style>
</head>
<body>
<div class="container">
<h1>Blog Articles</h1>
{% for post in posts %}
<a href="article/{{ post.article_id }}/" class="post-item">
<div class="post-title">{{ post.title }}</div>
<div class="post-meta">By {{ post.author }} on {{ post.published_date }}</div>
</a>
{% endfor %}
</div>
</body>
</html>
<!-- blog/templates/blog/detail.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{ post.title }}</title>
<style>
.content { max-width: 800px; margin: auto; }
.back-link { color: #6495ed; }
</style>
</head>
<body>
<div class="content">
<a href="javascript:history.back()" class="back-link">Back</a>
<h1>{{ post.title }}</h1>
<p><strong>Author:</strong> {{ post.author }}</p>
<p><strong>Published:</strong> {{ post.published_date }}</p>
<div>{{ post.content }}</div>
</div>
</body>
</html>
To add cover images, install Pillow and update the model.
pip install Pillow
# blog/models.py
from django.db import models
class Article(models.Model):
cover = models.ImageField(upload_to='covers/', blank=True, null=True)
# other fields remain
Configure media settings in settings.py.
# settings.py
import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Update URLs to serve media files.
# project/urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Modify the list template to display cover images.
<!-- blog/templates/blog/list.html -->
<a href="article/{{ post.article_id }}/" class="post-item">
{% if post.cover %}
<img src="/media/{{ post.cover }}" alt="Cover" style="width:100px; height:100px;">
{% endif %}
<div class="post-title">{{ post.title }}</div>
</a>
For rich text editing, install django-ckeditor.
pip install django-ckeditor
Add it to installed apps in settings.py.
# settings.py
INSTALLED_APPS = [
'ckeditor',
'ckeditor_uploader',
# other apps
]
CKEDITOR_UPLOAD_PATH = 'uploads/'
Update the Article model to use RichTextUploadingField.
# blog/models.py
from ckeditor_uploader.fields import RichTextUploadingField
class Article(models.Model):
content = RichTextUploadingField()
# other fields
Include CKEditor URLs in the project's urls.py.
# project/urls.py
urlpatterns = [
path('ckeditor/', include('ckeditor_uploader.urls')),
# other paths
]
Run migrations to apply changes.
python manage.py makemigrations
python manage.py migrate
In templates, use the safe filter to render rich text content corrcetly.
<!-- blog/templates/blog/detail.html -->
<div>{{ post.content | safe }}</div>
