iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

加速你的 Django 網站開發 - Django 的好用套件系列 第 29

29. bootstrap-admin

前篇我們介紹了 grappelli 這個美化 Django Admin 的套件,這篇我們來介紹另外一個也是美化 Django Admin 的套件:bootstrap-admin。

bootstrap-admin 主要是以 bootstrap 3 為基礎來設計的,所以是自適應的,另外一個特點是有 Sidebar 。

專案網址:https://github.com/douglasmiranda/django-admin-bootstrap

安裝

poetry add bootstrap-admin

設定與使用

# settings
INSTALLED_APPS = [
    # ... other ...
    'bootstrap_admin', # always before django.contrib.admin
    'django.contrib.admin',
    # ...
]

# 啟用或關閉 sidebar
BOOTSTRAP_ADMIN_SIDEBAR_MENU = True

把 bootstrap_admin 放到 INSTALLED_APPS 裡,跟 grappelli 一樣,這邊要注意的是,要把 bootstrap_admin 放在 django.contrib.admin 前面。

BOOTSTRAP_ADMIN_SIDEBAR_MENU 是表示啟用或關閉 sidebar (左邊側欄) 的,預設是 True,要關閉的話,得設為 False。

設定好以後,一樣執行 collectstatic

poetry run python manage.py collectstatic --no-input

最後啟動伺服器

poetry run python manage.py runserver

https://ithelp.ithome.com.tw/upload/images/20200929/20012434b1weFaCLUU.png

客製化 LOGO

要變更左上角的 LOGO,可以使用 Django template 的覆寫,Django template 會遇到專案目錄下有同名樣板時,會優先使用,而不使用函式庫裡的樣板。

首先要確定設定裡 TEMPLATES 的路徑

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        # other stuff
    },
]

接著在專案目錄下建立 templates/admin/ ,裡面置入 base_site.html 與 login.html

目錄結構大致是這樣

.
|____static
| |____bootstrap_admin
| | |____img
| | | |____logo-140x60.png
| |____project.css
|____templates
| |____home.html
| |____base.html
| |____admin
| | |____login.html
| | |____base_site.html

templates/admin/base_site.html 的內容

{% extends 'admin/base_site.html' %}
{% load static %}

{% block branding %}
    <a href="{% url 'admin:index' %}" class="django-admin-logo">
        <!-- Django Administration -->
        <img height="60" src="{% static "bootstrap_admin/img/logo-140x60.png" %}" alt="{{ site_header|default:_('Django administration') }}">
    </a>
{% endblock branding %}

templates/admin/login.html 的內容

{% extends 'admin/login.html' %}
{% load i18n static %}

{% block branding %}
    <a href="{% url 'admin:index' %}" class="django-admin-logo">
        <!-- Django Administration -->
        <img height="60" src="{% static "bootstrap_admin/img/logo-140x60.png" %}" alt="{{ site_header|default:_('Django administration') }}">
    </a>
{% endblock branding %}

接下來是 logo ,先建立好 static/bootstrap_admin/img 目錄,然後把新的 logo-140x60.png 放進去以取代原來的 logo。

一樣,要執行 collectstatic

poetry run python manage.py collectstatic --no-input

最後啟動伺服器

poetry run python manage.py runserver

https://ithelp.ithome.com.tw/upload/images/20200929/20012434KwYv5TxMiB.png

這樣就可以看到新增的 LOGO 了。

結語

Django admin 使用 bootstrap-admin 改造過後的畫面也相當好看,跟 grappelli 相比毫不遜色。


上一篇
28. Grappelli
下一篇
30. channels 與最後
系列文
加速你的 Django 網站開發 - Django 的好用套件30

尚未有邦友留言

立即登入留言