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后臺的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。