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

專 欄

treelakePython中文社区专栏作者

项目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.pyDjango项目通用的管理脚本(通过python manage.py 某命令参数使用)。 2、requirements.txt用于存储当前项目的依赖列表(自动生成的为Djangowagtail,虚拟环境(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类(继承自wagtailPage类)来代表一个页面(即默认的欢迎页)的模型(该简单模型的可编辑内容部分只有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列表提供了该页面模型在后台管理编辑页面的呈现内容。 此外,对于TopLinkLittleIntros我们需要另外新建两个继承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样式文件,使用Djangostatic标签引用)。 对于模板来说,它对应的页面模型处于它的上下文环境,在模板中可以调用到该页面模型中的所有元素(使用Django的模板语言)。我们要按照页面排版将元素填充进去。 修改wiki_home.html中内容(因篇幅有限,代码已上传至小密圈,点击阅读原文下载即可)。

  • 这样,大致就成功了,但是模板中倒数几行里的{% load wiki_tags %} {% wikihome_footer %}还没有实现,它就是之前图中黄色框圈住的页脚了。考虑到页脚的内容一般比较固定,我们使用snippets和模板标签tag的形式来实现。它使得我们既可以在管理控制页面修改该页脚的内容,也使得页脚具有自己的一小段html模板,可以简便地被其它模板所调用。
  • wiki文件夹下的models.py文件旁新建一个snippets.py文件

实际上,它还是创建了一个Django模型,只包含了一个富文本字段,但是利用Wagtail提供的register_snippet装饰器我们可以简便地将其注册到管理界面,以便在管理界面修改。但是,还不能在模板中调用它,我们需要将它注册到Djangotag标签系统中,在wiki目录下新建templatetags文件夹,在该文件夹下新建wiki_tags.py文件,添加如下内容。同样,借助简单的装饰器注册了该模板标签,且与wiki/tags/footer.html片段模板绑定,并提供footer_text作为上下文。

然后就该创建对应的片段模板文件了。与上面代码中绑定的html文件路径对应,在wikiapp目录下新建templates\wiki\tags\footer.html文件,添加如下内容:

好了,主页的所有代码部分都结束了。让我们尝试运行。在项目根目录下执行:

登录管理界面:http://127.0.0.1:8000/admin/

点击红圈部分来到如下图页面,删除默认页面。

确认删除后,选择在根目录下新建页面

这时便来到我们的创建的WikiHome模型的页面元素填写界面,依次填写后按红圈处Publish提交。

页面创建好后,我们需要将其挂载到站点上来正常显示,点击下图红框创建站点

如下图创建并保存,Root Page选择新创建的页面。

最终,访问http://127.0.0.1:8000/ 便可以看到页面效果。

不过细心的朋友可能会发现页脚还是空的,我们还需要在管理界面设置下页脚,点击snippets栏,并点击红圈

创建并保存

大功告成,我们的页脚也完善了,整个首页的制作就此完成。全部代码与样例页面所在数据库在github上,wagtail-tutorial-1,可直接运行,管理员账号lake,密码123,也可另创管理员。

原文发布于微信公众号 - Python中文社区(python-china)

原文发表时间:2017-04-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博文

PHPStorm发布PHP代码到远程服务器

本地Windows开发PHP的时候,想在修改文件保存时,自动上传到指定(测试)服务器上,PhpStorm提供了这个功能,设置参考如下: ? ? ? 其中的“Up...

41990
来自专栏漏斗社区

工具 | w3af系列安装篇(一)

W3af是一个基于Python的Web应用扫描器,本期我们将来唠一唠w3af的安装和使用。 ? 在windows上安装 ‍‍‍‍‍ 官网的最新版本已经不提...

41770
来自专栏Samego开发资源

让子弹飞 | 那个程序员的mac常用软件清单目录

Magnet keeps your workspace organized. Activated by dragging, customizable keyb...

16120
来自专栏点点滴滴

ovz CentOS主机安装BBR内核

1.1K30
来自专栏云计算教程系列

如何使用Shiny Server部署R应用程序

Shiny是R编程语言的库,允许您在本机R中创建交互式Web应用程序,而无需使用HTML,CSS或JavaScript等Web技术。将Shiny应用程序部署到W...

68140
来自专栏余生开发

前端开发规范

使用不带BOM的UTF-8编码 在HTML中指定编码<meta charset="utf-8">; 无需使用@charset指定样式表编码,它默认为UTF-...

17410
来自专栏用户2442861的专栏

如何在ubuntu下安装vmware-tools?以及屏幕显示太小

首先记的修改 CD ISO  为linux.iso  否则的话会弹不出那个vmwaretools  那个相关的。

29020
来自专栏运维小白

10.22 firewalld关于service的操作

Linux防火墙-firewalled firewall-cmd --get-services 查看所有的servies firewall-cmd -...

31650
来自专栏吴柯的运维笔记

分享Shell脚本几个简单字符及字符串应用实例

shell脚本中,在一行输入多个命令时: A;B;C   #执行A;执行B;执行C A&&B   #执行A,仅当A成功,才执行B A||B ...

29150
来自专栏遊俠扎彪

SVN Client常用命令

之前写过一篇关于如何安装SVN Server的内容,也亲在CentOS上实践过,可能对系统管理员比较有用,再写一篇对普通开发者有点帮助的SVN Client常用...

44170

扫码关注云+社区

领取腾讯云代金券