网站内容发布系统( 集成百度的Ueditor到我们的系统：2.8.1集成DjangoUeditor编辑器安装DjangoUeditor包 )

　　网站内容发布系统(

集成百度的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 %}