Django——设置应用程序的样式（3）

最新推荐文章于 2024-10-16 23:34:20 发布

weixin_47530232

最新推荐文章于 2024-10-16 23:34:20 发布

阅读量94

点赞数

分类专栏： Python 文章标签： python

本文链接：https://blog.csdn.net/weixin_47530232/article/details/109636841

版权

Python 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

设置应用程序的样式

1.添加应用程序django-bootstrap3
安装Bootstrap

(ll_env) D:\Python\Blog>pip install django-bootstrap3

在项目的settings.py中添加应用程序

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    #第三方应用程序
    
    'bootstrap3',
    
    #我的应用程序
    'blogs',
    'users',
    
]

在settings.py末尾添加代码，使django-bootstrap3 包含 jQuery

LOGIN_URL = '/users/login/'

#django-bootstrap3的设置
BOOTSTRAP3 = {
    'include_jquery':True,
}

查看django-bootstrap3的模板可以访问http://getbootstrap.com/

2.设置父模板base.html页面
选择模板Static top navbar

{% load bootstrap3 %} <!--加载django-bootstrap3模板标签集 -->

<!DOCTYPE html>   <!--HTML文档 -->
<html lang='en'>  <!--使用英语 -->
	<head>
		<meta charset='utf-8'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name='viewport' content='width=device-width,initial-scale=1'>
		
		<title>Blog</title> <!--标题栏 -->
		
		<!--自定义模板标签 -->
		{% bootstrap_css %}
		{% bootstrap_javascript %}
		
	</head>
	
	<body>
		<!-- Static navbar -->
		<nav class='navbar navbar-default navbar-static-top'><!--页面导航链接部分 -->
			<div class='container'>
				
				<div class='navbar-header'>
				    <!--窗口太窄时 单击按钮 有下拉列表 -->
					<button type='button' class='navbar-toggle collapsed'
					    data-toggle='collapse' data-target='#navbar'
					    aria-expanded='false' aria-controls='navbar'>
					</button>
					<!-- 导航栏最左边显示项目名 设置为到主页的的链接 -->
					<a class='navbar-brand' href="{% url 'blogs:index' %}">
					   Blog</a>
				</div>
				
				<div id='navbar' class='navbar-collapse collapse'>
				    <!-- 在网站中导航的链接 -->
					<ul class='nav navbar-nav'>
						<li><a href="{% url 'blogs:blogs' %}">Blogs</a></li>
					</ul>
					
					<!-- 第二个导航栏中的链接  出现在导航栏右侧-->
					<ul class='nav navbar-nav navbar-right'>
						{% if user.is_authenticated %}
						<li><a>Hello, {{ user.username }}.</a></li>
						<li><a href="{% url 'users:logout' %}">log out</a></li>
						{% else %}
						<li><a href="{% url 'users:register' %}">register</a></li>
						<li><a href="{% url 'users:login' %}">log in</a></li>
						{% endif %}
					</ul>
				</div> <!-- /.nav-collapse -->
			</div>
		</nav>
		
		<div class='container'> 
			
			<div class='page-header'>
				{% block header %}{% endblock header %}
			</div>
			<div>
				{% block content %}{% endblock content %}
			</div>
		</div> <!-- /container -->
		
	</body>
</html>

3.设置其他页面
设置主页index.html

{% extends "blogs/base.html" %}

{% block header %}
<div class='jumbotron'>
	<h1>Track your life.</h1>
</div>
{% endblock header %}

{% block content %}
<h2>
	<a href="{% url 'users:register' %}">Register an account</a>
	to make your Blog,and list the blogs you're writing now.
</h2>
<h2>
	Whenever you write somethin new, add a content to record your life.
</h2>

{% endblock content %}

设置登录页面login.html

{% extends 'blogs/base.html' %}

{% load bootstrap3 %}  <!-- 加载模板标签 -->

{% block header %}
<h2>Log in to your account.</h2>
{% endblock header %}

{% block content %}

<form method='post' action="{% url 'users:login' %}" class='form'>
	<!--让登录视图处理表单-->
	{% csrf_token %}
	{% bootstrap_form form %} <!-- 样式应用于表单 -->
	
	{% buttons %}
	<button name="submit" class="btn btn-primary">log in</button>
	{% endbuttons %}
	
	<input type="hidden" name="next" value="{% url 'blogs:index' %}" />
	<!--成功登录后重定向到主页-->
</form>

{% endblock content %}

设置new_blog的页面

{% extends "blogs/base.html" %}
{% load bootstrap3 %}

{% block header %}
<h2>Add a new blog:</h2>
{% endblock header %}

{% block content %} 

<form action="{% url 'blogs:new_blog' %}" method='post'
            class = 'form'>
	{% csrf_token %}
	{% bootstrap_form form %}
	
	{% buttons %}
	<button name="submit" class="btn btn-primary">add blog</button>
	{% endbuttons %}
	
</form>

设置blogs页面blogs.html

{% extends "blogs/base.html" %}

{% block header %}
<h1>Blogs</h1>
{% endblock header %}

{% block content %}

<ul>
	{% for blog in blogs %}
	<li>
		<h3>
			<a href="{% url 'blogs:blog' blog.id %}">{{ blog }}</a>
		</h3>
	</li>
	{% empty %}
	<li>No blogs have been added yet.</li>
	{% endfor %}
</ul>

<h3><a href="{% url 'blogs:new_blog' %}">Add a new blog:</a></h3>

{% endblock content %}

设置blog页面中条目的样式blog.html

{% extends 'blogs/base.html' %}

{% block header %}
<h2>{{ blog }}</h2>
{% endblock header %}

{% block content %}
<p>
	<a href="{% url 'blogs:new_content' blog.id %}">add new content</a>
</p>

	{% for content in contents %}
	<div class="panel panel-default">  <!-- 面板式div元素 -->
	    <!-- 面板主体 -->
		<div class="panel-heading">
			<h3>
				{{ content.date_added|date:'M d,Y H:i' }}
				<small>
					<a href="{% url 'blogs:edit_content' content.id %}">edit content</a>
				</small>
			</h3>
		</div>
		<div class="panel-body">
			{{ content.text|linebreaks }}
		</div>
	</div> <!-- panel -->
	{% empty %}
	<li>
		There are no contents for this blog yet.
	</li>
	{% endfor %}


{% endblock content %}