Django website building process (4) Create document display page
-
- Create document display page
-
- The file urls.py in the project main folder schoolapps
- Create url.py file in APP “baseapps”
- Write view
- Template inheritance
- bootstrap
-
- Create head.html
- Create doclist.html
- Create docdetail.html
- Use markdown editor
-
- Install module
- Modifications defined in the documents of the Model model:
- Execute makemigrations and migrate to complete data migration.
- Save image path in markdown
- Modify views.py
- Add markdown to the project’s urls file
- Modify url.py
Create a document display page
Three stages: defining url, view, template
The first page has been created before. include() is used here to facilitate future project expansion.
The file urls.py in the project main folder schoolapps
from django.contrib import admin
from django.urls import path,include #Add include
from baseapps.views import index
from baseapps import url #Add url.py under "baseapps"
urlpatterns = [
path('admin/', admin.site.urls),
path('index/',index),
path('doc/',include(url)), #Map url.py under "baseapps"
]
Create the url.py file in APP “baseapps”
from django.urls import path
from . import views #Import views
urlpatterns = [
path('',views.doclist) #Map to doclist function
]
Writing View
Add the doclist function in views.py
def doclist(request):
return render(request,"index.html")
Create the folder templates in “baseapps” and create a new file index.html in it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
This is a new page
</body>
</html>
Test whether the page is normal, http://127.0.0.1:8000/doc, you will see the web page you just created.
Template inheritance
{%block content%}{%en%}
bootstrap
Global CSS style · Bootstrap v3 Chinese document | Bootstrap Chinese website (bootcss.com) Download Bootstrap, create a static folder under the baseapps folder, create four folders below: css, img, js, and plugins, and put bootstrap into the plugins file clip down
In the component · Bootstrap v3 Chinese Documentation, select the following navigation as the top of the web page,
Create head.html
{% load static %}
<head>
<meta charset="UTF-8">
<title>School Resource Center</title>
<link href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/code.css' %}">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">迴雁馆</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/doc">Campus information <span class="sr-only">(current)</span></a></li>
<li><a href="doc">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"> </span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"> </span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</body>
Create doclist.html
Used to display a document list
{% extends 'head.html' %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="glyphicon glyphicon-list" aria-hidden="true"> Data list</span>
<ol class="breadcrumb">
{% for obj in topic_list %}
<li><a href="/doc/?p={<!-- -->{ obj.id }}">{<!-- -->{ obj.text}}</a></li>
{% endfor %}
</ol>
</div>
<!-- Table -->
<table class="table table-hover">
<tbody>
{% for obj in data_list %}
<tr onclick="location.href='/doc/detail/?nid={<!-- -->{ obj.id }}'">
<td>
{<!-- -->{ obj.title|truncatechars:20 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
Create docdetail.html
Show document details
{% extends 'head.html' %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-subtitles" aria-hidden="true"> Information details</span>
<ol class="breadcrumb">
{% for obj in topic_list %}
<li><a href="/doc/?p={<!-- -->{ obj.id }}">{<!-- -->{ obj.text}}</a></li>
{% endfor %}
</ol>
</div>
<div class="panel-body">
<div class="text-center">
<h1>{<!-- -->{ doc_d.title }}</h1>
<span>{<!-- -->{ doc_d.date_added}}</span>
</div>
<p></p>
<div class="form-group">
{<!-- -->{ doc_d.doc_detail|safe}}
</div>
</div>
</div>
</div>
{% endblock %}
Use markdown editor
Install module
pip install django-mdeditor # used for background editing pip install markdown # Obtain the data from the database in the view, modify it into html statements, and pass it to the front end pip install Pygments # Implement code highlighting
Model definition modification in the documents of the model:
class documents(models.Model):
'''Define the structure of the document'''
topic = models.ForeignKey(topic, on_delete=models.CASCADE, verbose_name='topic type')
title = models.CharField(max_length=30, verbose_name='title')
date_added = models.DateTimeField(auto_now_add=True, verbose_name='time')
author = models.CharField(max_length=20, verbose_name='author')
text = models.TextField(verbose_name='Abstract')
doc_detail = MDTextField() # use markdown
Execute makemigrations and migrate to complete data migration.
Add APP ’mdeditor’ in INSTALLED_APPS of settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'baseapps.apps.BaseappsConfig', #or use baseapps
'mdeditor',
]
Save the image path in markdown
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') #Create a new uploads folder in the project directory MEDIA_URL = '/media/' #The files and images you upload will be stored under /uploads/editor by default. There is no need to create any folders in this step.
Modify views.py
from django.shortcuts import render,HttpResponse
from baseapps.models import documents,topic
import markdown
# Create your views here.
def index(request):
return HttpResponse("First page!")
def doclist(request):
topic_list = topic.objects.all()
data_list = documents.objects.all().order_by("-date_added")
if request.GET.get("p"):
p_id = int(request.GET.get("p"))
s=topic.objects.get(id=p_id)
print(s)
data_list = documentes.objects.filter(topic=s).order_by("-date_added")
contest = {<!-- -->"data_list": data_list,'topic_list':topic_list}
return render(request, "doclist.html",contest)
def docdetail(request):
topic_list = topic.objects.all()
d_id=int(request.GET.get("nid"))
doc_d=documentes.objects.get(id=d_id)
doc_d.doc_detail = markdown.markdown(doc_d.doc_detail,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
]
)
contest={<!-- -->'doc_d':doc_d,'topic_list':topic_list}
return render(request,'docdetail.html',contest)
Add markdown to the project’s urls file
Add image path
from django.contrib import admin
from django.urls import path,include
from baseapps.views import index
from baseapps import url
urlpatterns = [
path('/mdeditor/',include('mdeditor.urls')),
path('admin/', admin.site.urls),
path('index/',index),
path('doc/',include(url)),
path('',include(url)),
]
from django.conf import settings
from django.conf.urls.static import static
#Image display
if settings.DEBUG:
urlpatterns + = static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Modify url.py
from django.urls import path
from baseapps.views import doclist,docdetail
urlpatterns = [
path('',doclist),
path('detail/',docdetail),
]
At this point, the backend displays as follows:
A simple front-end page looks like this:
The details page is shown as follows
