django实战项目 内容管理系统cms (五)模版层

清明:清明之日萍始生,又五日鸣鸠拂奇羽,又五日戴胜降于桑。

2805

Bootstrap

我们前端使用的模版是基于Bootstrap框架的。

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

我们不一定要多么擅长前端的知识,但至少要能看得懂,能修改模版。html,css,js,Bootstrap,jQuery, AJAX这些都要略知一二。html,css大部分都要懂,两者语法都比较简单,可以去 这里 大致了解一下,遇到不会的再去查。js可以先放一边; AJAX,jQuery我们后面会讲到一点点,所以也先不管。

我们现在稍微来了解一下Bootstrap, 讲两点:

一个是字体图标(glyphicon),我们的index.html文件中有不少glyphicon,比如评论对应的图标就是.glyphicon .glyphicon-comment,具体的对应关系参阅 这里, 你可以试着修改index.html中的图标。

另一个是网格系统(Grid System),你可以看到我们的index.htm文件中有class=”col-sm-3″或者class=”col-sm-12″ 这样的代码,12代表占据这个区块的全部尺寸,3则代表3/12的尺寸。 具体参见 这里

 

django模版层

1. index显示文章标题和内容的前80个字符

我们修改index.html文件的<!– Center Column –>:

变量是被 {{}}括起来的部分,标签(Tags)是由{%%} 来定义的。truncatechars_html:80 ,safe,date:”j M”是过滤器,参阅这里 , 前者表示显示content的前80个字符,safe是让content不显示html的标签,date:”j M” 改变日期的显示格式。

2. 登录表单的显示

修改index.html文件的<!– Right Column –>:

request.user.is_authenticated是django内置的认证系统中的方法,参见  django 文档, 如果用户已登陆则显示用户名,和登录状态;如果用户没有登录则显示登录表单,csrf_token是用于跨站请求伪造的防护,参阅django 文档,‘loginform.non_field_errors’是表单模块(forms.py)自带的错误提示信息 参见 django 文档

一个小提示:

在上一篇文章中我们的index.html文件有‘<script src=”{% static “csrf.js” %}”></script>’ 这么一行代码,这是为了预防csrf_token引发的一个错误,具体什么错误我忘了(手动汗!!),如果你没遇到可以不用管,如果遇到了,把以下代码保存名为csrf.js放入static文件夹中:

 

3 条评论

  • james 2017年5月10日 回复

    这个csrf.js文件无法运行,只有把头尾的以下部分去掉,才不会报错,有问题吗?
    $(document).ajaxSend(function(event, xhr, settings) {
    ####
    这部分保留
    ####
    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
    xhr.setRequestHeader(“X-CSRFToken”, getCookie(‘csrftoken’));
    }
    });

  • james 2017年5月10日 回复

    还有就是,新的用户(NewUser)登录的时候,以下代码

    user = authenticate(username=username, password=password)

    使用返回为Null。
    只有初始时注册的超级用户可以登录,请问这是什么问题?
    一个线索:admin功能看这些新用户的密码都是明文,只有超级用户的密码是密文。

  • james 2017年5月10日 回复

    谢谢D.Roger大神的分享,收益颇多!

发表评论

电子邮件地址不会被公开。 必填项已用*标注