用python搭建一个校园维基网站（二）—— 可编辑内容的首页的创建

專 欄

treelake ，Python中文社区专栏作者

项目Github地址：

https://github.com/zr777/school-wiki

项目总体简介请看 用Python搭建一个校园维基网站（一）
本文可独立使用，创建了一个可编辑内容的首页，展示了wagtail的一些基础用法。文末为本文所创项目文件github地址。 比较详细，新手可尝试，不过最好有一定Django基础。

项目结构概观

• 首先使用wagtail start genius（pip install wagtail安装依赖）创建名为genius的工程文件夹，cd genius进入目录。

• 在windows命令行输入tree /a /f > 1.txt在当前目录下生成1.txt看到如下的项目结构。

1、manage.py是Django项目通用的管理脚本(通过python manage.py 某命令参数使用)。 
2、requirements.txt用于存储当前项目的依赖列表(自动生成的为Django和wagtail，虚拟环境(virtualenv)下可用pip freeze >> requirements.txt追加)。 
3、genius包含项目主要信息，有主路由(urls.py)、wsgi接口(wsgi.py)、配置文件夹(分基础配置base.py、开发环境配置dev.py与生产环境配置production.py，后二者依赖基础配置)、全局静态资源文件夹(static)与模板资源文件夹(templates)。 
4、home是自动生成的app文件夹，包含了models.py页面数据模型和templates模板文件夹。默认生成的models.py中定义了一个简单的HomePage类(继承自wagtail的Page类)来代表一个页面(即默认的欢迎页)的模型(该简单模型的可编辑内容部分只有title字段)。在wagtail的概念中，页面模型和模板文件是默认关联的，如HomePage默认对应的模板为templates/home/home_page.html(注意命名的转换关系)，而欢迎页http://127.0.0.1:8000中的大部分内容就在该模板中(该模板使用extends语句继承genius\templates\base.html，并使用block语句填充相应内容)。如下：

5、search则是自动生成的提供搜索功能的app文件夹，由于基于wagtail.wagtailsearch所以只包含了views.py视图文件和templates模板文件夹。暂时不管。

创建wiki主页

• 我们先清空数据库，python manage.py flush或者直接删除db.sqlite3数据库文件。

• 在项目根目录下删除home文件夹，新建一个名为wiki的文件夹代表wikiapp，并将genius\settings\base.py配置文件中第28行左右的INSTALLED_APPS列表中的home改为wiki，以此来向配置文件注册我们的app。并在wiki文件夹里添加目录和空文件：

• 现在创建我们的主页模型，主要元素如下：

我们的WikiHome页面模型中需要图中红色高亮的一系列字段，其中title字段继承自Page类，不用额外添加，image字段为连接到wagtailimages.Image模型的外键。content_panels列表提供了该页面模型在后台管理编辑页面的呈现内容。 
此外，对于TopLink和LittleIntros我们需要另外新建两个继承wagtail提供的Orderable(使有序)的非页面模型。

WikiHomeLittleIntros的字段有fontawesome图标类名，小标题和简述，如下图。还包含了一个wagtail提供的对ForeignKey进行了一层封装的ParentalKey外键连接到它所属的WikiHome页面。类似的，panels表明出现在可编辑区。

WikiHomeTopLink类似，为了层次上更清晰，采用了多重继承，在models.py中只定义ParentalKey外键，而在另一个文件中定义了RelatedLink模型，包含的字段有链接文本和具体链接，只是具体链接可能为外链、某个页面或某个文档，占用了三个字段，此外还利用@property装饰器为该模型添加了link属性，来返回它的具体链接，这样在模板中就可以使用.link调用。 
综上，models.py的内容因篇幅有限，代码已上传至社区小密圈，可点击阅读原文下载。在models.py旁新建umodels.py文件供models.py引用：

• 这样，我们的wiki首页模型就定义好了。

• 该创建页面模型对应的模板了，在wiki文件夹下新建templates\wiki\wiki_home.html模板文件。

• 首先要考虑的是模板的大概样式该怎么做，感谢开源世界，我们找到了轻量美观的purecss框架。

它有一系列现成的layouts供我们使用，选择最适合本次主页的样式，查看源码可以得到详细的信息，在这里，为了简便，我们直接使用了该layout的额外样式表的链接(最好处理为本地的css样式文件，使用Django的static标签引用)。 
对于模板来说，它对应的页面模型处于它的上下文环境，在模板中可以调用到该页面模型中的所有元素(使用Django的模板语言)。我们要按照页面排版将元素填充进去。 
修改wiki_home.html