今天我们来学习给页面添加一个Sidebar,根据Sidebar跳转到相应的tutorial。

打开views.py,编辑single_slug函数:

def single_slug(request, single_slug):categories = [c.category_slug for c in TutorialCategory.objects.all()]if single_slug in categories:matching_series = TutorialSeries.objects.filter(tutorial_category__category_slug=single_slug)series_urls = {}for m in matching_series.all():part_one = Tutorial.objects.filter(tutorial_series__tutorial_series=m.tutorial_series).earliest('tutorial_published')series_urls[m] = part_one.tutorial_slugreturn render(request=request,template_name='main/category.html',context={'tutorial_series':matching_series, 'part_ones': series_urls})tutorials = [t.tutorial_slug for t in Tutorial.objects.all()]if single_slug in tutorials:this_tutorial = Tutorial.objects.get(tutorial_slug=single_slug)tutorials_from_series = Tutorial.objects.filter(tutorial_series__tutorial_series=this_tutorial.tutorial_series).order_by('tutorial_published')this_tutorial_idx = list(tutorials_from_series).index(this_tutorial)return render(request=request,template_name='main/tutorial.html',context={'tutorial':this_tutorial, 'sidebar':tutorials_from_series, 'this_tut_idx':this_tutorial_idx})

接下来我们需要编写tutorial.html,来显示相应的内容和Sidebar,Sidebar的写法参考materialize:

{% extends 'main/header.html' %}{% block content %}
<div class="row"><div class="col s12, m8, l8"><h3>{{tutorial.tutorial_title}}</h3><p style="font-size: 70%">Published {{tutorial.tutorial_published}}</p>{{tutorial.tutorial_content|safe}}</div><div class="col s12 m4 l4"><ul class="collapsible popout">{% for tutorial in sidebar %}{% if forloop.counter0 == this_tut_idx %}<li class="active"><div class="collapsible-header" style="background-color: #008E72; color: white;">{{tutorial.tutorial_title}}<br>(currently viewing)</div></li>{% else %}<li><div class="collapsible-header">{{tutorial.tutorial_title}}</div><div class="collapsible-body"><p><a href="/{{tutorial.tutorial_slug}}"><button class="btn waves-effect waves-light right-align" style="background-color:green-light; color:white">Go</button></a></p></div></li>{% endif %}{% endfor %}</ul></div>
</div>{% endblock %}

我上传了几个Ted视频,效果显示如下,这时点击Sidebar没有反应,我们还需要在header.html中初始化javascript,在最后一行写上:

<script>M.AutoInit();</script> ,Sidebar即可正常使用:

点击想要跳转的tutorial,点击go,即可跳转。

到此为止,我们的第一个app已经建成了,这个web app可以显示目录的类别、系列以及查看每个目录的内容。如果我们想要增加更多的功能,也非常的方便,接下来还需要学习html、数据库、python的知识,来一步步提高,多查阅帮助文档和看看喜欢的网站,然后想想如何实现,亲自动手操作一遍。

目前为止使用的都是python默认的数据库sqlite3,下一节继续对这个网站学习如何把sqlite数据库转化为mysql数据库。

参考链接:

[1] https://materializecss.com/collapsible.html

[2] https://pythonprogramming.net/dynamic-sidebar-django-tutorial/

转载于:https://www.cnblogs.com/yunxiaofei/p/10447376.html

