Django CMS 入门指南（一）

原文：Beginning Django CMS

协议：CC BY-NC-SA 4.0

一、使用 CMS

Electronic supplementary material The online version of this chapter (doi:10.​1007/​978-1-4842-1669-9_​1) contains supplementary material, which is available to authorized users.

在第一章中，我们将从较高的层次上了解什么是内容管理系统(CMS ),并介绍 django CMS:一个基于 django 框架的现代内容管理系统。

我们将从内容管理的简短历史开始，介绍旧的基于纸面的系统的数字版本是如何发展的，以处理每天每分钟在世界各地传播的大量信息。

我将以本书内容的大纲和你将学到的东西的总结来结束这一章。

简史

回到过去的互联网时代(10 年前)，从静态的 HTML 网站到更加动态的交互式网站有一个很强的趋势。这对用户来说很好，但是对网页设计者来说却是一个特殊的挑战。为了迎接挑战，大多数专业网站都是以一种特殊的方式建立的:

• 设计师将创建一个网站的整体设计。
• 设计师将与开发人员合作，将设计分割成一个网站模板，该模板将是普通 HTML 和程序代码的混合；程序代码提供网站的交互功能。
• 然后，设计师将与内容创建者(通常是客户)合作，将网站内容合并到模板中，复制模板并为网站的每个页面创建内容。

在非常小的网站上，这些角色可以由一个人来完成，但是对于较大的网站来说，整个团队的设计者、开发者和内容创建者都需要参与来制作一个复杂的网站。

这种设计方法有一个主要缺陷——代码、内容和设计元素的混合意味着对一个元素的任何更改都有可能影响到其他元素。其后果可能从简单的格式错误到网站功能的重大故障。

这个问题的解决方案是内容管理系统(CMS)，这是一套早在互联网出现之前就已经存在的方法和流程。

内容管理 101

内容管理是对信息(内容)的系统化管理。理解内容管理的一个简单方法是使用一个例子—这本书:

• 作者(我)会把我的草稿交给一个编辑，他会和我一起确保手稿可以交给出版商。
• 出版商将批准最终的手稿出版。
• 然后，出版商会将布局合理的手稿发送给印刷商，印刷商会印制你现在手里拿着的这本书。

当然，实际的过程比这个序列所暗示的要复杂得多，也更具协作性，但是需要注意的重要一点是，过程中的每个人都扮演着一个角色，并且可以独立于其他人而发挥作用；出版商不必知道作者的手艺，作者也不必了解如何印刷一本书。

内容管理角色

网站 CMS 需要的角色类似于制作一本书所需的角色:

• 作者创建文章和页面内容，并显示在网站上。
• 编辑获取作者创作的内容，并对其进行编辑，以适应网站的风格和上下文，并对拼写和语法进行任何更正。编辑通常在网站 CMS 上扮演发布者的角色；通过运行在服务器上的 CMS 软件标记准备向公众显示的内容。
• 尽管越来越多的人倾向于购买现成的模板来满足网站所有者的设计目标，而不是雇佣设计师来创建定制的外观，但设计师在创建网站的整体视觉呈现方面仍然扮演着重要的角色。
• 网站管理员负责网站的后端——为其他用户分配角色、维护内容以及应用备份和更新。在某些情况下，网站管理员也是开发人员——编写代码来改进网站的功能——尽管这种情况越来越少见，您将在下一节中看到。

剖析现代合作医疗

几乎在所有情况下，现代 CMS 都是一个计算机应用，可以是桌面的，也可以是基于云的(或者是两者的结合)。它们允许轻松组织内容，并提供创建、编辑和发布内容的工具。它们使用数据库和文件系统存储来提供灵活和可扩展的数据存储；现代 CMS 能够处理从两页网站到拥有数百万页内容(如在线新闻)的大规模内容发布平台的一切事情。

绝大多数现代网站都在运行某种形式的内容管理系统。WordPress 是历史最悠久、最受欢迎的网站，大约有五分之一的网站运行在互联网上。CMS 软件近年来在普及性和功能性方面呈指数级增长。

CMS 设计的当前艺术状态将我们已经讨论过的所有内容管理工具与三种设计理念相结合，以创建功能丰富、可伸缩且响应迅速的网站:

• 模型/视图/控制器(MVC)架构。解释 MVC 超出了本书的范围，但它是一种软件设计模式，是模块化方法的缩影。在 MVC 中，内容、设计和代码在网站中是物理分离的，而不仅仅是概念上的分离。
• 使用外部应用来增加功能。现代 CMS 允许您“插入”由其他开发人员编写的提供新功能的附加程序，而不是编写新代码，而不是自己编写代码。这些程序从改变格式的简单插件到成熟的应用都有。使用外部应用不仅增加了 CMS 的可靠性，还极大地降低了成本，因为一个开发者可以向许多需要该功能的不同网站出售相同的插件或应用。
• 移动友好。在全球大多数国家，智能手机和平板电脑的使用量超过了台式机。据预测，在未来几年内，向移动计算的转移将继续增加。众所周知，现代 CMS 必须通过提供所谓的响应界面来支持移动设备，该界面可以自动调整网站的内容，以适应查看网站的设备。

django CMS 与其他 CMS 相比有一些关键优势——最明显的是在模块化和功能分离方面比 WordPress 等程序有了显著的改进，后者仍然使用在页面上混合内容和代码的旧模式。其他优势包括:

• 它是多语言的。
• 它支持多个网站。
• 它使用开箱即用的引导程序来支持移动设备。
• 它可以连接到多个数据库。
• 其灵活的页面模型和格式插件的可用性将您从死板的模板布局中解放出来。
• 它提供开箱即用的内容调度。
• 它提供了发布和管理角色的明确分离。
• 它可以很容易地与其他 Django 应用集成，而不需要进行大的修改。
• 其基于插件的设计允许轻松集成电子邮件和第三方应用和内容服务。

django CMS 将所有这些设计元素结合到一个干净、简单的界面中，对于内容创建者、编辑和管理员来说，这是一个很好的界面。django CMS 建立在 django 的基础上，Django 是一个网络内容管理系统，最初是为一家大型美国报纸开发的。它于 2007 年作为开源软件发布，由于其健壮的体系结构和可伸缩性，一直在建立强大的用户基础。

你将学到什么

有了 django CMS，您可以轻松快速地构建功能丰富、无 bug 的网站。这本书将带你经历学习过程；最后是一个基本的博客网站，你可以用它来写自己的博客，或者向雇主展示你的技能。

这本书的目的是教你 django CMS 的设计方法，以及如何用它快速专业地建立一个功能网站；它不是为了给你深入的 django CMS 的技术知识而设计的。为了更深入的理解和更高级的主题，我在第十一章中提供了资源和链接。

让你感受一下接下来会发生什么:

• 在第二章中，你将学习如何在你的电脑上安装 django CMS 及其依赖项。
• 在第三章中，我将提供 django CMS 的概述，包括它的设计理念以及界面和功能的高级视图。
• 在第四章中，您将了解 django CMS 模板，以及它们如何利用 django 的模板引擎和引导程序来创建快速、干净、移动友好的网站。
• 在第五章中，我们将为您的网站构建一整套响应式模板。我将带您浏览每一行代码，这样您就可以彻底掌握如何构建自己的代码。
• 在第六章和第七章中，我们将探索赋予 django CMS 灵活性和强大功能的关键工具:插件。我们将涵盖所有内置插件以及一些重要的第三方插件，这些插件可用于 django CMS。
• 在第八章中，你将学习用 django CMS 组织和管理内容。我们将看看 django CMS 中的用户管理、用户角色和发布周期。在第八章的最后，你将完成一个为你的网站创建内容的练习。
• 在第九章中，你将学习 django CMS 中的菜单和导航。您将学习如何将面包屑导航添加到您的站点，安装社交媒体共享功能，以及生成站点地图。我还将向您展示如何创建自定义菜单。
• 在第十章中，我们将深入探讨 django CMS 的一些更高级的特性:扩展页面和标题模型，扩展工具栏，以及创建定制插件。我们将完成一个自定义插件，你可以用它来为你的网站创建一个右边栏菜单。
• 最后，在第十一章中，我会给你一些提示和资源链接，继续你的 django CMS 之旅。django CMS 可以做很多事情，还有一些我在本书中没有涉及的高级主题。第十一章将帮助你掌握 django CMS 的后续步骤。

摘要

在本章中，我们简要探讨了内容管理的历史以及现代基于计算机的内容管理系统(CMS)是如何工作的。我们已经了解了 django CMS 如何融入这个生态系统，并强调了它的一些主要优势。

我以这本书的简要概述和你可以期待的结尾结束。在下一章中，您将通过安装 django CMS 应用及其依赖项开始使用 django CMS。

二、安装 django CMS

django CMS 是一个基于 Django web 框架的基于 web 的开源内容管理系统。它由位于苏黎世的商业网站开发公司 Divio AG 维护。但是在你开始学习如何使用 django CMS 之前，你必须先在你的电脑上安装一些软件。幸运的是，这是一个简单的三步过程:

Install Python.   Install a Python Virtual Environment.   Install django CMS.

如果这听起来不熟悉，不要担心；在这一章中，我假设你以前从未从命令行安装过软件，我将一步一步地引导你。

虽然 Mac OSX 和 Linux 的用户群一直在增长，但我为大多数使用 Windows 的人写了这一节。您的计算机可以运行任何最新版本的 Windows 操作系统(Windows Vista、Windows 7、Windows 8.1 或 Windows 10)。

这个过程在运行 Mac OSX 和 Linux 的机器上非常相似。如果您使用的是 Mac 或 Linux，不要担心，因为互联网上有大量关于在这些系统上安装 Python 和 django CMS 的说明。有关在这些系统上安装软件的更多信息，请参见第十一章。

Note

Windows 用户，根据您的计算机的配置，您很可能需要以具有管理员权限的用户帐户运行，以便能够安装软件并运行一些命令和命令提示符。

安装 Python

安装 Python 非常简单，但是首先您需要检查 Python 是否已经安装在您的系统上。为此，我们使用一些 Windows 用户可能不熟悉的工具——命令提示符。如果您习惯使用命令提示符，请随意浏览这一部分。

检查是否安装了 Python

命令提示符其实挺有用的。当你学习 django CMS 时，你会经常用到它，所以如果你以前没有用过，现在是时候熟悉一下这个工具了。

要启动命令提示符，需要找到cmd.exe并运行程序。

在 Windows 7 和 Vista 中，单击开始按钮并在搜索程序和文件框中键入cmd。

在 Windows 8.1 和 10 中，在搜索网页和 Windows 框中键入cmd。

在所有版本的 Windows 中，都会出现一个列表—查找名为cmd.exe的文件。点击该文件运行它，你应该会看到一个类似于图 2-1 中的黑框。

图 2-1。

The Windows command prompt Tip

当程序运行时，右键单击任务栏中的 cmd.exe 图标(文本中带有 c:\ _ 的黑色图标)并选择“固定到任务栏”。这样，每当你想运行程序时，你就可以很容易地访问它。

现在我们已经打开了命令窗口，我们需要检查 Python 是否已经安装。这很简单——只需在提示符下键入python,然后按回车键:

C:\Users\YourUsername>python

如果没有安装 Python，您将收到如下消息:

'python' is not recognized as an internal or external command,

Operable program or batch file.

如果安装了 Python，你会得到一个类似于图 2-2 所示的消息，它会打开 Python 交互提示。我们将很快回到 Python 的交互提示。

图 2-2。

The Python interactive prompt Warning

如果您的系统列出的 Python 版本以 2 开头(如 2.7.x)，您运行的是旧版本的 Python，需要安装 Python 3，因为本书中的所有代码都是用 Python 3 编写的。如果需要安装 Python 3，请按照下一节的说明进行操作。

完成后，关闭命令窗口。

下载并安装 Python

假设您的系统中没有安装 Python，我们首先需要获得安装程序。进入 https://www.python.org/downloads/ ，点击黄色的大按钮下载 Python 3.x.x

在撰写本文时，Python 的最新版本是 3.4.3，但在您阅读本文时，它可能已经更新了，因此数字可能略有不同。

不要下载 2.7.x 版本，因为这是 Python 的旧版本。本书中的所有代码都是用 Python 3 编写的，所以如果您试图在 Python 2 上运行代码，将会出现编译错误。如果出于某种原因，您必须使用 Python 2 而不是 Python 3，您将需要修改一些代码。在大多数情况下，这就像将__str__()函数改回__unicode__()并将print()函数修改回print语句一样简单；但是，可能会出现其他错误。有关两个版本之间差异的完整参考链接，请参见第十一章。

下载完 Python 安装程序后，转到下载文件夹，双击文件python-3.x.x.msi运行安装程序。

