Django+boostrap 美化admin后台的操作

工具:Pycharm,Django1.11.9.

1.下载django_admin_bootstrapped

pip install django-admin-bootstrapped

2.打开django项目目录下的settings.py文件,如图添加内容,必须放在django本身的django.contrib.admin前面。

3.运行项目,通过浏览器打开页面,即可看到美化后的admin后台了。

将后台中的英文修改为中文,可以看到只有右上角的英文 "Recent actions",和中间有一个'Applications'。

现在我们来修改它们。

在django_admin_bootstrapped/templates/admin/base.html 中找到"Recent actions",修改为"最近的动作"。

在同一目录下的index.html中找到"Applications",换成"应用程序"。

重新运行项目,进浏览器就OK了。

补充知识:几步带你实现django中引入bootstrap,后端程序员有福了

bootstrap在flask框架中引入很简单,但是由于django是一个封闭式的框架,所以在运用的时候,

有点小麻烦,不过也就几步的事情,多点耐心

下载bootstrap

下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,只能通过这种方式(django是封闭的)

下载的目录结构:

dist文件是bootstrap的核心文件

创建一个简单Demo项目,这是我的项目

注意:在根项目下创建一个static目录,再在static下创建一个bootstrap文件夹,找到并打开setting.py输入如下;(输入到该文件的末尾即可,注意符号)

STATIC_URL = '/static/'

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

找到并打开view.py补充输入如下

#视图函数,返回index.html页面
from django.http import HttpResponse
from django.shortcuts import render
def index(request):
  return render(request, 'index.html')

找到并打开urls.py补充输入如下

from app import view
from django.conf.urls import url

urlpatterns = [
  url(r'^$', view.index),
]

上面我们已经做到把视图函数写好并且加到路由里面,接下来开始放置bootstrap了

打开一开始下载解压后的文件,找到dist文件夹,将里面的的3个文件夹css,fonts,js进行复制

在untitled/static/下新建文件夹bootstrap,将刚才复制的3个文件夹复制到里面,

从一开始下载的bootstrap的解压文件找到docs/examples里面选择一个本次测试的模板,本次我们选择docs/examples/blog/下的index.html,复制粘贴到mydjango/testdj/templates/下,然后改名为base.html,然后用编辑器打开

找到

<link href="../../dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

改为

<link href="/static/bootstap/css/bootstrap.css" rel="external nofollow" rel="stylesheet">

找到

<link href="blog.css" rel="external nofollow" rel="stylesheet">

改为

<link href="/static/bootstrap/css/blog.css" rel="external nofollow" rel="stylesheet">

找到

<script src="../../dist/js/bootstrap.min.js"></script>

改为

<script src="/static/bootstrap/js/bootstrap.js"></script>

我们更改成了自己的路径,可以更好的适应我们的项目结构

找到我们那会下载的/docs/examples/blog/下的blog.css复制粘贴一份到mydjango/testdj/testdj/static/bootstrap/css/里面

然后我们写一个自己的index.html(注意别搞混了)

里面只需要写

{% extends ‘base.html'%}(这是对页面的继承)

ok,运行django, 在django中输入url就可以看到一个博客模板了

下面是我的目录结构

总结: 下载下来的bootstrap包含了很多网页模板,比如导航条, 博客模板等等 以后想使用其他的模板只需要下面几步:

粘贴模板到自己项目的templates下, 到D:\bootstrap\bootstrap-3.3.7\docs\examples\ 下面的模板粘贴到 项目的templates下建立一个base模板

创建static,到setttings中设置检索路径,在这之前还需要把 D:\bootstrap\bootstrap-3.3.7\dist下的的三个文件夹(css, js, fonts)粘贴到static下的bootstrap()自己新建的)下面,

把bootstrap模板中的css文件复制到 static\bootstrap\css 文件中

在templates\base.html中 对css和js 外联路径进行更改,其实就是把原先从网上连接改为本地文件的连接

ok

