开发环境
-
PyCharm 2017.3.2 (Professional Edition)
-
Python 3.6.3
-
windows 10
-
Sqlite3
本文目标
接上文Django2.0笔记(4)-开发个人博客系统（二），本文继续对博客系统进行优化，主要包括:
1. 后台admin页面美化
2. 富文本输入框配置优化
无图无真相，先上效果图：
1
2
3
4
开发过程
后台美化
1.后台美化我们使用django-jet这个库来实现，首先安装django-jet
pip install django-jet
2.修改settings.py，注册应用'jet.dashboard和jet，注意加在django.contrib.admin前面，为实现后台主题切换，还得添加JET_THEMES参数
INSTALLED_APPS = [
'jet.dashboard',
'jet',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'apps.blog',
'django_summernote',
]
# 主题
JET_THEMES = [
{
'theme': 'default', # theme folder name
'color': '#47bac1', # color of the theme's button in user menu
'title': 'Default' # theme title
},
{
'theme': 'green',
'color': '#44b78b',
'title': 'Green'
},
{
'theme': 'light-green',
'color': '#2faa60',
'title': 'Light Green'
},
{
'theme': 'light-violet',
'color': '#a464c4',
'title': 'Light Violet'
},
{
'theme': 'light-blue',
'color': '#5EADDE',
'title': 'Light Blue'
},
{
'theme': 'light-gray',
'color': '#222',
'title': 'Light Gray'
}
]
3.修改urls.py添加路由
from django.contrib import admin
from django.urls import path
from apps.blog import views
from django.conf.urls import include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('home/', views.home, name='home'),
path('articles/<int:id>/', views.detail, name='detail'),
path('summernote/', include('django_summernote.urls')),
path('jet/', include('jet.urls', 'jet')), # Django JET URLS
path('jet/dashboard/', include('jet.dashboard.urls', 'jet-dashboard')), # Django JET dashboard URLS
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
4.创建django-jet所需数据库表
python manage.py migrate jet
python manage.py migrate dashboard
富文本输入框配置优化
1.修改settings.py添加如下代码：
# 富文本编辑器设置
SUMMERNOTE_CONFIG = {
# Using SummernoteWidget - iframe mode
'iframe': True, # or set False to use SummernoteInplaceWidget - no iframe mode
# Using Summernote Air-mode
'airMode': False,
# Use native HTML tags (`<b>`, `<i>`, ...) instead of style attributes
'styleWithSpan': False,
# Change editor size
'width': '80%',
'height': '480',
# Use proper language setting automatically (default)
'lang': 'zh-CN',
}
测试
以上步骤完成以后重启开发服务器，登录后台查看即可。
全部代码已分享至Github：https://github.com/leeyis/jbt_blog
有账户的不妨star一下啦~
网友评论