博客五部曲之二 - 高级博客


572 浏览 2 years, 11 months

9 Django Crispy Form

版权声明: 转载请注明出处 http://www.codingsoho.com/

Django-crispy-forms能够帮忙我们快速的优化form显示

http://django-crispy-forms.readthedocs.io/en/latest/

安装

pip install django-crispy-forms

在settings里,将crispy_forms添加到INSTALLED_APP,同时添加配置参数CRISPY_TEMPLATE_PACK = 'bootstrap3',因为目前我们用的bootstrap版本就是3.3

在post_form.html,首先加载标签{% load crispy_forms_tags %},然后渲染form的地方修改为{{form|crispy}} 这时候可以看到form的样式已经变得非常优美,但是有个问题是content编辑器有缩进,查看HTML代码可以看到主要是下面css影响了,在前后都有25%的缩进

.wmd-panel {
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    min-width: 500px;
}

修改css,在base.css去掉这两个margin

.wmd-panel {
    margin-left: 0px;
    margin-right: 0px;
}

但是查看效果,并没有生效,检查css样式,这个css没起作用

检查base.html和post_form.html

<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">

{% block head_extra %}
{% endblock %}
{% block head_extra %}
{{form.media}}
{% endblock %}

Form.media会在页面内渲染这个css,所以需要提供base.css里面的优先级,添加!important即可起作用。

执行python manage.py collectstatic将base.css包括到静态文件cdn