安装过程和其他任何 Windows 程序一样，所以如果你以前安装过软件，这里应该没有问题；然而，有一个非常重要的定制您必须做。

Caution

不要忘记下一步，因为它将解决 Windows 中因不正确映射pythonpath(Python 安装的一个重要变量)而产生的大多数问题。

当安装程序打开定制窗口时，没有选择“将 python.exe 添加到路径”选项；您必须将其更改为“将安装在本地硬盘上”，如图 2-3 所示。

图 2-3。

The Add python.exe to Path option

一旦 Python 安装完毕，你应该能够重新打开命令窗口，并在命令提示符下键入python，得到与图 2-2 相同的输出。现在就这样做，以确保 Python 已经安装并正常工作。

当你在做的时候，还有一件更重要的事情要做。

通过键入 Ctrl-C 退出 Python。在命令提示符下键入以下内容并按 Enter 键:

C:\Users\YourUsername>python –m pip install –U pip

您现在不需要理解这个命令到底是做什么的；简单来说，pip是 Python 包管理器。它用于安装 Python 包:pip实际上是“Pip Installs Packages”的递归缩写。Pip对于我们安装过程的下一阶段很重要，但是首先我们需要确保我们运行的是最新版本的pip，这正是这个命令所要做的。

安装 Python 虚拟环境

计算机上的所有软件都是相互依赖地运行的，每个程序都有它所依赖的其他软件(称为依赖关系)以及它需要用来查找文件和其他需要运行的软件的设置(称为环境变量)。当你在写新软件的时候，这是可能的(也是常见的！)来修改其他软件所依赖的依赖关系和环境变量。这可能会导致许多问题，因此应该避免。

Note

Python 虚拟环境允许您在自己的机器上运行独立的 Python 实例，不应该与虚拟机混淆。后者是允许你运行整个操作系统和应用的软件，就像它们是一台物理计算机一样。

Python 虚拟环境解决了这个问题，它将新软件所需的所有依赖项和环境变量打包到一个文件系统中，该文件系统独立于计算机上的其他软件。Python 中的虚拟环境工具叫做virtualenv，我们使用pip从命令行安装(图 2-4 ):

图 2-4。

Pip installed successfully

C:\Users\YourUsername>pip install virtualenv

一旦安装了virtualenv，你需要为你的项目创建一个虚拟环境(图 2-5 ):

图 2-5。

Python virtualenv active

C:\Users\YourUsername>virtualenv myCMS

在这种情况下，我将新的虚拟环境称为myCMS，但是您可以随意称呼它。一旦virtualenv完成了新虚拟环境的设置，打开 Windows 资源管理器，看看virtualenv为你创建了什么。

在您的主目录中，您将会看到一个名为\myCMS的文件夹(或者您给虚拟环境起的名字)。如果打开该文件夹，您将看到以下内容:

\Include

\Lib

\Scripts

\src

Virtualenv已经为您创建了一个完整的 Python 安装，与您的其他软件分开，因此您可以在不影响系统上任何其他软件的情况下处理您的项目。要使用这个新的 Python 虚拟环境，我们必须激活它，因此让我们返回到命令提示符并键入以下内容:

C:\Users\YourUsername>myCMS\scripts\activate

这将在虚拟环境的\scripts文件夹中运行activate脚本。您会注意到您的命令提示符现在已经更改:

(myCMS) C:\Users\YourUsername>

命令提示符开头的(myCMS)让您知道您正在虚拟环境中运行。我们的下一步是安装 django CMS 项目。

安装 django CMS

安装 django CMS 的第一步是安装 django CMS 安装程序。这是通过pip完成的:

(myCMS) C:\Users\YourUsername>pip install djangocms-installer

然后，我们必须为 django CMS 项目创建一个项目目录，并进入该目录:

(myCMS) C:\Users\YourUsername>mkdir myCMS-tutorial

(myCMS) C:\Users\YourUsername>cd myCMS-tutorial

最后，我们需要安装 django CMS 支持的网站:

(myCMS) C:\Users\YourUsername\myCMS-tutorial>djangocms –p . mysite

不要忘记“.”在-p和mysite之间！

django CMS 安装程序现在会问你几个问题。在大多数情况下，您只需接受默认设置；但是，有些选项您应该更改。我用粗体突出显示了它们。