Anaconda+django写出第一个web app(十一)相关推荐

  1. Anaconda+django写出第一个web app(五)

    今天开始学习网页风格和设计,就像python有Web框架一样,也有一些CSS框架.对于CSS框架,我们可以使用默认的样式,也可以在原基础上编辑修改.本教程使用的是materialize这个CSS框架[ ...

  2. Laravel php 框架的使用写出第一个hello world,Laravel 入门配置

    Laravel 第一次使用,如何写出第一个hello world Laravel php 框架第一次接触,遇到一些困难,在这里记录一下,有需要的童鞋可以看一下 从github上下载下来最新版,地址如下 ...

  3. 快应用之先写出第一个hello world

    快应用简介 快应用是各大手机厂商联合制定的,类似于微信小程序都是采用css+js前端开发,不同于微信的是,微信小程序依附在微信上,而快应用是可以再各大安卓应用市场上搜索直接打开,无须安装.还可以直接生 ...

  4. 【初识C语言】如何写出第一个C语言代码

    如何写代码? 1.写出主函数(main函数) 如何执行?-c语言是从主函数的第一行开始执行的 所以c语言代码中得有mian函数-入口 printf -库函数-在屏幕上打印信息 printf 的使用,也 ...

  5. 将Tomcat集成到eclipse中并写出第一条web语句

    在将Tomcat集成到eclipse中之前你需要有Tomcat这个东西,这是Tomcat官网链接Apache Tomcat® - Welcome! 进去之后会看到这个界面 点击方框中的Download ...

  6. 使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  7. [翻译]如何用YII写出安全的WEB应用

    前言 虽然本文是基于YII1.1,但其中提到的安全措施适用于多数web项目安全场景,所以翻译此文,跟大家交流.原文地址. 目录 安全基本措施... 2 验证与过滤用户的输入信息... 2 原理... ...

  8. 如何查看jinja2模板的上級_如何使用Python的Flask和谷歌app Engine来构建一个web app...

    前言 如果您想在很短的时间内使用Python构建web应用程序,那么Flask是一个非常好的选择.Flask是一个小而强大的web框架.它也很容易学习和简单的代码. 在本教程中,我将向您展示如何使用A ...

  9. 我大一的时候就写出了一个Android邮件框架

    /   今日科技快讯   / 为推动自动驾驶技术的发展和应用,北京市近期发布最新的自动驾驶车辆道路测试管理实施细则,首次允许自动驾驶车辆,进行载人和载物测试. /   作者简介   / 本篇文章来自小 ...

  10. 如何快速出稿一个优秀APP的构图

    通常一个移动端的UI设计师在接到设计项目的时候,脑海中会自动出现一些以前看多的类似的app优秀素材或者以前和现在正在使用的移动端APP中的ui设计碎片. 这对于一个刚入行或者刚毕业的设计师来说,运用起 ...

最新文章

  1. time Machine备份时间间隔
  2. spring在WEB中的应用。
  3. 实验四+149+肖雷
  4. linux 文件编码格式转换
  5. 《C语言编程魔法书:基于C11标准》——第一篇 预备知识篇 第1章 C魔法概览1.1 例说编程语言...
  6. mysql常用命令操作
  7. js多层对象数组 合并_13个你必须知道的JS数组技巧
  8. html assign无效,Object.assign的一些用法
  9. 多媒体计算机接口卡,多媒体技术基础 2.2多媒体接口卡 多媒体接口卡.docx
  10. 总结必须学习的10项.NET技术
  11. NO Scala sdk module
  12. 未解决:火狐浏览器提示不安全的链接
  13. matlab2016a安装
  14. gnome桌面终端程序 Guake
  15. 干货分享 | 最新机器学习视频教程与数据集下载(持续更新......)
  16. aspose.words 操作 word 文档-文字替换、删除首行、添加水印等方案
  17. 如何修复excel文件损坏
  18. PLC通过智能网关 MQTT对接阿里云(带CA证书加密),实现物模型数据显示
  19. 给定字符串1壹 2贰 3叁 4肆 5伍 6陆 7柒 8捌 9玖,输入对应的数字,输出对应的大写
  20. 吴晓波眼中的2018年

热门文章

  1. 系统学习NLP(二十)--SWEM
  2. 系统学习深度学习(十七)--VGG模型
  3. 数据结构c语言版堆排序,【数据结构】堆排序(C++实现)
  4. php事务和回滚,php – Mysql事务:提交和回滚
  5. ggplot2分面柱状图柱子比例一致_R语言柱状图
  6. python指定时间执行程序_如何在特定时间执行程序
  7. 基于Hadoop集群的Spark集群搭建
  8. 远程访问服务器并登录LPAR,MySQL设置远程连接服务器
  9. presto distinct用法
  10. 【CentOS 7笔记43】,防火墙和iptables filter表#