以上这篇Django+boostrap 美化admin后台的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • django从后台返回html代码的实例

    需求:有时需要直接从后台返回html代码,并带有相应的css,免得在前端再写一堆嵌入代码进行判断. django从 views 往 templates 传输html代码时,默认是不渲染此html代码,原因是为了安全. 而为了渲染html代码,需要额外加上一些代码: from django.utils.safestring import mark_safe deploy_success = mark_safe('<span class="label label-success"&g

  • 浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

    如果是后台上传文件: setting配置: STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), os.path.join(BASE_DIR, "media"), ] # Django用户上传的都叫media文件 MEDIA_URL = "/media/" # media配置,用户上传的文件都默认放在这个文件夹下 MEDIA_ROOT = os.path.join

  • Django+boostrap 美化admin后台的操作

    工具:Pycharm,Django1.11.9. 1.下载django_admin_bootstrapped pip install django-admin-bootstrapped 2.打开django项目目录下的settings.py文件,如图添加内容,必须放在django本身的django.contrib.admin前面. 3.运行项目,通过浏览器打开页面,即可看到美化后的admin后台了. 将后台中的英文修改为中文,可以看到只有右上角的英文 "Recent actions",

  • Django怎么在admin后台注册数据库表

    django在admin后台注册自己创建的数据库表,这样我们就可以在admin后台看到表结构信息,我们就可以在admin后台快速录入表记录信息 如果没有注册,那么你在登录django自带的admin的后台,就看不到我们创建的表结构 登陆django的admin的后台会出现以下界面 这个时候需要把自己创建的数据表也注册到admin中,这个时候就需要在数据表对应的app中找到admin.py文件 加入以下代码: from .models import UserProfile class UserPr

  • 使用django-suit为django 1.7 admin后台添加模板

    django-grappelli里面使用inline似乎有点儿问题,换一个皮: django-suit是2scoops推荐的第二个admin skin. Supports: Django 1.4-1.7. Python: 2.6-3. 本文的环境是django 1.7.1 django-suit官网 安装指导链接 设置攻略 翻译搬运如下: 安装 复制代码 代码如下: pip install django-suit # settings.py from django.conf.global_set

  • Django基于Models定制Admin后台实现过程解析

    简介 效果预览 Django自带一个Admin后台, 支持用户创建,权限配置和所有模型的增删改查功能, 只需要一些简单的配置就可快速得到一个开箱可用的后台管理系统 操作步骤 1. 更改设置,使用中文/亚洲时区 修改项目下django_shop目录下的settings.py文件 修改以下三行 LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_L10N = False 添加以下两行, 已更改时间显示格式 DATETIME_FORMAT

  • 基于Django的Admin后台实现定制简单监控页

    我们使用Django的Admin二次定制一个图形化界面,首先我们把语言设置为中文简体. 修改: settings.py LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' 修改: apps.py from django.apps import AppConfig class MywebConfig(AppConfig): name = 'MyWeb' verbose_name = "服务器参数收集" 接着我们来定义models.p

  • django中的auth模块与admin后台管理方法

    目录 1. auth模块 1.1 auth模块的常用方法 1.2 如何扩展auth_user表 2.admin后台管理 2.1 admin后台管理的准备工作 2.2 为admin后台设置样式和增加数据 1. auth模块 auth模块是对登录认证方法的一种封装,本身就是一个对象,可以获取用户的详细信息,有了auth模块可以验证登录信息是否存在数据库中,还可以检验用户是否已经登录,校验密码等. 在创建完django项目之后,执行数据库迁移之后,数据库里会增加很多新表,其中有一张名为auth_use

  • 把django中admin后台界面的英文修改为中文显示的方法

    创建一个django工程,我使用的django 1.8.2,创建工程后,settings.py中设置中文显示支持定义 LANGUAGE_CODE = 'en-us'#改为zh-Hans 如果改为zh-cn则会报错 报错提示 django IOError: No translation files found for default language zh-cn 即找不到zh-cn对应的本地化文件.一般而言,zh-cn编码对应的本地化文件夹为zh_CN,我去django的安装目录查找zh_CN,结

  • Django 实现admin后台显示图片缩略图的例子

    直接上代码 定义一个upload_img来返回显示图片的html 定义显示图片说明和allow_tags mark_safe方法于django.utils.safestring导入 from django.utils.safestring import mark_safe from django.contrib import admin @admin.register(AliOSSFile) class AliOssUploadAdmin(admin.ModelAdmin): def uploa

  • Django在admin后台集成TinyMCE富文本编辑器的例子

    Django原生的TextField并不友好,集成TinyMCE富文本编辑器 Django版本:1.11.5 TinyMCE版本:4.6.7 第一步:从官网下载TinyMCE https://www.tinymce.com/download/ 注意下载的是下面那个开发包,Dev Package.此包包含TinyMCE社区,开发工具和完整的源代码. 第二步:把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static目录内: 第三步:编辑 admin.py 文件: from

  • django admin 后台实现三级联动的示例代码

    在刚进公司的时候,要写一个需求,使用django的admin站点管理,实现一个二级联动的功能,因为要用到django自带的页面,因为不是自定义的,不能直接添加js代码.根据我自己的研究简单的记录一下大概步骤. 项目创建流程略过,这里使用MySQL数据库和py3为例. 示例项目大概功能,添加一个人物信息,地区通过三级联动选择. 一.项目创建成功后,首先写模型类代码: class AreaInfo(models.Model): """地区模型类"""

随机推荐