专栏首页Python中文社区用python搭建一个校园维基网站(二)—— 可编辑内容的首页的创建

用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),作者:treelake

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 构建一个pip安装的车辆路径显示的Python包

    專 欄 ❈treelake,Python中文社区专栏作者。 简书: http://www.jianshu.com/u/66f24f2c0f36 ❈ 最近有一些...

    Python中文社区
  • 100行代码爬取全国所有必胜客餐厅信息

    极客猴,热衷于 Python,目前擅长利用 Python 制作网络爬虫以及 Django 框架。

    Python中文社区
  • Python开源项目介绍:网站日志分析工具

    日志分析在web系统中故障排查、性能分析方面有着非常重要的作用。该工具的侧重点不是通常的PV,UV等展示,而是在指定时间段内提供细粒度(最小分钟级别,即一分钟内...

    Python中文社区
  • 【短文本聚类】TextCluster:短文本聚类预处理模块 Short text cluster

    项目地址,阅读原文可以直达,欢迎参与和Star: https://github.com/RandyPen/TextCluster 这个项目的作者是AINLP交...

    zenRRan
  • 用 Weex Vanilla 写 Todolist 的尝试

    关于如何在 Weex 上使用 Vanilla 代码写页面, 在前面有一篇文章已经介绍过了: https://hashnode.com/post/run... 大...

    前端博客 : alili.tech
  • xadmin建站后续篇

    不需要建更多设置,More Settings,后期直接python manage设置

    Centy Zhao
  • 针对 iOS 的 Confluence 6 服务器

    Confluence 针对 iOS 的服务器针对 iPhone 和 iPad 是一个相同的引用,你可以选择最适合你的设备来进行工作。如果你不希望使用你的 iPh...

    HoneyMoose
  • H.264格式分析

    一.H.264基本流结构 H.264 的基本流(elementary stream,ES)的结构分为两层,包括视频编码层(VCL)和网络适配层(NAL)。视频编...

    _gongluck
  • 针对 Android 的 Confluence 6 服务器

    如果你新的想法让 app 能够变得更加有用?我们希望你能够为我们提供反馈(或者使用下面的路径 设置(Settings) > 反馈(Feedback) )来向官方...

    HoneyMoose
  • 【原创】国产分析工具谁更牛?百度统计和CNZZ实际使用效果评测

    近年,我一直服务于中小企业运营,网站分析大多直接使用市面上的第三方统计软件。最早使用51la和量子恒道,后来使用GoogleAnalytics、CNZZ、百度统...

    iCDO互联网数据官

扫码关注云+社区

领取腾讯云代金券