Database configuration (in URL format) [default sqlite://localhost/project.db]:

django CMS version (choices: 2.4, 3.0, 3.1, stable, develop) [default stable]:

Django version (choices: 1.4, 1.5, 1.6, 1.7, 1.8, stable) [default stable]:

Activate Django I18N / L10N setting (choices: yes, no) [default yes]:

Install and configure reversion support (choices: yes, no) [default yes]:

Languages to enable. Option can be provided multiple times, or as a comma separated list. Only language codes supported by Django can be used here: en

Optional default time zone [default <your timezone>]:

Activate Django timezone support (choices: yes, no) [default yes]:

Activate CMS permission management (choices: yes, no) [default yes]:

Use Twitter Bootstrap Theme (choices: yes, no) [default no]: yes

Use custom template set [default no]:

Load a starting page with examples after installation (english language only). Choose "no" if you use a custom template set. (choices: yes, no) [default no]: yes

Creating the project

Please wait while I install dependencies

##lots more messages…

Creating admin user

Username (leave blank to use '<yourusername>'):

Email address: enter email address

Password: enter a password

Password (again):

Superuser created successfully.

All done!

一旦安装了 django CMS，您应该能够运行您的全新项目了。在您的项目目录中(如果您在安装后直接启动，您应该还在那里)，您用以下命令运行 Django 开发服务器:

(myCMS) C:\Users\YourUsername\myCMS-tutorial>python manage.py runserver

一旦开发服务器开始运行，你可以在浏览器中输入 http://127.0.0.1:8000 ，默认的 django CMS 模板将会加载，给你一个类似于图 2-6 的屏幕。

图 2-6。

Success! Tip

Windows 用户可能也想考虑安装 Git BASH，它是 Git for Windows 包( https://git-for-windows.github.io/ )的一部分。大多数在线示例都假设您正在运行某种形式的 Unix，因此安装 Git BASH 将允许您运行 Unix 格式的命令行工具，而无需将示例翻译成 Windows shell 命令。

摘要

在这一章中，我们已经介绍了 Python 和 django CMS 的安装和配置，结果是一个漂亮干净(尽管是空的)的 django CMS 网站。在下一章，我们将探索 django CMS 背后的整体结构和设计理念。

三、django CMS 简介

基于 Django 还有许多其他的 CMS 应用；然而，在撰写本文时，django CMS 是最受欢迎的^【1】，并且受到大量用户和开发人员的支持。

就其本身而言，django CMS 并不是一个“即插即用”的网站建设者，非程序员可以选择一个模板，添加一些内容，并在几个小时内建立和运行一个网站。它被特别设计来给开发者和设计者更多的自由来定制他们的网站。

设计原理

可以把 django CMS 想象成一盒乐高积木和一个模型车套件——两者都可以用来建造一辆模型车，但是使用乐高，你几乎可以完全自由地建造任何你喜欢的汽车，而使用套件，你只能得到盒子里的汽车(假设你按照说明操作)。

理解 django CMS 是内容不可知的也是有帮助的，因为它不会对你的内容强加任何固定的结构。django CMS 旨在为您的内容提供发布框架，但是如何构建内容取决于您；您可以自由地做任何事情，从用插件格式化页面上的文本，到放入整个 Django 应用并将它们与 django CMS 菜单和管理挂钩。

django CMS 继承了 django 的大部分设计理念；它执行以下所有操作:

• 实现模型视图控制器(MVC)架构，将表示逻辑与业务逻辑分开。
• 提供可插拔架构，允许轻松添加自包含插件和应用(app ),以扩展网站的功能。
• 默认情况下使用搜索引擎友好的 URL。
• 默认情况下支持多种语言。

为了增强 Django 的内容管理能力，它增加了以下特性:

• 前端编辑—允许结构和内容修改，而不需要专门的管理后端。
• 全触摸界面支持，重点是领先供应商的平板电脑和触摸笔记本电脑。许多手机也可以工作，但你应该注意，django CMS 的触摸功能明确不支持它们。
• 一系列用于常见内容管理任务(如页面编辑)和第三方应用集成(如社交媒体)的预构建插件。
• 所有内容页面的版本控制(历史)。
• 内容创建者轻松的权限管理—可分配的创建/编辑/发布授权。
• 媒体资产管理—文件、图像、视频和动画(Flash)。

当然，没有一个软件包是完美的:django CMS 确实有缺点，有些是因为 django 的局限性，有些是因为 django CMS 的设计方式:

• 它不是为开箱即用的简单内容管理而设计的；你不能像其他 CMS 应用一样，创建一个页面就开始输入内容。您首先需要一个带有占位符的模板；然后，您必须添加至少一个插件，配置插件，并添加您的内容。
• 这对于非常简单的站点来说过于复杂，因为没有简单的方法将 Django 项目从数据库中分离出来，所以即使您不需要数据库，您仍然需要配置一个。
• 在撰写本文时，还没有大量的第三方插件可用。随着 django CMS 越来越受欢迎，可用插件的数量也在不断增加，但是在更成熟的 CMS 应用中有许多功能是现成的，您必须在 django CMS 中自己编写代码。
• 因为 django CMS 和 django 都是正在开发中的开源项目，所以与一些插件和 Django 应用的向后兼容性有时会出现问题。

django CMS 的强大和灵活性很好地弥补了这些缺点。通常，对于构建完全定制的 CMS 比从头构建 CMS 要快得多的应用，您会选择 django CMS，这种应用需要更积极地管理 CMS 的更多技术方面。

django CMS 的结构

django CMS 的结构允许大部分 CMS 管理功能从网站的前端执行，而不是有一个单独的管理后端。django CMS 与大多数其他 cmse 的不同之处在于，它允许您从前端编辑内容和结构，这使得更新、预览和发布基本设计和内容更改变得非常容易。

访问站点编辑器非常简单，只需将字符串?edit附加到主页 URL 上——在我们的示例中，这将是 http://127.0.0.1:8000/en/?edit 。如果您输入的网址正确，您将看到演示网站的首页如图 3-1 所示。

图 3-1。

DjangoCMS home page with edit toolbar displayed

使用您在第一章中输入的管理员用户名和密码登录您的演示网站。登录后，工具栏会变为登录状态，如图 3-2 所示。

图 3-2。

django CMS toolbar changed to edit mode

一旦 django CMS 处于编辑模式，你可以通过下拉菜单访问工具栏中的一系列功能。每个菜单的可用选项将取决于您的访问级别。目前，您以管理员身份登录，因此您将拥有对该站点的完全访问权限。我们将在下一节更详细地探讨工具栏中的功能。

您还可以直接编辑文本和页面结构。将鼠标悬停在(或点击)页面的某些部分会弹出一个上下文编辑链接，允许您编辑内容(图 3-3 )和结构(图 3-4 )。

图 3-4。

Link to edit page structure

图 3-3。

Link to edit page content

你将在第八章中看到如何编辑页面结构和内容。

django CMS 工具栏

对于内容和布局编辑以及网站管理员来说，django CMS 工具栏通过四个下拉菜单提供了管理和更新网站所需的所有工具:

• 站点下拉菜单(默认安装中的 example.com)有许多菜单选项，允许站点管理员管理页面、用户和 Django 管理后端。内容和布局编辑者通常无法访问它。我们将在第八章的中更详细地探讨站点下拉菜单。
• 页面下拉菜单提供对所有页面功能的访问，包括添加页面、编辑、发布和删除页面。根据权限设置，编辑者还可以更改页面模板、页面权限和许多高级设置。第八章也涵盖了下拉页面。
• 历史下拉菜单提供对完整页面历史的访问，能够查看页面更改并恢复到页面的早期版本。更多信息请见第八章。
• 语言下拉菜单允许您管理页面的各种翻译。在这本介绍性的书中，我们将只使用英语，所以我们不会探究这个菜单的功能。

工具栏右侧的四个按钮都与页面结构和编辑相关，将在第八章的中详细介绍。

django CMS 侧窗格

在继续构建我们的演示站点之前，我们还需要了解编辑界面的一个结构元素:侧窗格。如果您选择 example.com➤页面，您将看到侧窗格弹出，如图 3-5 所示。

图 3-5。

The Side pane

几个下拉菜单选项将打开侧窗格，允许您输入附加信息。您会注意到侧窗格右上角的三个小导航选项卡。使用< >箭头显示和隐藏侧面板，使用 X 关闭侧面板。

面向设计者和开发者的 django CMS

网站设计者和开发者会注意到，前端几乎没有什么设计和编码。这是由设计决定的，并遵循与 Django 相同的哲学——设计、代码和内容是三个截然不同的学科，因此需要相互分离。

但是不用担心；django CMS 对于设计人员和开发人员来说和内容编辑人员一样容易使用:

• 对于设计师来说，django CMS 使用一个干净、简单的基于 HTML 的模板系统，不需要任何编码。它还完全支持引导和丰富的内容。第四章和第五章对此有详细介绍。
• 对于开发者来说，django CMS 遵循 django 的可插拔的、面向应用的架构。django CMS 通过插件和 Django apphooks 实现了这一点。我们将在第六章、 7 、 9 和 10 中详细探讨这些话题。

摘要

在这一章中，我们对 django CMS 进行了高层次的观察，查看了它的结构、功能和设计理念。我们研究了它的优点和缺点，并探索了它的设计如何满足设计者和开发者的不同需求。

在下一章中，我们将深入探讨 django CMS 站点模板，向您介绍 django 模板系统的 django CMS 实现，以及它的自定义模板标签，我们将为您自己的博客网站创建站点模板奠定基础。

Footnotes 1

https://www.djangopackages.com/grids/g/cms/

四、网站模板

在这一章中，我们将深入探讨 django CMS 站点模板。我们将从详细回顾 django CMS 模板构建所基于的技术开始。我们将逐步完成 django CMS 安装程序创建的模板，并将它们与您所学的内容联系起来，从而结束这一章。

如果理论一开始让你有点害怕，不要担心；在下一章，我们开始真正有趣的东西，但不要太快跳到前面。一旦你吸收了本章的所有内容，你就再也不会抱怨不懂模板了！

Django 模板 101

django CMS 继承并扩展了 django 的模板系统，因此了解该系统设计背后的核心原则非常重要，即:

• 遗产
• 逻辑和表现的分离
• 展开性

遗产

大多数现代网站都有一个通用的站点范围的设计，其中页面上的某些元素——如页眉、页脚和菜单——在每个页面上重复出现。Django 模板系统使用一种设计模式，其中每个页面都继承了一个基础模板的设计属性，这个模板按照惯例被命名为base.html。(你会在/mysite/templates目录中找到由 django CMS 安装程序创建的base.html模板。)

作为快速复习，让我们看看 Django 的模板继承是如何工作的。基本模板是一个完整的 HTML 文件；清单 4-1 展示了一个base.html文件的最小但有效的实现。

Listing 4-1. A Minimal base.html File

<!doctype html>

<html>

<head>

<title>{% block title %}Default Title{% endblock title %}</title>

</head>

<body>

{% block content %}

This is the content in the base template

{% endblock content %}

</body>

</html>

图 4-1 显示了这个基本模板将如何在浏览器中呈现。

图 4-1。

Rendering of a simple base template

这个最小的例子介绍了 Django 继承背后的关键元素:block 标签。在继承自base.html的子模板中，{%block ... %}和{%endblock ... %}标签之间的任何内容都可以被覆盖。例如，让我们考虑一个基本的子模板(清单 4-2 )。

Listing 4-2. Basic Child Template

#child.html

{% extends "base.html" %}

{% block title %}Title of Child Page{% endblock title %}

{% block content %}

<p>This text will override the block content tag in base.html </p>

{% endblock content %}

图 4-2 显示了子模板将如何在浏览器中呈现。请注意，页面的内容和标题已经在子模板中被覆盖。

图 4-2。

Child template overrides the block tags in base template

在这里发挥全部魔力的元素是{% extends "base.html" %}标签。这告诉模板呈现器child.html扩展(继承)了base.html模板。当渲染器在子模板中找到与基础模板相同的块标记时，子模板中的块将被发送到浏览器。

或者换句话说，当child.html在你的浏览器中呈现时，它的标题和内容块将覆盖基本模板中的块，从而允许每个页面呈现定制内容，而不必复制或修改整个站点的内容。很酷，是吧？

要了解继承在真实的模板中是如何工作的，请看一下mysites/templates中的page.html和feature.html。不要担心其中的许多内容现在没有意义，因为我们很快就会更详细地浏览这些模板。

逻辑和表现的分离

Django 不允许在页面模板中执行任意代码。这意味着您不能在模板中编写代码、分配变量或执行任何类型的程序逻辑。这有一些很好的理由，我在第一章中提到了。然而，关于设计最重要的，也是值得再次提及的是 Django 假设(正确！)大多数网页设计师都不是程序员，不要把程序代码和 HTML 混在一起是非常重要的。

然而，Django 确实提供了许多模板标签和模板过滤器，允许您做出与表示相关的决定。如果您对 Django 比较陌生，那么内置的模板系统非常简单，由四种主要的标记类型组成:

• 变量的格式为{{ value }}。当模板引擎遇到一个变量时，它会对它求值并用结果替换它。变量可以是任何 Python 数据类型。
• 过滤器的格式为{{ value|filter }}。过滤器用于修改变量的显示方式。
• 标签的格式为{% tag %}。它们非常通用，模板引擎可以使用它们来
  • 在输出中创建文本
  • 控制程序流程并执行逻辑
  • 加载外部信息
• 注释的格式为{# comment #}。它们的功能类似于 HTML 注释:注释块中的任何文本都将保留在模板中，为模板设计者或程序员提供信息，但不会呈现给浏览器。这种格式仅适用于单行注释；对于多行，你必须使用{% comment %}...{% endcomment %}块标签。

Django 的模板标签提供了许多有用的函数来显示应用中的数据。例如，for/endfor标签允许简单地迭代列表项，而if/else/endif标签允许简单地决定显示什么内容。Django 的模板过滤器允许对数据进行排序、过滤和格式化。过滤器直接应用于由管道字符分隔的模板变量(在大多数键盘上位于\上方)；比如{{ title|upper }}。您也可以创建自己的自定义模板标签库。自定义模板标签超出了本书的范围；然而，如果你有兴趣，更多信息可以在 https://docs.djangoproject.com/en/1.8/howto/custom-template-tags/ 找到。表 4-1 总结了 Django 最常用的模板标签和过滤器。

表 4-1。

Common Django Template Tags and Filters

| 普通 Django 模板标签 | 描述 | | --- | --- | | `{% if %}` `{% endif %}` | 如果`statement`为真，则呈现标签之间的内容。例如:`{% if article_list %}` `

There are some articles published

` `{% endif %}` | | `{% elif %}` `{% else %}` | 可选标签为`if/endif`流量控制标签。提供与 Python `elif`和`else`语句相同的功能。例如:`{% if article_list %}` `

There are articles published

` `{% elif article_drafts %}` `

There are some articles in draft

` `{% else %}` `

No articles sorry!

` `{% endif %}` | | `{% for %}` `{% endfor %}` | 允许轻松迭代一系列项目。例如:`

• ` `{% for article in article_list %}` `
• {{ article.title }}
• ` `{% endfor %}` `

` | | `{% empty %}` | 可选标签，用于在`for/endfor`语句中的列表为空时呈现错误或消息。例如:`# ... for statement` `{% empty %}` `

No articles sorry!

` `{% endfor %}` | | `upper``lower` | 大写、小写和标题大小写格式。示例:`{{ title|upper }}`如果`title`是“开始 DJANGO”，则输出将是“开始 Django” | | `date` | 如果变量是 datetime 对象，它将根据格式字符串进行格式化。示例:`{{ today|date: "D d M Y" }}`将输出 2015 年 9 月 19 日星期六。`date`格式字符串遵循与 PHP 格式字符串相同的约定。实现这一点是为了让设计人员更容易从 PHP 切换到 Django。 | | `Default` | 如果变量为空，则输出默认值。示例:`{{ value|default:"empty" }}`如果`value`为空，输出将是字符串“empty” | | `first` `last` | 返回列表中的第一个(或最后一个)项目。示例:`{{ article_list|first }}`将输出文章列表中的第一篇文章。 | | `truncatechars` `truncatewords` | 将变量截断到指定的字符/单词数。例如:`{{ title|truncatechars:7 }}`会将“这是标题”截断为“这是”，而`{{ title|truncatewords:3 }}`会输出“这是” |

这只是所有可用的 Django 模板标签和过滤器的一小部分。完整列表请见 http://masteringdjango.com/django-built-in-template-tags-and-filters/ 。

展开性

Django 的模板系统被设计成可扩展的。现在详细说明 django 如何实现这一点并不重要，但是理解 django CMS 如何利用 Django 的可扩展性是很重要的；也就是说，有几个扩展的标记库，包括:

• cms_tags
• sekizai_tags
• menu_tags

CMS 标签

django CMS 实现了 19 个自定义模板标签(列于表 4-2 )。为了加载 django CMS 标签，我们使用 django 的load模板标签:

表 4-2。

django CMS Custom Template Tags

| django CMS 自定义标签 |   | | --- | --- | | `placeholder``static_placeholder``render_placeholder``render_uncached_placeholder``show_placeholder``show_uncached_placeholder``page_lookup``page_url``page_attribute` | `render_plugin``render_plugin_block``render_model``render_model_block``render_model_icon``render_model_add``render_model_add_block``page_language_url``language_chooser``cms_toolbar` |

{% load cms_tags %}

这个加载标签必须放在你的base.html文件的顶部。

我们将在本书的后面使用许多这样的标签，但是现在我们来看看三个最重要的自定义标签:

• placeholder
• static_placeholder
• cms_toolbar

占位符

标签定义了模板中的一个占位符。占位符用作编辑页面时放置插件的容器；例如，这个标签:

{% placeholder "content" %}

在模板中放置一个占位符，当您第一次添加基于模板的页面时，该占位符将呈现为一个空容器。然后，您可以从前端编辑器向容器添加插件，以在页面上呈现内容。

占位符接受编辑器中可用的任何插件，插件可以嵌套。因此，例如，您可以添加一个多列插件来添加两列，然后用一个文本插件填充每一列，以在页面上呈现两列文本。您将在本书的稍后部分看到如何做到这一点。

占位符的名称无关紧要。我在这里使用了名称"content",因为最好的做法是使你的变量名尽可能具有描述性，但是你也可以把占位符称为任何东西。关于占位符名称的主题，请注意，占位符对于页面是唯一的，因此您可以在两个不同的页面上有一个名为"content"的占位符，它们将引用不同的对象。如果你想让一个占位符为多个页面所共有，你需要使用static_placeholder。

如果占位符为空，还可以使用or参数呈现附加内容。要使用r，必须添加一个{% endplaceholder %}结束标签。例如:

{% placeholder "content" or %}Coming Soon!{% endplaceholder %}

placeholder标签也可以从它上面的任何有同名占位符的父页面继承。所以包含这个标签的模板:

{% placeholder "content" inherit %}

将从包含名为"content"的占位符的继承树中它上面的第一个父页面继承content占位符。

可以将inherit与or结合起来，为继承的页面创建一个完整的回退解决方案:

{% placeholder "content" inherit or %}No content anywhere!{% endplaceholder %}

静态 _ 占位符

static_placeholder标签在功能上与placeholder标签相似；但是，它可以在模板中的任何地方使用，通常用于显示站点上任何地方的内容，包括在其他应用中。例如，如果我们创建这个占位符:

{% static_placeholder "footer" %}

并把它放在一个模板文件中(不管是哪一个)，添加一个文本插件和来自前端编辑器的文本"Copyright 2015"，每个实现了名为"footer"的静态占位符的页面也会显示"Copyright 2015"。

当然，将静态占位符放在您的base.html文件中更有意义，尤其是如果它是页脚或页眉之类的东西，但是并不要求您这样做。另一个好处是，如果你决定改变占位符的内容，你可以从任何页面编辑它，它会自动更新其余的内容；您不必返回到基础页面进行编辑。

static_placeholder标签还带有or参数和一个额外的site参数，以允许静态占位符在多站点安装中特定于站点。例如:

{% static_placeholder "footer" mysite or %}

No footer on mysite.

{% endstatic_placeholder %}

注意，多站点安装超出了本书的范围，但是这个例子确实给出了 django CMS 的简单可伸缩性的概念。

cms _ 工具栏

定制标签cms_toolbar使模板引擎能够呈现 django CMS 工具栏。cms_toolbar标签应放在base.html中的<body>标签之后，并且不得包含在块标签中:

# template header information

. . .

<body>

{% cms_toolbar %}

# rest of the template

. . .

关斋标签

Django-sekizai 是一个第三方库，它使用块来呈现 CSS 和 JavaScript 之类的静态媒体文件(sekizai 是日语中“块”的意思)。Sekizai 允许设计人员在模板中扩展和/或添加 CSS 和 JavaScript 文件，而无需编辑底层 Python 文件。

Django-sekizai 提供了css和js名称空间，允许 Django 视图在不改变模板的情况下添加媒体；例如，cms_toolbar定制模板标签会自动将 CSS 和 JavaScript 添加到 sekizai 名称空间中，而无需修改模板。Django-sekizai 还会自动删除重复的内容，因此当媒体文件被多次包含时不会有膨胀的风险。

因为 Django-sekizai 是 django CMS 所必需的，所以安装程序会将必要的模块和设置添加到您的项目中。要将 Django-sekizai 包含在您的模板中，您可以将它加载到您的base.html文件的顶部:

{% load sekizai_tags %}

Django-sekizai 使用起来极其简单；要将它添加到您的模板中，您只需要两个标签:

• render_block
• addtoblock

然而，为了让 Django-sekizai 工作，你必须遵守一些规则

• render_block标记不能在包含的模板中；它们必须在您的base.html文件中。
• render_block标记不能放在 Django 块标记内。
• 如果addtoblock在一个扩展模板中使用(使用{% extends ... %}标签)，它必须包含在块标签中。

Caution

请密切注意这些规则，因为在使用 Django-sekizai 时，它们通常是“无效块标签”错误的来源。更多信息请参见 https://django-sekizai.readthedocs.org/en/latest/#restrictions 。

实际上，这些规则很容易遵守。将{% render_block 'css' %}放在标题中，将{% render_block 'js' %}放在base.html文件的结束体标签之前。例如，清单 4-1 中的基本模板现在看起来像清单 4-3 。

Listing 4-3. Minimal base.html file with Sekizai Tags Added

{% load sekizai_tags %}

<!doctype html>

<html>

<head>

<title>{% block title %}Default Title{% endblock title %}</title>

{% render_block 'css' %}

</head>

<body>

{% block content %}{% endblock content %}

{% render_block 'js' %}

</body>

</html>

然后，当你想要添加 CSS 或 JavaScript 文件到你的一个子模板时，你只需要确保addtoblock被包含在块标签中(清单 4-4 )。

Listing 4-4. Basic Child Template With Sekizai Tags

#child.html (fragment)

{% extends "base.html" %}

. . .

{% block "content" %}

{% addtoblock "js" %}

# Add extra scripts here

. . .

{% endaddtoblock %}

{% endblock %}

标记菜单

menus应用实现了四个额外的定制模板标签，用于在 django CMS 中呈现菜单:

• show_menu
• show_menu_below_id
• show_sub_menu
• show_breadcrumb

我们现在最感兴趣的标签是show_menu(我们将在C章节 10 中讨论其余部分)。为了在模板中启用菜单标签，我们使用 Django 的 load 标签:

{% load menu_tags %}

显示菜单

show_menu标签呈现页面的默认导航菜单。菜单的位置取决于模板的设计。在 django CMS 安装程序创建的演示站点中，默认菜单沿页面顶部水平显示，如图 4-3 所示。

图 4-3。

The Default django CMS menu

在这个例子中，我添加了几个页面和一个子页面。请注意，菜单会自动格式化菜单标题并创建子页面的下拉列表；模板引擎创建菜单(在 Bootstrap 的帮助下),不需要您的任何输入。我们稍后将深入探讨 Bootstrap。添加页面将在本书的稍后部分介绍。

show_menu标签有八个可选参数:

• from_level。开始呈现菜单的节点级别。默认为"0"(根节点)。
• to_level。要渲染的节点深度。默认为"100"，实际意义上是指所有子节点。
• extra_inactive。要在当前非活动节点下呈现的节点数。默认值是"0"，它有效地隐藏了当前活动菜单项下的所有子节点。
• extra_active。要在当前活动节点下呈现的节点数。默认值是"100"，它有效地展开了当前活动菜单项下的所有子节点。
• template。如果指定了一个模板(例如"menu.hml")，django CMS 将在您的应用文件夹中呈现文件/templates/menu.html。如果没有指定，django CMS 将呈现默认的menu.html文件(隐藏在 django 的site-packages目录中)。有关这方面的更多信息，请参见附带的注意事项。
• namespace。模板的名称空间。模板名称空间超出了本书的范围。
• root_id。菜单根页面的 ID。这在呈现子菜单时使用。
• next_page。这将检索指定页面 ID 的所有子页面，并将它们呈现在菜单中。

Caution

使用show_menu时，最好总是指定一个模板。Django 的核心理念之一是可移植性，因此所有特定于应用的模板都应该位于该应用的模板目录中。如果您不这样做，对 django CMS 默认模板的更改可能会破坏您的站点。

因为传入位置参数(而不是关键字参数)更容易、更简洁，所以垂直菜单最常见的show_menu形式如下:

{% show_menu 0 100 0 100 "menu.html" %}

这将显示从根开始的整个菜单，非活动子菜单折叠，活动菜单展开。对于水平菜单(如我们的演示应用)，它看起来像这样:

{% show_menu 0 1 100 100 "menu.html" %}

这将只显示菜单中的顶级页面，并展开活动菜单项上的子菜单项。

你可能会问自己为什么extra_inactive是100而不是0，因为将它设置为100会展开所有非活动菜单项的子菜单，这是我们不想要的——对吗？

是的，但是我们使用这个技巧来利用 Bootstrap 的一个特性—非活动节点会自动折叠，Bootstrap 会显示下拉箭头图标，这样您就知道父菜单项有子菜单项。如果您将extra_inactive设置为0，您将看不到下拉箭头，除非菜单项处于活动状态。

引导程序

回到第一章，我说过一个现代的网站必须是移动友好的，以迎合现在连接到互联网的众多设备。但是手机友好到底是什么意思呢？

虽然这个问题有许多有时是矛盾的答案，但灵活性是关键:移动设备类型的数量以及它们运行的操作系统多得令人难以置信，一个支持尽可能多的设备的网站需要具有适应性。为了具有灵活性和适应性，站点功能可以归结为三个简单的要求:

• 反应灵敏。这是一个行业术语，但它意味着您的网站将根据设备自动调整大小和重新排列内容。一个设计良好的响应型网站将为使用智能手机的访问者提供与使用 28 英寸显示器的桌面浏览相同的积极用户体验。
• 合规。Android、iOS、OSX、Windows、Linux:他们都有不同的做事方式，不兼容的系统软件，不同的字体和多个浏览器版本。一个移动友好的网站必须能够提供在不同系统上正确呈现的内容。
• 速度。移动数据速度通常较慢，与台式机和笔记本电脑相比，移动设备的处理能力通常较弱。如果你的网站加载速度不快，大多数移动用户会转向竞争对手的网站。

虽然在互联网的服务器端仍然有大量的多样性，但这些需求已经将浏览器端缩减为三种基本技术——CSS、HTML 和 JavaScript。

但是，将这些技术结合起来从头开始构建一个网站是非常困难的，这导致了许多前端 web 框架的出现，这些框架使得使用这些技术的网站的设计、开发和管理变得更加简单。

Bootstrap 最初是两名 Twitter 员工的想法，于 2011 年作为开源技术发布。在此后的四年中，它已经成为前端框架中 800 磅重的大猩猩。Bootstrap 是如此受欢迎，以至于它现在是几乎所有 CMSes 和大型定制站点实现响应式设计的默认框架。

对 Bootstrap 的全面解释超出了本书的范围；然而，对一些关键概念的简单介绍将使设计 django CMS 响应式模板变得容易得多。

自举网格系统

引导网格是一个 12 列、无限行的流体网格系统，可以根据设备自动重新格式化和缩放。网格的确切布局以及它在每个屏幕尺寸上的行为是由预定义的 CSS 类控制的(见下一节)。网格的每个单元格都包含一个 HTML <div>...</div>块，您可以在其中放置任何合法放置在无响应模板的div标记之间的内容。用一个简单的例子来说明这一点更容易。图 4-4 显示了一个带有两栏和右键菜单的简单页面在台式电脑上的样子。

图 4-4。

Responsive template on a desktop computer

在像平板电脑这样的小屏幕上，设计可能看起来像图 4-5 。

图 4-5。

Responsive template on a tablet

在智能手机上，这种设计可能看起来像图 4-6 。

图 4-6。

Responsive template on a smartphone

这是一个非常简单的例子，但是 Bootstrap 足够灵活和强大，可以创建非常复杂的设计，并且不需要任何程序代码。我听到你问，它是怎么做到的？这就是我们接下来要看的——CSS 类和组件。

引导 CSS 类

Bootstrap 用非常复杂的样式表实现了它的格式化魔力，这些样式表定义了 600 多个用于格式化和样式化 HTML 元素的类。这些类别分为八个功能组:

• 网格系统。根据设备大小格式化网格的类别—超小型(xs)、小型(sm)、中型(md)和大型(lg)—带有列跨越修饰符。例如，col-xs-4类在一个特别小的屏幕(智能手机)上跨越四列。
• 排版。文本样式，如标题、正文、内联文本格式、对齐和特殊格式，如块引号、地址和文本转换。
• 代码。内联和代码块、用户输入和变量格式。
• 桌子。格式和颜色、大小和鼠标交互。
• 表格。表单和表单控件的复杂格式。
• 纽扣。显示选项、颜色和大小。
• 图像。图像大小调整和整形。
• 助手功能。用于上下文着色、clearfix、屏幕阅读器功能以及根据屏幕大小显示和隐藏列的杂项类。

Bootstrap 的 CSS 使用 Less，这是一个 CSS 预处理器，它添加了许多函数，包括变量、混合和编译 CSS 的函数。例子包括:

• 灰度颜色，如，@gray, @gray-dark, @gray-light。
• 语义色彩，比如@brand-primary, @brand_info。
• CSS 中颜色变量的使用，比如background-color: @brand-primary。
• 排印基底，如@font-family-base, @font-size-base。
• 排版混合，如@font-size-h1: floor((@font-size-base* 2.6));
• 链接样式，如@link-color, @link-hover-color

我们将不会在这里进一步探索引导类；我只是想让你在使用 Bootstrap 时体验一下所有有用的设计元素，并帮助你理解当你用 django CMS 构建一个站点设计时，你不必重新发明轮子。要全面了解自举，请参考 http://getbootstrap.com/css/ 。

django CMS 利用了 Bootstrap 的强大功能，因此，django CMS 的默认模板不仅利用了 Bootstrap 类，而且您还可以在自己的模板中轻松实现它们。

引导组件

为了结束我们关于 Bootstrap 的部分，我们只需要简单地谈一谈另一件事——组件。引导组件是可重用的代码，通常是 CSS 和 JavaScript 的混合。django CMS 使用了许多引导组件，包括下拉菜单、导航、提醒和大屏幕。其他组件包括:

• 图像(glyph)
• 按钮组和下拉列表
• 页码
• 面包屑
• 拇指甲
• 进度条
• 面板和井

Note

我们仅仅触及了 Bootstrap 的表面。虽然没有必要更深入地研究 Bootstrap 来理解这本书的其余部分，但是通过书签getbootstrap.com/getting-started/和花几个小时深入理解 Bootstrap 及其功能，你作为一名职业程序员的未来将会受益匪浅。

把这一切联系在一起

我们在这一章已经讲了很多内容，现在是时候把你所学的东西联系起来了。我们将通过检查由 django CMS 安装程序生成的模板文件来做到这一点。

假设您使用了与第二章中的安装示例相同的文件名，您将在中找到这些模板

C:\users\<yourusername>\myCMS-tutorial\mysite\templates\

我们将从清单 4-5 中所示的base.html文件开始(注意:为了提高可读性，一些 URL 被缩短了):

Listing 4-5. Complete sample base.html file

1.  {% load cms_tags staticfiles sekizai_tags menu_tags %}

2.  <!doctype html>

3.  <html>

4.    <head>

5.      <meta charset="utf-8">

6.      <title>

7.        {% block title %}

8.          This is my new project home page

9.        {% endblock title %}

10.     </title>

11.     <meta name="viewport" content="width=device-width,initial-scale=1">

12.     <link rel="stylesheet" href="``https://cdnjs ... bootstrap.min.css

13.     <link rel="stylesheet" href="``https:// ... bootstrap-theme.min.css

14.     {% render_block "css" %}

15.   </head>

16.   <body>

17.     {% cms_toolbar %}

18.     <div class="container">

19.       <div class="navbar navbar-default" role="navigation">

20.         <div class="navbar-header">

21.           <button type="button" class="navbar-toggle"

data-toggle="collapse" data-target=".navbar-collapse">

22.             <span class="sr-only">Toggle navigation</span>

23.                  <span class="icon-bar"></span>

24.                  <span class="icon-bar"></span>

25.                  <span class="icon-bar"></span>

26.                </button>

27.                <a class="navbar-brand" href="#">Project name</a>

28.             </div>

29.             <div class="navbar-collapse collapse">

30.                 <ul class="nav navbar-nav">

31.                     {% show_menu 0 1 0 100 "menu.html" %}

32.                 </ul>

33.             </div>

34.         </div>

35.         {% block content %}{% endblock content %}

36.     </div>

37.     <script src="``https://cdnjs ... jquery.min.js

38.     <script src="``https://cdnjs ... bootstrap.min.js

39.     {% render_block "js" %}

40.   </body>

41\. </html>

现在，您面前已经有了完整的列表，让我们来看一下最重要的部分:

• 一号线。Django 的load标签接受多个参数，所以我们一次性加载了所有的扩展标签库。
• 第 7 到 9 行。这里 Django 的块标签用于定义页面的标题块。此代码将被定义标题栏的任何子模板覆盖。
• 第 14 行。这是 Sekizai render_block标记，用于在文件顶部呈现 CSS。
• 第 17 行。这是我们将 django CMS 工具栏加载到页面中的地方。
• 第 19 到 34 行。这是在 Bootstrap 中实现的页面导航栏。为了让导航条显示任何东西，你必须给它传递一个列表，我们在第 31 行用我们的show_menu标签做了这个。出于好奇，第 21 到 26 行是 Bootstrap 如何呈现小屏幕上显示的“hamburger”图标，而不是完整的菜单。
• 第 35 行。这里 Django 的 block 标签用于定义页面的内容块。这将被定义内容块的任何子模板覆盖。
• 第 39 行。这是 Sekizai render_block标记，用于在页面底部呈现 JavaScript。使用它是提高页面加载速度的最佳实践。

正如你所看到的，一旦你知道每一行是做什么的，这就很容易理解了。作为练习，我留下了剩下的三个示例模板— page.html, feature.html和menu.html—供您自己检查，以提高您的理解，但这里有一些快速注释可以帮助您:

• Page.html和feature.html对应 Django 编辑器前端的page和page with feature模板。我们将在下一章深入探讨页面模板。

• page.html和feature.html都扩展了base.html。

• You will notice that our sample home page (Figure 2-6) uses the feature.html template. The banner at the top is rendered by Bootstrap’s jumbotron class. Add a new page and select the “page” template, and you will see a blank page template (Figure 4-7).

  

  图 4-7。

  The blank page template

• 注意在page.html和feature.html中 django CMS 占位符标签的使用。

• 注意menu.html如何使用 Django 的if/endif和for/endfor标签迭代菜单中列出的所有页面。

摘要

本章到此为止。我们已经非常详细地介绍了模板，现在您应该对如何构建 django CMS 模板有了非常扎实的基础。您还应该熟悉 Bootstrap 的基础知识，以及 django CMS 如何利用 Bootstrap 的 CSS 类来创建一个在大多数设备上都很好看的现代站点模板。

在下一章，我们将继续有趣的东西——设计你自己的模板。

五、你的博客网站：模板

现在您已经对 django CMS 模板的构造有了一个全面的了解，是时候为您的博客网站构建模板了。在本章中，您将:

Start with a fresh, empty install of django CMS.   Create your own base.html template.   Create a CSS file to apply custom styling to your blog.   Create a new template, blogpage.html, that will display a single blog post along with a right sidebar menu listing all posts.   Edit your setting file to apply the new templates to your blog site.   Note

本章中的所有源代码都可以从该书的网站上下载；但是，建议您第一次通过自己键入文件。有时候这可能会很乏味，但是这样做你肯定会学到更多。

创建全新安装

我们想为我们的博客站点安装一个完全空的 django CMS，所以第一步是创建一个新的虚拟环境(称之为myBlog)并将 django CMS 安装在一个名为myBlogProject的新项目目录中。

创建新安装的步骤与您在第二章中所采取的步骤几乎相同，但是我将简要地一步一步来提醒您(所有命令都是在命令提示符下输入的):

Enter Virtualenv myBlog.   Enter myBlog\scripts\activate, and the command prompt should change to (myBlog) C:\Users\YourUsername>.   Enter pip install djangocms-installer.   Enter mkdir myBlogProject.   Enter cd myBlogProject.   Enter djangocms -p . myblog.   Configuration is almost the same: accept all defaults, except enter en for language and yes to use Bootstrap. This time we don’t was the demo starting page, so we accept the default no for the last question.

我在清单 5-1 中包含了您的命令窗口输出的编辑版本，让您对应该看到的内容有所了解。不会完全一样，但应该很接近。如果一切按计划进行，当您在浏览器中导航到 http://127.0.0.1:8000/ 时，您应该看到 django CMS 登录页面(图 5-1 )。

图 5-1。

A clean install of django CMS Listing 5-1. Command Window Output

Microsoft Windows [Version 10.0.10240]

(c) 2015 Microsoft Corporation. All rights reserved.

C:\Users\Nigel>virtualenv myBlog

Using base prefix 'c:\\python34'

New python executable in myBlog\Scripts\python.exe

Installing setuptools, pip, wheel...done.

C:\Users\Nigel>myBlog\scripts\activate

(myBlog) C:\Users\Nigel>pip install djangocms-installer

Collecting djangocms-installer

Downloading djangocms_installer ... #elipsis = additional text removed

...

Installing collected packages: ...

Successfully installed ...

(myBlog) C:\Users\Nigel>mkdir myBlogProject

(myBlog) C:\Users\Nigel>cd myBlogProject

(myBlog) C:\Users\Nigel\myBlogProject>djangocms -p . myblog

Database configuration (in URL format) [default sqlite://localhost/project.db]:

django CMS version (choices: 2.4, 3.0, 3.1, stable, develop) [default stable]:

Django version (choices: 1.4, 1.5, 1.6, 1.7, 1.8, stable) [default stable]:

Activate Django I18N / L10N setting (choices: yes, no) [default yes]:

Install and configure reversion support (choices: yes, no) [default yes]:

Languages to enable. Option can be provided multiple times, or as a comma separated list. Only language codes supported by Django can be used here: en

Optional default time zone [default Australia/Sydney]:

Activate Django timezone support (choices: yes, no) [default yes]:

Activate CMS permission management (choices: yes, no) [default yes]:

Use Twitter Bootstrap Theme (choices: yes, no) [default no]: yes

Use custom template set [default no]:

Load a starting page with examples after installation (english language only). Choose "no" if you use a custom template set. (choices: yes, no) [default no]: no

Creating the project

Please wait while I install dependencies

...

Dependencies installed

Creating the projectOperations to perform:

...

Synchronizing apps without migrations:

Creating tables...

Installing custom SQL...

Installing indexes...

Running migrations:

...

Creating admin user

Username (leave blank to use 'nigel'):

Email address: <your email>

Password: <enter a password>

Password (again):

Superuser created successfully.

All done!

Get into "C:\Users\Nigel\myBlogProject" directory and type "python manage.py runserver" to start your project

(myBlog) C:\Users\Nigel\myBlogProject>

登录后，您将看到 django CMS 内容创建向导，这是一个简单的自动化工具，用于向您的 django CMS 网站添加内容。目前，我们只有默认的新页面内容向导(图 5-2 )。我们将在第十章中更深入地讨论内容向导。

图 5-2。

The django CMS content creation wizard

继续并选择下一步创建您的新页面。如果需要，输入主页作为页面标题和一些内容。在这个阶段，内容是可选的，因为我们将在本书的稍后部分向该页面添加更多内容。选择屏幕右下角的 Create，刷新你的浏览器，你的站点应该如图 5-3 所示。

图 5-3。

Your new but completely empty website

创建您的基础模板

在这个阶段，你的博客站点看起来很空很无聊，所以是时候建立我们的新模板了。我们将从基础模板开始。为此，我们需要

Rename \myblog\templates\base.html to base.html.old.   Create our new base.html file (Listing 5-2) and save it to \myblog\templates\.   Create our custom CSS file, myblog.css (Listing 5-3), and save it to \myblog\static\.   Create a 50×50 pixel logo and save it to \myblog\static\logo.png. It does not matter what the logo is, but a simple design on a transparent background works best. You can use a program like Microsoft Paint or GIMP to do this (or Photoshop if you have it). I have also included a simple logo in the source code if you don’t want to create your own.   Download ie10-viewport-bug-workaround.js ^`` [^{1 ]} and save it to \myblog\static\. This is a workaround put out by Bootstrap (introduced in Chapter 4) to solve a bug in Internet Explorer on Windows 10. If you are not planning to deploy your website, you don’t have to add this file.   Listing 5-2. Our base.html File

{% load cms_tags staticfiles sekizai_tags menu_tags %}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="favicon.ico">

<title>{% block title %}MyBlog Title{% endblock title %}</title>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css

<!-- MyBlog custom styles -->

<link href="{% static "myblog.css" %}" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js

<![endif]-->

{% render_block "css" %}

</head>

<body>

{% cms_toolbar %}

<nav class="navbar navbar-default navbar-static-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a href="#"><img src="{% static "logo.png" %}" /></a>

</div>

<div id="navbar" class="collapse navbar-collapse">

<ul class="nav navbar-nav">

{% show_menu 0 1 0 100 "menu.html" %}

</ul>

</div>

</div>

</nav>

<div class="container">

<div class="blog-header">

<h1 class="blog-title">Not Just Another Blog</h1>

<p class="lead blog-description">My awesome blog built with django CMS.</p>

</div>

{% block content %}{% endblock content %}

</div>

<footer class="footer">

<div class="container">

<p class="text-muted">{% block footer %}My Blog©2015{% endblock footer %}</p>

</div>

</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>

{% render_block "js" %}

</body>

</html>

清单 5-2 中的代码在功能上与上一章中的清单 4-5 相同，因此请参考该讨论以获得更详细的逐行分析。请注意以下更改:

• 我已经将 HTML 头更新为当前的引导头。基本上，这为跨浏览器兼容性增加了一些额外的支持，并为引导脚本增加了不同的内容交付网络(CDN)。您可以从 http://getbootstrap.com/getting-started/#template 获得最新的引导模板(您可以将其用作您自己的 django CMS 模板的基础)。
• 我已经将 navbar(顶部菜单)类从navbar-default改为navbar-static-top以防止 django CMS 工具栏浮动在 navbar 的顶部并遮挡你的顶部菜单。
• 我已经删除了“项目名称”文本锚，并将其替换为一个徽标图像。
• 我在页面内容前添加了一个博客标题。这给了你的网站一个横幅式的标题，这在很多博客上都很常见。

Listing 5-3. The myblog.css File

html {

position: relative;

min-height: 100%;

}

body {

/* Margin bottom by footer height */

margin-bottom: 60px;

font-family: Georgia, "Times New Roman", Times, serif;

color: #555;

}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5,h6, .h6 {

margin-top: 0;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: normal;

color: #333;

}

.footer {

position: absolute;

bottom: 0;

width: 100%;

height: 60px;

background-color: #f5f5f5;

}

.blog-header {

padding-top: 20px;

padding-bottom: 20px;

}

.blog-title {

margin-top: 30px;

margin-bottom: 0;

font-size: 60px;

font-weight: normal;

}

.blog-description {

font-size: 20px;

color: #999;

}

.sidebar-module {

padding: 15px;

margin: 0 -15px 15px;

}

.sidebar-module-inset {

padding: 15px;

background-color: #f5f5f5;

border-radius: 4px;

}

.sidebar-module-inset p:last-child,

.sidebar-module-inset ul:last-child,

.sidebar-module-inset ol:last-child {

margin-bottom: 0;

}

.pager {

margin-bottom: 60px;

text-align: left;

}

.pager > li > a {

width: 140px;

padding: 10px 20px;

text-align: center;

border-radius: 30px;

}

.blog-post {

margin-bottom: 60px;

}

.blog-post-title {

margin-bottom: 5px;

font-size: 40px;

}

.blog-post-meta {

margin-bottom: 20px;

color: #999;

}

body > .container {

padding: 15px 15px 0;

}

.container .text-muted {

margin: 20px 0;

}

.footer > .container {

padding-right: 15px;

padding-left: 15px;

}

. row {

margin-right: 0px!important;

}

清单 5-3 ，myblog.css，是一个标准的 CSS 文件。关于 CSS 的细节已经超出了本书的范围。如果你需要温习你的 CSS 知识，可以在 http://www.w3schools.com/css/ 找到很棒的资源。

如果一切按计划进行，当你重新加载你的主页时，你会看到一个看起来像图 5-4 的网站(注意，我已经折叠了这个截图中的 django CMS 工具栏，这样你就可以看到完整的模板)。

图 5-4。

Your New Blog Base Template

创建您的博客模板

虽然我们的博客看起来比我们开始时漂亮多了，但它看起来仍然不太像一个博客。首先，没有通常的侧边栏列出最近的帖子。其实连帖子都没有！这就是我们现在要做的:清单 5-4 显示了我们博客页面的基本模板page.html。这个页面可以用作许多不同类型的博客页面的基础，而不仅仅是博客文章(例如，列出最新文章的博客卷)。

清单 5-5 显示了我们的博客文章页面blogpage.html，它继承了我们的page.html模板。

您会注意到侧边栏在这些页面中，而不是基本模板中。如果你想知道为什么，那是因为我们的网站有最大的灵活性。我们希望能够显示没有侧边栏的页面(例如，创建全屏阅读页面)，或者甚至在某些页面上显示完全不同的侧边栏。以我们的博客为例，这使得以后把它变成一个可重用的应用或 django CMS 插件变得更加容易。

尽可能保持基本模板的通用性几乎总是一件好事。将这一理念与 Django 强大的模板继承能力相结合，随着时间的推移，您会发现您正在收集一个基本模板的组合，它允许您满足最苛刻的设计挑战，而不必每次都从头开始。

Listing 5-4. Our page.html Template

{% extends "base.html" %}

{% load cms_tags sekizai_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}

<div class="row">

<div class="col-sm-8 blog-main">

{% block page-inner %}

{% placeholder "content" %}

{% endblock page-inner %}

</div>

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">

<div class="sidebar-module sidebar-module-inset">

<h4>About</h4>

<p>My name is Big Nige and I built this blog all by myself.</p>

</div>

<div class="sidebar-module">

<h4>Latest Posts</h4>

<ol class="list-unstyled">

<li><a href="#">Blogpost 1</a></li>

<li><a href="#">Blogpost 2</a></li>

</ol>

</div>

<div class="sidebar-module">

<h4>User</h4>

<ol class="list-unstyled">

<li><a href="?edit">Log In</a></li>

</ol>

</div>

</div>

</div>

{% endblock content %}

清单 5-4 中的代码应该非常容易理解；需要注意的几件事是:

• 我使用 Bootstrap 的 12 列布局来创建一个 8 列的内容区域，其中有一列偏移，然后是一个 3 列的右侧边栏。
• 我已经提供了一些填充文本，在侧边栏中创建一个虚拟菜单。这是为了让我们可以直观地检查模板。它将被第九章中的占位符代替。
• 我在右侧边栏的底部添加了一个登录链接，使登录变得更容易，而不是每次你想登录时都必须在 URL 上添加?edit。

Listing 5-5. The blogpage.html Template

{% extends "page.html" %}

{% load cms_tags %}

{% load sekizai_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block page-inner %}

<div class="blog-post">

<h2 class="blog-post-title">{% page_attribute "page_title" %}</h2>

<p class="blog-post-meta">Published {{

request.current_page.creation_date|date:'d M Y' }} by

<a href="#">{{ request.current_page.created_by }}</a></p>

{% placeholder "content" %}

{% static_placeholder "social" %}

</div>

{% endblock page-inner %}

感谢 Django 的模板继承，我们的博客文章模板非常简单，因为所有繁重的工作都由base.html和page.html完成了。blogpage.html所做的就是用一篇格式化的博客文章替换{% page-inner %} block 标签，该博客文章显示文章标题、作者和日期信息作为标题，并为社交媒体分享按钮提供一个占位符，我们稍后将在第九章中添加这些按钮。请注意，我们正在访问一些页面属性，这些属性由 django CMS 的标题和页面模型方便地传递给页面上下文。

现在我们终于写好了所有的模板，我们只需要向 django CMS 注册它们。幸运的是，这很容易做到；只需在文本编辑器中打开myblog\setting.py，将CMS_TEMPLATES设置更改为如下:

CMS_TEMPLATES = (

## Customize this

('page.html', 'Page'),

('blogpage.html', 'Blog Page with Sidebar'),

)

保存文件并刷新您的主页。从 django CMS 工具栏中，选择带有侧边栏的页面➤模板➤博客页面，您的模板应该会变成如图 5-5 所示。

图 5-5。

Your completed blog template

就这样！伸个懒腰，拍拍自己的背。这是一个可怕的大量输入(假设你没有作弊和下载文件)，但我希望你同意，结果是值得的。

摘要

在这一章中，我们为你的博客网站创建了一套模板；通过这样做，您对 Django 的模板继承以及 Bootstrap 如何使创建响应性页面模板变得容易有了更多的了解。

在下一章，我们将继续为你的网站创建一些页面，我将向你介绍 django CMS 最强大的特性之一:插件。

Footnotes 1

^【1】https://github.com/twbs/bootstrap/blob/master/docs/assets/js/ie10-viewport-bug-workaround.js

六、Django CMS 插件

django CMS 灵活性的核心是一个被设计成可插拔的开放结构。从概念上讲，这不同于大多数其他可用的 CMS 软件。对于大多数其他 CMSes，您只能控制作为单个实体(页面或文章)显示在页面上的内容，并且内容通常是从管理后端编辑的。

django CMS 采取了一种不同的方法——它的插件架构提供了灵活的嵌入式容器，可以直接从前端编辑。这些容器旨在方便地包含所有形式的内容，从简单的 HTML 标签到复杂的嵌入式应用。

django CMS 不限制页面布局；例如，你可以将一个横幅放在页面顶部，写一篇文章放在它下面，然后在文章下面放一个社交媒体插件。您可以自由地将这种布局复制到其他页面，或者在每个页面上做一些完全不同的事情。我们将在第八章中讨论这样做的步骤。然而，在接下来的两章中，我们将首先探索您已经拥有的所有插件。在这一章中，你将学习内置的 django CMS 插件是如何工作的。

入门指南

理解这是如何工作的最好方法是直接投入进去。点击你在上一章创建的主页，然后点击 django CMS 工具栏中间的结构按钮。你的屏幕应该看起来如图 6-1 所示。

图 6-1。

An empty template in structural view

页面上的内容栏和社交栏与模板中同名的占位符相对应。这些是容器，您可以在其中放置任何想要添加到页面的插件。例如，我们的内容向导已经向内容占位符添加了一个文本插件。如果你查看底层的 HTML 代码(通过选择 View Source ),你会发现它们实际上只是 HTML divs。

每个容器的右侧都有一个上下文菜单。如果您点击加号(+)图标，屏幕中央将出现一个弹出覆盖图(图 6-2 )。列表中的每一项都是一个插件。在本章的剩余部分，我们将依次看看这些插件，你将学会如何使用它们为你的网站创建不同种类的内容。

图 6-2。

A placeholder context menu

默认插件

django CMS 安装了 11 个默认插件；它们共同提供了显示和格式化常见 web 内容(如文本、视频和音频、图像和文件)所需的所有基本功能。django CMS 项目团队和第三方提供了更多的 django CMS 插件，您可以通过复制和增强其中一个默认插件，或者从头开始构建自己的插件，轻松添加自己的定制插件。我们将在下一章讨论第三方插件，并在第八章中构建你自己的定制插件，但首先让我们更详细地看看默认插件。

Note

如果你已经使用了 django CMS 的早期版本，请注意占位符和插件不再从管理后端管理；现在，必须从结构视图的前端对它们进行管理。

安装默认插件

如果你已经遵循了第二章中的安装说明，这一步是不必要的，但是，如果你必须重新安装，或者想在自定义站点上使用它，了解如何安装默认插件是值得的。

安装一个默认插件非常简单；只需执行以下操作:

Install the plugin using pip.   Add it to your INSTALLED_APPS in settings.py.

例如，您可以安装带有pip install django-cms-file的文件插件，并将'djangocms_file',添加到您的INSTALLED_APPS中，以便在您的应用中可用。

有关单独安装所有默认插件的说明，请参见 http://www.django-cms.org/en/addons/ 。

文本插件

如果你曾经使用过在线的、基于浏览器的文本编辑器，你会对这个文本插件很熟悉。如果您还没有，不要担心，因为它非常简单，工作起来就像一个简化的文字处理器。你会经常使用文本插件，肯定会比系统中的其他插件更多，所以真正理解它的工作原理是值得的。从下拉菜单中选择文本插件，一个如图 6-3 所示的窗口将会弹出到您的屏幕上。

图 6-3。

The django CMS Text plugin

与文字处理器或高级 HTML 编辑器相比，编辑器的功能似乎很基本，但在网页内容创作中，越多不一定越好。表 6-1 列出了基本编辑器的每个功能。

表 6-1。

Django CMS Text Plugin Toolbar Functions

| 图标 | 功能 | | --- | --- | |  | 退回/重做 | |  | 插入文件/链接/图片或视频。这些插件的行为与直接在页面上使用时完全一样。 | |  | 显示区块。在页面上显示 HTML 块的虚线轮廓。用于可视化布局和检测空 HTML 标签。 | |  | 段落格式下拉列表。选项包括标题、普通文本和其他格式。 | |  | 应用特殊的文本样式，如代码格式、删除的文本和引号。 | |  | 选择文本前景色和背景色。 | |  | 粘贴纯文本和从 Word 粘贴。后者清除微软工作格式化标签。 | |  | 文本格式:粗体、斜体、下划线、下标和上标。 | |  | 清除所选文本的格式。 | |  | 文本对齐方式:左对齐、居中对齐或右对齐。 | |  | 插入一条水平线。 | |  | 列表。编号，子弹。列表缩进和突出。 | |  | 插入表格。这将打开另一个窗口，您可以在其中输入行、列和表格的宽度和高度信息。 | |  | 直接编辑 HTML 源代码。 |

文本插件有一些限制——没有所见即所得的表格或嵌入插件(图像、文件和视频)的大小调整，任何高级 HTML 都需要直接编辑源代码。

实际上，这些问题并没有你想象的那么大。

对于初学者来说，在表中使用固定宽度的列几乎总是一件坏事，因为它们在小屏幕上不能正常缩放和流动；你永远不应该用表格来布局。通过切换到内容视图可以快速预览媒体文件，插件系统使布局变得非常简单。

要理解的最重要的概念是，你不需要用一个单独的文本插件来布局整个页面。这可能是刚接触 django CMS 的人犯的第一个错误；尤其是如果他们过去使用过其他的 CMSes。让我通过扩展我在本章开始时介绍的快速示例来说明。假设你有一个相当标准的页面:横幅在顶部，接下来是一些介绍性的文本，一个图像浮动在左侧或右侧，还有一些文本浮动在图像旁边并继续在下面。通常在这种情况下，是图像元素和横幅让页面作者摆弄 HTML 以使一切看起来正确。

在 django CMS 中，你可以在横幅上放一个图片插件，然后放一个介绍文字插件。在这下面，你可以使用一个多栏插件，拆分百分比宽度以适应图像，将图像放在一栏，文章文本放在另一栏。然后你用下面的另一个文本插件完成，它包含了文章的其余部分(这个例子中提到的附加插件将很快被完整解释)。

注意，这不是一个很好的例子；通常情况下，你不应该有任何问题的文字流动周围的图像为主要文章，所以你不会去这样一个精心布局，但它真的很重要的是要明白，你有这种灵活性，如果你有更高的布局要求。

最后，没有什么可以阻止你使用一个外部的 HTML 编辑器，将源代码直接粘贴到文本插件中。“从 Word 粘贴”按钮甚至允许您将 Word 用作 HTML 编辑器(但请不要这样做)。

链接插件

链接插件(图 6-4 )将链接插入页面内容。它也可以用来在文本插件和多栏插件中插入链接。有五种可用的链接类型—链接(URL)、链接到网站上的页面、链接到锚、电子邮件链接和电话链接。

图 6-4。

The Link plugin Note

如果您输入多个链接，链接插件不会抛出错误，所以请确保您只填写了一个链接字段。

关于链接插件，有一些事情需要注意:

• 当您在链接字段中输入 URL 时，它必须带有http://或http://前缀，原始 URL 会导致错误。
• 您需要自己在页面中创建锚点，方法是选择 Edit Source 并输入<a name="anchor_name" />(用您的锚点名称替换anchor_name)。然后将锚点字段链接到您的锚点名称。有一个针对文本插件的黑客可以解决这个问题，但对于书中的这一点来说有点超前。我已经将它包含在附带的侧边栏中。
• 电话链接将插入一个tel://…链接到您的页面。根据您电脑或平板电脑上的软件，这可能会启动另一个应用。在智能手机上，它会简单地拨打电话号码。

Adding “Insert Anchor” to the text plugin

在源代码中添加锚点非常简单，适合大多数内容创建工作；然而，如果你发现你在你的页面中输入了很多锚点，那么在文本插件中添加它们的工具将会非常有用。

幸运的是，文本插件工具栏是基于一个名为 CKEditor 的 JavaScript HTML 编辑器。CKEditor 真正酷的地方是它已经有了一个插入锚点工具，我们要做的就是启用它。

打开您的settings.py,并将其添加到文件底部:

CKEDITOR_SETTINGS = {

'toolbar':[

['Undo', 'Redo'],

['cmsplugins', '-', 'ShowBlocks'],

['Format', 'Styles'],

['TextColor', 'BGColor', '-', 'PasteText', 'PasteFromWord'],

['Maximize', ''],

'/',

['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight'],

['HorizontalRule'],

['Anchor'],

['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Table'],

['Source']

],

}

重新加载您的页面(您可能需要清空浏览器缓存并重启开发服务器)，您将在水平标尺按钮旁边看到一个漂亮的标志图标(也称为插入锚点工具)。

如果你喜欢冒险，你还可以做很多其他的事情来修改编辑器，但是一定要先备份你的文件！

图片插件

图片插件(图 6-5 )将图片插入你的页面。它也可以在文本插件和多栏插件中使用。图片插件不允许上传时调整图像大小，也不做任何自动缩略图转换；因此，在你上传之前，你的图片大小合适是很重要的。

图 6-5。

The Picture plugin Tip

要创建一个缩略图，您可以点击它来显示全尺寸图像，将全尺寸图像保存到myBlogProject\media\，然后将链接:缩略图上的文本设置为"../media/<full size image filename>。我们稍后将安装一个插件，它可以帮助简化这个过程，但首先它有助于了解如何用默认设置实现这个结果。

文件插件

文件插件(图 6-6 )将文件插入你的页面。像图片插件一样，它也可以用在文本和多栏插件中。这是一个非常简单的工具——你只需要选择要上传的文件，并选择一个标题(这将被用作你的锚文本)。

图 6-6。

The File plugin

文件插件只提供最基本的文件嵌入功能。对于您将定期嵌入文件的更复杂的站点，建议您安装并使用 Django-Filer 插件，这将在下一章中介绍。

视频插件

视频插件(图 6-7 )将视频嵌入你的页面。它也可以在文本和多列插件中使用。嵌入的视频可以是您网站上的文件，也可以是指向外部网站(如 YouTube 或 Vimeo)上的视频的嵌入链接。使用视频插件时，请记住以下几点:

图 6-7。

The Video plugin

• 如果你想嵌入你自己的视频，你可能不得不使用编码来得到你想要的结果。一般来说，任何常见的视频容器(。avi，. mp4，. m4v，.mkv)将在使用 H.264 编解码器的情况下工作。如果遇到问题，网上有大量关于如何转码视频文件的信息。
• 宽度和高度是必填字段。如果您使用预览图像，请将这些设置为图像尺寸；如果您链接到外部视频，最好保持与原始视频相同的宽高比，例如 4:3 视频的宽高比为 400。
• 视频插件配置屏幕底部的“显示颜色”选项卡允许您为嵌入的视频自定义一系列颜色设置。

Tip

如果您想将自定义设置(包括颜色设置)应用到您网站上的所有视频，可以将它们添加到您的settings.py文件中。可用的设置如下:

VIDEO_AUTOPLAY ((default: False)

VIDEO_AUTOHIDE (default: False)

VIDEO_FULLSCREEN (default: True)

VIDEO_LOOP (default: False)

VIDEO_AUTOPLAY (default: False)

VIDEO_BG_COLOR (default: "000000")

VIDEO_TEXT_COLOR (default: "FFFFFF")

VIDEO_SEEKBAR_COLOR (default: "13ABEC")

VIDEO_SEEKBARBG_COLOR (default: "333333")

VIDEO_LOADINGBAR_COLOR (default: "828282")

VIDEO_BUTTON_OUT_COLOR (default: "333333")

VIDEO_BUTTON_OVER_COLOR (default: "000000")

VIDEO_BUTTON_HIGHLIGHT_COLOR (default: "FFFFFF")

多列插件

多列插件(图 6-8 )允许你以列的形式格式化你的页面内容。它不仅对多列文本有用；它是任何其他默认 django CMS 插件以及兼容的第三方和自定义插件的容器。你甚至可以嵌套多列插件。

图 6-8。

Multi Columns plugin

使用多列插件非常简单——选择你想要的列数和默认的列宽。这两种设置以后都可以很容易地更改。

样式插件

样式插件(图 6-9 )允许你为放置在其中的页面元素添加自定义样式。例如，如果您想要将自定义样式应用到文本插件，您可以将文本插件放在样式插件中。

图 6-9。

The Style plugin

使用样式插件很简单；只需从列表中选择一个类名。这将把类名应用到 HTML div。然后在自定义 CSS 文件中设置样式格式。例如，如果您选择了info类，它将应用 CSS 文件中.info类的样式。

默认类没有什么特别的；通过修改您的settings.py文件，您可以添加更多的类或者完全替换它们。例如，要在下拉列表中添加一个新的类mystyle，请在设置中添加以下内容:

CMS_STYLE_NAMES = (

('info', ("info")),

('new', ("new")),

('hint', ("hint")),

('mystyle', ("mystyle")),

)

还有许多高级设置可以添加到样式插件中，包括:

• 使用 HTML 5 文章或章节标签代替默认的 div 标签
• 应用附加类
• 设置填充和边距

Tip

您可以将引导程序类添加到附加类列表中。如果你想应用 Bootstrap 上下文类(比如。warning，或。danger)到内容。

预告插件

预告插件(图 6-10 )显示一个图像，上面有一个标题，下面有一个纯文本块。它最好用在多列标签中，使它在页面文本中左右浮动，但是像 django CMS 中的其他东西一样，它的用途只受你的想象力的限制。

图 6-10。

The Teaser plugin

因为描述是纯文本，并且将呈现与你的正文相同的内容，所以将你的预告插件封装在一个样式插件中，以对预告应用自定义样式也是值得的。

Flash 插件

Flash 插件(图 6-11 )是另一个非常简单的插件——只需选择你的 Flash (swf)文件并指定宽度和高度。

图 6-11。

The Flash plugin Warning

因为我们正在做一个手机友好的网站，应该注意到 Flash 文件在几个平台上有很多兼容性问题。一般的建议是不要使用 Flash，除非你有非常好的理由这样做。

谷歌地图插件

谷歌地图插件(图 6-12 )在你的页面中嵌入了谷歌地图。设置很简单；但是，有几件事需要注意:

图 6-12。

The Google Map plugin

• 在美国之外，通过在 City:字段中输入<city>, <state/province>, <country>,您将更有可能显示正确的地图参考。
• 纬度和经度设置不是直接的地图参考；它们用于微调地图图钉的确切位置。

创建别名插件

创建别名插件为所选插件创建一个别名，这允许它在你的网站的任何页面上使用，并且对别名插件的一个实例的任何更新将自动应用到所有其他实例。它不是被设计成单独使用的，而是作为一种将插件复制到你的站点的多个页面上的方式，并且当插件内容改变时，插件内容会自动更新。图 6-13a 和 6-13b 说明了别名过程。

图 6-13(b)。

Adding the aliased plugin to a page

图 6-13(a)。

Copying a plugin with Create Alias

在图 6-13a 中，我已经使用 Create Alias 为页面上的文本插件创建了一个别名。

创建插件的链接副本就像将别名粘贴到页面上的占位符或插件中一样简单，如图 6-13b 所示。请注意，出于演示的目的，我粘贴到了同一页面上；在一个真实的网站中，你可以把它粘贴到另一个页面上。

摘要

在这一章中，我们简要地看了 django CMS 中内置插件提供的功能。我们将在第八章中使用这些插件。

在下一章，我们将通过添加一些其他开发者为 django CMS 开发的优秀插件来增加基本插件的功能。

七、高级插件

在前一章中，我们介绍了 django CMS 预装的所有默认插件。对于内容不经常变化的简单网站，这些对于创建和管理网站来说已经足够了。

然而，一旦你有了一个内容更复杂的网站，并且需要更经常地发布和更新内容，有许多第三方插件可以让你更容易地在 django CMS 网站上创建和管理内容。

本章介绍了一些扩展和增强 django CMS 插件功能的第三方应用。在下一章中，我们将开始使用它们来为你的博客站点构建内容。

简易缩略图

如果您还记得上一章，为了用默认的图像插件创建缩略图，您必须手动调整源图像的大小来创建缩略图，然后链接到源图像以获得全分辨率视图。

因为这是 CMS 中非常常见的任务，所以已经开发了许多用于创建缩略图的应用；轻松缩略图就是这样一个应用。最初是为 Django 创建的，Easy Thumbnails 也可以很好地与 django CMS 配合使用。它是为动态创建缩略图而设计的——根据一个简单的模板，为您放在页面中的图像自动创建缩略图。

Note

简易缩略图最适合不需要复杂媒体处理的小型网站。如果你的网站更复杂，你最好使用 CMSplugin-filer，它有简单的缩略图。CMSplugin filer 的最新版本可以从 https://github.com/stefanfoulis/cmsplugin-filer 下载。

要使用简易缩略图，您必须首先使用pip安装它:

$ pip install easy-thumbnails

一旦安装了简易缩略图，我们需要将它添加到我们的项目中。首先，将它添加到您在settings.py中安装的应用中:

INSTALLED_APPS = (

...

'easy_thumbnails',

)

然后运行migrate命令将必要的表添加到您的项目中:

$ python manage.py migrate easy_thumbnails

一旦 Easy Thumbnails 安装到您的项目中，它就需要一个模板文件来正确地调整图像大小并创建缩略图文件。清单 7-1 中显示了一个简单的模板文件。要在您的项目中启用模板，请将文件命名为picture.html，并将其保存到\myBlog\templates\cms\plugins。(你需要在你的templates目录下创建新的文件夹。)

Listing 7-1. The Easy Thumbnails Template File (picture.html)

{% load thumbnail %}

{% if link %}<a href="{{ link }}">{% endif %}

{% if placeholder == "content" %}

<img src="{% thumbnail picture.image 300x600 %}"

{% if picture.alt %} alt="{{ picture.alt }}"{% endif %}

{% if picture.longdesc %} title="{{ picture.longdesc }}"{% endif %} />

{% else %}

{% if placeholder == "authorbio" %}

<img src="{% thumbnail picture.image 50x50 crop %}"

{% if picture.alt %} alt="{{ picture.alt }}"{% endif %}

{% if picture.longdesc %} title="{{ picture.longdesc }}"{% endif %} />

{% endif %}

{% endif %}

{% if link %}</a>{% endif %}

这个模板非常简单。要查看它在做什么，让我们来看一下代码:

• 我们首先需要用{% load thumbnail %}将自定义缩略图标签加载到模板中。
• 外部的if/else语句根据 django CMS 页面模板中的占位符选择正确的缩略图大小。我们在第二章的中创建了content占位符。注意，为了实际工作，您需要修改您的基础(或子模板)来包含authorbio占位符。
• 缩略图创建魔术由{% thumbnail picture.image ... %}标签执行。它设置缩略图的大小，在作者头像的情况下，裁剪图像。
• 如果有链接附加到图像，附加的if/else标签创建一个锚点，如果这些元素存在，为图像创建alt和title标签。

关于配置简易缩略图的最后一点说明。如果你打算重复使用你的应用，或者想要保持整个网站的一致性和灵活性，使用别名比硬编码缩略图大小更好，例如，通过将以下内容添加到你的settings.py:

THUMBNAIL_ALIASES = {

'': {

'avatar': {'size': (50, 50), 'crop': True},

},

}

还要修改您的模板，以便:

<img src="{% thumbnail picture.image 50x50 crop %}"

变成了这样:

<img src="{% thumbnail picture.image avatar %}"

现在，您可以自由地将模板复制到多个项目，并为所有使用avatar别名的模板设置图像参数，而无需修改多个文件。

这只是对简易缩略图的简单介绍；有关所有相关配置选项和设置的完整描述和详细信息，请参考简易缩略图文档 ¹ 。

CMSplugin 文件

CMSplugin-filer 将 Django 的文件管理器 Django-filer 添加到 django CMS 中。它提供了许多您期望从文件管理应用中获得的功能:

• 创建、重命名和删除文件夹。
• 上传、重命名和删除任何类型的文件(尽管您很可能只管理常见的媒体文件，如图像、视频、PDF 和文档文件。
• 整理服务器上的媒体文件。
• 应用文件权限和安全下载(编写本文时的实验特性)。

要安装 CMSplugin-filer，我们首先用pip安装应用文件:

pip install cmsplugin-filer

为了确保 CMSplugin-filer 安装正确，我们必须首先将 Django-filer 添加到我们的项目中。将以下内容添加到您的settings.py:

INSTALLED_APPS = (

. . .

'filer',

'easy_thumbnails',

)

然后，您需要将应用表安装到项目中。为此，运行两个命令:

python manage.py makemigrations

python manage.py migrate

第一个命令确保我们所有的迁移同步，第二个命令执行实际的迁移。现在是安装 CMSplugin-filer 应用文件的时候了。首先，我们必须对settings.py进行一些更改:

INSTALLED_APPS = (

. . .

'cmsplugin_filer_file',

'cmsplugin_filer_folder',

'cmsplugin_filer_link',

'cmsplugin_filer_image',

'cmsplugin_filer_teaser',

'cmsplugin_filer_video',

)

. . .

MIGRATION_MODULES = {

. . .

'cmsplugin_filer_file': 'cmsplugin_filer_file.migrations_django',

'cmsplugin_filer_folder': 'cmsplugin_filer_folder.migrations_django',

'cmsplugin_filer_link': 'cmsplugin_filer_link.migrations_django',

'cmsplugin_filer_image': 'cmsplugin_filer_image.migrations_django',

'cmsplugin_filer_teaser': 'cmsplugin_filer_teaser.migrations_django',

'cmsplugin_filer_video': 'cmsplugin_filer_video.migrations_django'

}

然后我们只需要再次运行migrate来确保我们已经将所有必要的表添加到项目中:

python manage.py migrate

如果安装成功，您将有六个新的插件选项添加到您的页面结构编辑器中(图 7-1 ):

• 文件*
• 文件夹
• 图像*
• 链接*
• 戏弄者
• 视频*

图 7-1。

Plugins added by CMSplugin-filer

*这些插件也被添加到文本插件中。

顺便说一下，一旦你安装了 CMSplugin-filer，你就不太可能再使用相应的默认插件了。为了减少插件下拉列表中的选项数量，你只需要删除重复的选项。您可以通过注释掉您的settings.py中的重复项来轻松做到这一点:

INSTALLED_APPS = (

. . .

'djangocms_column',

#'djangocms_file',

'djangocms_flash',

'djangocms_googlemap',

'djangocms_inherit',

#'djangocms_link',

#'djangocms_picture',

#'djangocms_teaser',

#'djangocms_video',

. . .

)

我们将在下一章的实际例子中使用每个文件管理器插件。为了便于参考，下面提供了每个插件的介绍。我们将从文件管理器开始，它是所有插件共有的，然后依次讨论每个插件。

文件管理器

所有六个新的 CMSplugin-filer 插件的共同点是文件管理器(图 7-2 )。通过点击搜索图标()从每个插件中打开文件管理器。要选择一个文件，单击您想要插入的文件旁边的选择图标()。

图 7-2。

The CMSplugin-filer file manager

使用文件管理器，您有以下选择:

• 新文件夹。在选定文件夹下添加新文件夹。在本例中，我添加了一个名为siteimages的新文件夹。
• 上传。允许您将新文件从您的计算机上传到选定的文件夹。当您第一次上传文件时，它会被添加到屏幕右侧的剪贴板中，您可以将它添加到当前目录中，如果您改变主意，也可以放弃上传。
• 搜索。在所有文件夹中搜索文件。
• 改变。允许您更改文件属性和元数据。可用选项取决于上传的文件类型。当我们查看单个插件时，您将了解更多关于更改选项的信息。

Note

CMSplugin-filer 安装了完整的 Django-filer 应用，它提供了一个有效的媒体管理器，不仅可以从前端(如这些示例中所示)访问，还可以通过管理后端访问。我们将在下一章讨论更多的管理后端。

文件插件

filer 文件插件很简单(图 7-3)；只需输入您的标题(这将成为文件锚文本)和您想要嵌入的文件。

图 7-3。

The CMSplugin-filer File plugin

文件夹插件

文件夹插件(图 7-4 )将文件夹的内容呈现为项目符号列表或幻灯片。它对于创建图像幻灯片非常有用；然而，它也是一个在网页上列出目录内容的方便工具。

图 7-4。

The Folder plugin

文件夹插件的配置很简单；只需为插件输入一个标题，并选择您希望附加的文件夹。如果您选择“列表”风格，文件夹中的每个文件将作为链接到您的文件的锚列在您的页面上，如果您选择“幻灯片”风格，文件夹中的所有图像将显示为幻灯片。

图像插件

CMSplugin-filer 中的图片插件(图 7-5 )对基本图片插件进行了大量增强。可以通过文件管理器添加图像，也可以使用备选图像 URL 字段直接链接图像。您还可以添加标题以及常用的替代文本。

图 7-5。

The Image plugin

图像插件还提供图像缩放选项和高级链接(图 7-6 )。图像缩放和链接选项非常简单。需要注意的事项:

图 7-6。

Additional options for the Image plugin

• 使用原始图像。这将覆盖所有其他设置，并且只显示图像而不调整大小。
• 宽度/高度。您可以指定宽度或高度来获得成比例的大小，但是要进行裁剪，您必须同时指定两者。
• 高档。简单地调整图像大小，无需任何重采样。请注意，如果放大，小图像的质量可能会很低。
• 缩略图选项。允许应用预定义的缩略图大小设置。单击绿色加号(+)添加新设置。您添加的任何新设置将适用于所有图像。
• 使用自动缩放。允许图像插件尝试根据上下文缩放图像。请注意，根据图像所在的占位符，图像的缩放比例会有所不同。
• 图像对齐。不对图像应用任何样式，只是一个 HTML 类。您可以在一个定制的 CSS 文件中提供样式(在我们的例子中是blog.css)。
• 链接原始图像。打开全尺寸图像。
• 描述。django CMS 将把你放在这个字段中的任何内容作为文本呈现在一个span标签中。应用样式由您决定(参见随附的注释)。

Note

图像标题和描述是以 HTML span标签的形式添加的，因此它们将与图像内联呈现，而不是像您所期望的那样位于图像下方。幸运的是，这很容易解决。django CMS 将类应用于图像标题和描述(分别是title和desc)。将这些类添加到您的blog.css文件中，以在图像下方显示标题和描述:

.title, .desc {

display: block;

}

链接插件

CMSplugin-filer 链接插件(图 7-7 )与基本链接插件非常相似，唯一的主要区别是增加了文件管理器。名称字段是锚文本，您可以选择直接链接(URL)、页面、邮件和文件链接。与基本版本一样，如果您填写多个链接字段，这个链接插件不会抛出错误，因此请确保您只在您想要的字段中输入信息。

图 7-7。

The Link plugin

预告插件

CMSplugin-filer 中的 Teaser 插件(图 7-8 )的功能也与其基本版本非常相似，只是在“更多”链接下增加了文件管理器和图像大小调整选项。

图 7-8。

The Teaser plugin Note

标题呈现为 HTML H2标签，描述呈现为基本段落(p标签),没有默认的 HTML 类，所以建议将 CMSplugin-filer Teaser 插件放在 Style 插件中，就像基本版本一样。

视频插件

视频插件的 CMSplugin-filer 版本(图 7-9 )与基本版本相同，除了增加了文件管理器和默认大小 320×240。

图 7-9。

The Video plugin

djangocms-表单

djangocms-forms 是由 Mishbah Razzaque 创建的 djangocms 的第三方表单插件。它提供了你需要的所有表单域，以及添加 CAPTCHA 来过滤垃圾邮件和在数据库中保存表单提交的能力；所有这些都不需要编写一行代码。要在我们的项目中使用 djangocms-forms，首先我们需要安装它:

pip install djangocms- forms

然后我们需要把djangocms_forms加到INSTALLED_APPS上:

INSTALLED_APPS = (

...

'djangocms_forms',

...

)

最后，我们同步数据库:

python manage.py migrate

Tip

到目前为止，我们已经一次安装了一个插件。这可能是一个很好的时机来注意所有你希望包含在你的网站中的插件(和应用)可以使用一个需求文件一次安装。因为需求文件是 pip 的一个特性，而不是 django CMS 的，所以我不会在这里深入讨论，但是如果你有兴趣，可以看看 https://pip.readthedocs.org/en/1.1/requirements.html 。

为了在我们的应用中使用 djangocms-forms 插件，我们需要将它挂接到我们的项目中。首先，我们需要将表单 URL 添加到项目中。打开\myblog\urls.py并将以下内容添加到您的urlpatterns中:

urlpatterns = patterns(

...

url(r'^', include('djangocms_forms.urls')),

...

)

然后，你应该能够通过进入➤高级设置➤应用页面并从下拉列表中选择表单，将表单插件挂入你的页面。如果表单选项没有出现在下拉列表中，您可能需要重新启动开发服务器。

保存页面设置，现在当你编辑你的页面时，你将会看到通用下的表单选项。选择插件，你应该会看到一个类似图 7-10 的弹出窗口。

图 7-10。

The Djangocms-forms plugin (partial)

不要被所有可能的选择吓倒；创建一个详细的表单实际上非常容易，但是首先我们必须注意一件事。

因为我们正在开发中，我们没有设置我们的电子邮件，所以我们不能测试表单。幸运的是，Django 提供了一个基于文件的电子邮件后端，专门用于帮助开发人员测试电子邮件，而无需首先配置电子邮件服务器。要让我们的电子邮件后端运行，请在您的settings.py末尾添加以下内容:

EMAIL_BACKEND = 'django.core.mail.backends.filebased.EmailBackend'

EMAIL_FILE_PATH = '/Users/<your username>/maildump'

您不需要创建maildump文件夹；Django 会在你第一次尝试发送电子邮件时帮你完成。当你尝试发送电子邮件时，你会发现这个文件夹中包含一些名为20151009-100625-98201520.log的文件。在这个日志文件中是您的完整消息，包括所有邮件头和错误消息。非常便于测试。

创建表单

图 7-10 显示了创建表单时弹出窗口的局部视图。配置屏幕很长，但所有字段都很简单:

• 表单名称。表单名称将显示在您网站的管理后端，这样您就可以知道提交了哪个表单。下一节将详细介绍表单管理。
• 标题。这是将在您的页面中显示的标题。
• 描述。这将显示在您页面的标题下。您可以在这里使用 HTML 标签来格式化您的代码。
• 提交按钮文本。默认为“提交”，但您可以更改。
• 发布提交消息。用户提交表单后将在页面上显示的消息。您可以在这里使用 HTML 标签来格式化您的代码。提示:在这里使用 Bootstrap 类alert alert-success来获得一个非常格式化的成功框。
• 重定向？如果您希望在提交表单后重定向用户，请选择一个目标。
• 提交设置。设置收件人、发件人和电子邮件主题。还允许您设置验证码。参见 https://github.com/mishbahr/djangocms-forms 了解更多关于在 djangocms-forms 中使用验证码的信息。

添加表单域

添加表单字段非常简单，只需单击表单创建弹出窗口底部的绿色加号(+)图标。这将扩展窗口，显示类似于图 7-11 的配置屏幕。

图 7-11。

Adding form fields

字段编辑器有以下选项:

• 名字。将显示在表单中字段的左侧。
• 字段类型。字段的数据类型。可用选项包括:
  • 文本、文本区域、电子邮件、号码、电话、URL、复选框、多选框、下拉列表、单选、文件上传、日期、时间、密码和隐藏。
  • Djangocms-form 为所有相关字段(如电子邮件和号码)提供自动验证。如果所有标记为“必填”的字段为空，也会引发错误。
• 默认值。设置预填充值。请注意，这将覆盖您在占位符文本中输入的任何内容。
• 占位符文本。字段中的灰色提示文本。在大多数现代 web 表单中，这是用来代替工具提示的。
• 描述。将出现在字段正下方的字段的简短描述。

表单管理

配置表单时选择“保存到数据库”会将所有表单域保存到您的项目数据库中。如果您导航到根(example.com)管理，从侧边栏中选择表单提交，并扩展到全屏，您将看到一个类似图 7-12 的窗口。

图 7-12。

Form Submissions in the Admin tool

“表单提交”窗口允许您删除提交的表单，以及将所有提交的表单导出到外部文件。可用的格式有 CSV、JSON、YAML 和 Microsoft Excel。对于导出表单数据用于外部程序，甚至导入邮件列表管理器非常有用。

摘要

本章我们只讨论了三个插件，Easy Thumbnails，CMSplugin-filer 和 Djangocms-forms；django CMS 有这么多可用的插件，每周都有更多的插件被添加进来，以至于没有足够的空间来涵盖它们。

如果你想自己探索 django CMS 可用的全部插件，一个好的起点是 django CMS 项目网站: http://www.django-cms.org/en/addons/ .

在下一章中，我们将把这三个插件，连同第六章的基本插件一起，很好地用于为我们的站点创建一些内容。

Footnotes 1

http://easy-thumbnails.readthedocs.org/en/2.1/