网站内容发布系统( 集成百度的Ueditor到我们的系统:2.8.1集成DjangoUeditor编辑器安装DjangoUeditor包 )
优采云 发布时间: 2022-03-09 14:19网站内容发布系统(
集成百度的Ueditor到我们的系统:2.8.1集成DjangoUeditor编辑器安装DjangoUeditor包
)
后台栏目列表:
后台文章名单:
文章编辑页面:
我们已经可以在后台修改并保存文章了,但是编辑新闻你会不会觉得不舒服,没有编辑器,我们把百度的Ueditor集成到我们的系统中吧:
2.8.1 集成的 DjangoUeditor 编辑器
安装 DjangoUeditor 包
由于这个包1.8有bug,已经被我修复了,但是原作者没有上传到pypi,我们直接下载zip,或者git clone一下,
原作者的github地址:直接下载zip(Python 2)
Python 3 开发者:直接下载 zip (Python 2/3)
将DjangoUeditor-master里面的DjangoUeditor文件夹放到news同级目录下,如图:
将 DjangoUeditor 应用程序添加到 minicms/settings.py
INSTALLED_APPS = (
...
'news',
'DjangoUeditor',
)
在 minicms/urls.py 中添加一行:
url(r'^ueditor/', include('DjangoUeditor.urls' )),
Django 1.8.3 urls.py 写的,建议先引入,再使用,即:
from django.conf.urls import include, url
from django.contrib import admin
from DjangoUeditor import urls as DjangoUeditor_urls
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^ueditor/', include(DjangoUeditor_urls)),
]
但是原来的拼写仍然可以使用。
这一段是后来加的,不在github上
为了使上传的图片和文件在本地调试时能够正常显示和下载,
在 minicms/settings.py 中设置静态和媒体
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# 公共的 static 文件,比如 jquery.js 可以放这里,这里面的文件夹不能包含 STATIC_ROOT
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "common_static"),
)
# upload folder
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
在 minicms/urls.py 的末尾添加以下代码:
# use Django server /media/ files
from django.conf import settings
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
安装配置后,修改models.py
# 引入这个 Field,其它的不要变
from DjangoUeditor.models import UEditorField
class Article(models.Model):
...省略
#仅修改 content 字段
content = UEditorField('内容', height=300, width=1000,
default=u'', blank=True, imagePath="uploads/images/",
toolbars='besttome', filePath='uploads/files/')
...
再次打开,发现可以使用了:
后台的功能就说到这里了,以后可以自己完善。
2.9 前端内容展示
我们可以在后台看到栏目和新闻,但是我们不能给用户一个后台账号来阅读这些内容。
我们假设这样的设计,首页显示了一些栏目,每栏显示五个相关的文章,栏目可以点击进入,文章也可以点击进入。
2.9.1 URL 与内容的关系
让我们回顾一下之前的models.py
class Column(models.Model):
...
slug = models.CharField('栏目网址', max_length=256, db_index=True)
...
class Article(models.Model):
...
slug = models.CharField('网址', max_length=256, db_index=True)
...
我们之前已经自定义了 文章 的 URL。假设我们要访问/column/column_slug/访问栏目内容,访问/news/article_slug/查看文章的详情
提示:其实这里有个bug,不同的列,不同的文章 URLs可以是一样的,这个不用管,我们以后会修复的!
我们修改 minicms/urls.py 以添加上述规则:
url(r'^$', 'news.views.index', name='index'),
url(r'^column/(?P[^/]+)/$', 'news.views.column_detail', name='column'),
url(r'^news/(?P[^/]+)/$', 'news.views.article_detail', name='article'),
url(r'^admin/', include(admin.site.urls)),
我们来完善一下这三个视图功能(这里为了告诉你怎么做,我们不需要通用视图,因为通用视图已经给你做了,你什么也学不到)
Homeindex专栏专栏文章详情文章
# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse(u'欢迎来自强学堂学习Django')
def column_detail(request, column_slug):
return HttpResponse('column slug: ' + column_slug)
def article_detail(request, article_slug):
return HttpResponse('article slug: ' + article_slug)
以上是一个通用的框架,我们马上改进,看看参数是怎么传的,可以打开开发服务器python manage.py runserver
访问例如: :8002/column/tech/ (注意端口,将其更改为您自己的)将获得:
我们发现 slug 已经正确地传递给了 views.py 中的视图函数,我们可以使用 slug 来检索对应的列或 view.py 中的 文章。
至此,我们已经知道了列URL和文章 URL的规则,我们现在使用代码生成相关的URL,我们运行python manage.py shell进入带有项目环境的终端
python manage.py shell
相当于下面两句:
python
from minicms.wsgi import *
一旦我们知道了 slug,我们就可以得到相应的 URL:
>>> from django.core.urlresolvers import reverse
>>>
>>> # column
>>> reverse('column', args=('tech',))
u'/column/tech/'
>>> reverse('column', args=('sports',))
u'/column/sports/'
>>>
>>> # article
>>> reverse('article', args=('article_slug',))
u'/news/article_slug/'
>>> reverse('article', args=('windows_10',))
u'/news/windows_10/'
>>>
我们修改models.py,将获取URL的函数写成函数get_absolute_url,然后在模板或者其他脚本中调用。
后台也会默认调用这个函数,可以理解为约定俗成的名字。
from django.core.urlresolvers import reverse
...
class Column(models.Model):
...
slug = models.CharField('栏目网址', max_length=256, db_index=True)
...
def get_absolute_url(self):
return reverse('column', args=(self.slug,))
...
class Article(models.Model):
...
slug = models.CharField('网址', max_length=256, db_index=True)
...
def get_absolute_url(self):
return reverse('article', args=(self.slug,))
...
注意args参数是一个元组,写args=(self.slug)是错误的,注意args=(self.slug,)后面有个逗号
我们再次进入终端 python manage.py shell
>>> from news.models import Column, Article
>>> c = Column.objects.all()[0]
>>> c.get_absolute_url()
u'/column/sports/'
>>> a = Article.objects.all()[0]
>>> a.get_absolute_url()
u'/news/article_1/'
我们可以看到可以通过这种方式获取文章或者columns的url,我们会在下面的模板中展示出来。
2.9.2个相关模板文件
我们先写一个base.html。所有其他模板都继承它。由于 base.html 不属于某个应用程序,它是由整个项目共享的。我们创建一个特殊的模块文件夹来放置其他文件。
比如还有其他的baidutongji.html,把百度统计的代码放进去统计访问量。
我们修改settings.py,在模板目录项目下增加一个templates文件夹。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #修改了这一行
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
在项目目录下创建一个templates文件夹,在里面写一个base.html
模板/base.html 模板文件
{% block title %}欢迎光临{% endblock title %} - 自强学堂
{% block css %}
{% endblock css %}
{% block js %}
{% endblock js %}
{% block content %}
自强 新闻网
{% endblock content %}
{% include "baidutongji.html" %}
上面写的够简单,喜欢BootStrap的同学可以用这个base.html
{% block title %}欢迎光临{% endblock title %} - 自强学堂
{% block css %}
{% endblock css %}
{% block js %}
{% endblock js %}
{% block content %}
自强 新闻网
{% endblock content %}
{% include "baidutongji.html" %}
模板/baidutongji.html
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fab8b04b0bf640ac196520db1cd029664' type='text/javascript'%3E%3C/script%3E"));
2.9.3 查看检索结果并在模板中渲染显示
我们重写视图函数,查询数据库,得到相关内容:
def column_detail(request, column_slug):
column = Column.objects.get(slug=column_slug)
return render(request, 'news/column.html', {'column': column})
def article_detail(request, article_slug):
article = Article.objects.get(slug=article_slug)
return render(request, 'news/article.html', {'article': article})
在news下新建一个templates文件夹,然后在templates下新建一个news文件夹。让我们编写两个模板文件:
列模板,视图传递一个列对象
news/templates/news/column.html(或者项目下的templates/news/column.html路径)Django可以找到
{% extends "base.html" %}
{% block title %}
{{ column.title }}
{% endblock title %}
{% block content %}
栏目简介:{{ column.intro }}
栏目文章列表:
还需要完善
{% endblock content %}
文章模板,视图传递一个文章对象
news/templates/news/article.html(或项目下的templates/news/article.html)
{% extends "base.html" %}
{% block title %}
{{ article.title }}
{% endblock title %}
{% block content %}
文章标题: {{ article.title }}
{{ article.content }}
{% endblock content %}