Django2.3 Bootstrapでページを美化し、対応する機能を追加
81510 ワード
Bootstrap 3で十分ですが、ここではBootstrapのCSSスタイルでリンクできます
1.ホームページの美化
1.1リンクのインポート
ここではBootstrapのCSSコアファイルをインポートするだけでいいですが、ここではCDNでインポートしたり、ローカルでインポートしたりして面倒なので、後で話しましょう.
1.2ページヘッダと本体部
page-headerはヘッダを指定し、page-bodyクラスはボディ部分を指定します.公式サイトから直接貼ってきた
1.3改ページボタンの追加
navigationクラスにページングボタンを追加し、実装を待つ
1.4 Buttonスタイル
新しい文章をボタンにしてbuttonクラスにします.
index.htmlのコード
2.美化詳細ページ
美化フォームとの差は少なく、ページをめくるボタンが追加されています
3.フォームの美化
3.1フォームをメンテナンスしやすくする
元のフォームにはifelse文があり,フォームが冗長になる(1)ifelseの範囲を縮小する.(2)DTLに存在しない変数が見つかった場合はデフォルトは空であるが,フィルタdefault:‘指定値’は判断でき,変数が存在しない場合は変数を指定値に設定し,存在する場合は変数を元の値とする.フォームのメンテナンスが容易になりました
3.2 Bootstrapによるフォームの美化を開始
実はBootstrapページのものをコピーして貼り付けて調整したものです
4.前編の次の機能を追加
4.1 detailを修正する.html
4.2ビュー関数の変更、パラメータの入力
ここではビュー関数を変更し、前後の文章データを取得する必要があります.
5.ページング機能の追加
5.1ページングモジュールの紹介
https://docs.djangoproject.com/zh-hans/2.2/topics/pagination/公式ドキュメントはmanageを使用します.pyのshell機能
1.ページンググループオブジェクトを作成します.ページを分割するためのリスト、各ページの要素数2.ページンググループのプロパティ、メソッド.3.ページングのプロパティ、メソッド.
5.2実現構想 urlはindex/1が第1ページを表し、index/2が第2ページを表す. ビューレイヤは、現在のページ番号を受け取り、以下のデータ(1)の合計ページ数からなるページ番号をテンプレートに渡し、例えば4ページあれば、[1,2,3,4]を直接表示しやすい.(2)現在のページのページ番号.(3)現在のページの開始から終了までの要素構成のリスト.(4)前ページ、次ページ
5.3テンプレート部分
最後のページングセクションにリンクを追加
5.4ビュー部分
現在のページング情報を取得し、変更します.
5.5デバッグ
最後に発見new_blog.htmlとdetail.htmlにはホームページへのジャンプが必要なときにパラメータを提供し、1を提供すればよいと表示されます.最初のページにジャンプします.
6.最後のコード
しげん
1.ホームページの美化
1.1リンクのインポート
ここではBootstrapのCSSコアファイルをインポートするだけでいいですが、ここではCDNでインポートしたり、ローカルでインポートしたりして面倒なので、後で話しましょう.
1.2ページヘッダと本体部
page-headerはヘッダを指定し、page-bodyクラスはボディ部分を指定します.公式サイトから直接貼ってきた
1.3改ページボタンの追加
navigationクラスにページングボタンを追加し、実装を待つ
1.4 Buttonスタイル
新しい文章をボタンにしてbuttonクラスにします.
index.htmlのコード
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<div class="container page-header">
<h1>
<small>by boysmall>
h1>
div>
<div class="container page-body">
<div class="body-main">
{% for article in articles %}
<div>
<a class="text-info h3" href="{% url 'blog:detail' article.id %}">{{ article.title }}a>
<p class="text-warning lead">{{ article.content }}p>
div>
{% endfor %}
div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
<a class="btn btn-success" href="{% url 'blog:new_blog' 0 %}"> a>
div>
body>
html>
2.美化詳細ページ
美化フォームとの差は少なく、ページをめくるボタンが追加されています
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<div class="container page-header">
<h1>{{ article.title }}h1>
div>
<div class="container page-body">
<div class="body-main">
<p>{{ article.content }}p>
div>
<div>
<a class="btn btn-success" href="{% url 'blog:new_blog' article.id %}"> a>
<a class="btn btn-info" href="{% url 'blog:index' %}"> a>
div>
<nav aria-label="...">
<ul class="pager">
<li><a href="{% url 'blog:detail' previous_article.id %} "> {{ previous_article.title }}a>li>
<li><a href="{% url 'blog:detail' next_article.id %} "> {{ next_article.title }}a>li>
ul>
nav>
div>
body>
html>
3.フォームの美化
3.1フォームをメンテナンスしやすくする
元のフォームにはifelse文があり,フォームが冗長になる(1)ifelseの範囲を縮小する.(2)DTLに存在しない変数が見つかった場合はデフォルトは空であるが,フィルタdefault:‘指定値’は判断でき,変数が存在しない場合は変数を指定値に設定し,存在する場合は変数を元の値とする.フォームのメンテナンスが容易になりました
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form action="{% url 'blog:index' %}" method="post">
{% if article %}
<p> p>
{% else %}
<p> p>
{% endif %}
{% csrf_token %}
<input type="hidden" name="id" value="{{ article.id | default:'0'}}">
<label>
<input type="text" name="title" value="{{ article.title }}">
label>
<br/>
<label>
label>
<br/>
<input type="submit" value=" ">
form>
body>
html>
3.2 Bootstrapによるフォームの美化を開始
実はBootstrapページのものをコピーして貼り付けて調整したものです
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<form action="{% url 'blog:index' %}" method="post" class="form-horizontal">
{% if article %}
<p> :p>
{% else %}
<p> :p>
{% endif %}
{% csrf_token %}
<input type="hidden" name="id" value="{{ article.id | default:'0'}}">
<div class="form-group">
<label for="title" class="col-sm-2 control-label"> label>
<div class="col-sm-10">
<input type="text" name="title" value="{{ article.title }}">
div>
div>
<div class="form-group">
<label for="content" class="col-sm-2 control-label"> label>
<div class="col-sm-10">
<input type="text" name="content" value="{{ article.content }}" }>
div>
div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign inbutton>
div>
div>
form>
body>
html>
4.前編の次の機能を追加
4.1 detailを修正する.html
<nav aria-label="...">
<ul class="pager">
<li><a href="{% url 'blog:detail' previous_article.id %} "> {{ previous_article.title }}a>li>
<li><a href="{% url 'blog:detail' next_article.id %} "> {{ next_article.title }}a>li>
ul>
nav>
4.2ビュー関数の変更、パラメータの入力
ここではビュー関数を変更し、前後の文章データを取得する必要があります.
def detail(request, article_id):
articles = Article.objects.all()
# ，
if article_id == str(1):
#
previous_article_id = str(article_id)
else:
previous_article_id = str(int(article_id) - 1)
if article_id == str(len(articles)):
#
next_article_id = str(article_id)
else:
next_article_id = str(int(article_id) + 1)
# 、 、
article = Article.objects.get(pk=article_id)
previous_article = Article.objects.get(pk=previous_article_id)
next_article = Article.objects.get(pk=next_article_id)
return render(request, "blog/detail.html", {"article": article,
"previous_article": previous_article,
"next_article": next_article,
})
5.ページング機能の追加
5.1ページングモジュールの紹介
https://docs.djangoproject.com/zh-hans/2.2/topics/pagination/公式ドキュメントはmanageを使用します.pyのshell機能
python manage.py shell
from django.core.paginator import Paginator
1.ページンググループオブジェクトを作成します.ページを分割するためのリスト、各ページの要素数2.ページンググループのプロパティ、メソッド.3.ページングのプロパティ、メソッド.
#
objects=['one','two','three','four','five','three']
#
p=Paginator(objects,2)
#
p.count # 6
p.num_pages # 3
#
page1=p.page(1)
page3=p.page(3)
#
# 1.
page1.has_previous()
page1.has_next()
page3.has_previous()
page3.has_next()
# 2.
Page.has_other_pages()
# 3.
page3.start_index()# 5
page3.end_index() #6
# 4.
page1.next_page_number()# 2
page3.previous_page_number()# 2
#
page3.number # 2
5.2実現構想
5.3テンプレート部分
最後のページングセクションにリンクを追加
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Titletitle>
head>
<body>
<div class="container page-header">
<h1>
<small>by boysmall>
h1>
div>
<div class="container page-body">
<div class="body-main">
{% for article in articles %}
<div>
<a class="text-info h3" href="{% url 'blog:detail' article.id %}">{{ article.title }}a>
<p class="text-warning lead">{{ article.content }}p>
div>
{% endfor %}
div>
<a class="btn btn-success" href="{% url 'blog:new_blog' 0 %}"> a>
<div class="body-footer">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="{% url 'blog:index' previous_page %}" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
{% for num in pages_num %}
<li><a href="{% url 'blog:index' num %}">{{ num }}a>li>
{% endfor %}
<li>
<a href="{% url 'blog:index' next_page %}" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
div>
div>
body>
html>
5.4ビュー部分
現在のページング情報を取得し、変更します.
# Create your views here.
def index(request, page): #
# HTTP POST
# page_num
if request.POST.get('title', '') != '':
# POST
id = request.POST['id']
title = request.POST['title']
content = request.POST['content']
if id == '0':
#
Article.objects.create(title=title, content=content)
else:
# ， ，
edited_article = Article.objects.get(pk=id)
edited_article.title = title
edited_article.content = content
edited_article.save()
#
all_articles = Article.objects.all()
paginator = Paginator(all_articles, 3) #
pages_num = paginator.num_pages #
articles = paginator.page(page) #
# ，
if articles.has_previous():
previous_page = str(int(page) - 1)
else:
previous_page = page
if articles.has_next():
next_page = str(int(page) + 1)
else:
next_page = page
return render(request, 'blog/index.html', {'articles': articles, #
'pages_num': range(1, pages_num + 1), # 1 page_num
'current_page': page, #
'previous_page': previous_page, #
'next_page': next_page,
})
5.5デバッグ
最後に発見new_blog.htmlとdetail.htmlにはホームページへのジャンプが必要なときにパラメータを提供し、1を提供すればよいと表示されます.最初のページにジャンプします.
6.最後のコード
しげん