1.在根目录下创建一个static文件夹
在settings文件的最后加上
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
注意:STATICFILES_DIRS是一个元组,所以只有一个参数也一定要加上逗号!
static是静态文件地址,就是static文件夹。
2.切换到views.py文件
把return最后的字典提出来,替换成一个参数
def get(self, request, name):
data = {}
data['name'] = name
data['array'] = range(10)
return render(request, self.TEMPLATE, data)
然后在index.html中加入下面的代码
<ul>
{% for item in array %}
<li>{{item}}</li>
{% endfor %}
</ul>
遍历array,然后将里面的内容以列表形式展示出来
再添加一个forloop.counter0
<ul>
{% for item in array %}
<li>{{item}} ---- {{ forloop.counter0 }}</li>
{% endfor %}
</ul>
可以看到是从0开始计算索引的。
forloop.counter就是从1开始计算索引的
{{ forloop.revcounter }} 从最大索引,一直递减到1
{{ forloop.revcounter0 }} 从最大索引递减,一直递减到0
再加个if
<li>{{item}} -- {{ forloop.counter0 }} -- {{ forloop.counter }} --
{{ forloop.revcounter }} -- {{ forloop.revcounter0 }}
{% if forloop.first %}
is first
{% elif forloop.last %}
is last
{% endif %}
</li>
注意 if的格式,以及if结束之后,要{% endif %}!
forloop.first 判断是否是循环的第一个
forloop.last判断是否是循环的最后一个
{% empty %} 如果是判断for循环是空的,会执行这里
{% empty %}
<li> is empty </li>
但如果非空,就不会执行empty的代码
<a href="{% url 'index' 'congcong' %}">return</a>
index就是路由的别名,然后他还有一个name参数,就给他传一个 ‘cong’ ,注意这个要加引号
点击这个标签,就跳到了’congcong’ 也就是我们传的参数
3.再看一下静态文件如何加载的
在static下新建一个index.css文件,加载静态文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>django-template</title>
{% load static %}
<link rel="stylesheet" href="{% static 'index.css' %}">
</head>
<body>
</body>
</html>
注意:1.{% load static %} 一定要在index.css文件引用之前,因为代码是从上向下执行的,如果执行到引用但是还没有load就会报错。
2.这是一个坑。。。
我用的是pycharm,然后之前上面写了一些代码不想用了,就给注释掉了,结果运行之后,依旧能读取到上面被注释了的代码。。。就一直报错,真的坑
然后我们检查一下页面,在source中可以看到css文件被成功导入啦~
4.如何定义一个基础的HTML模板,以及如何继承HTML模板
在templates中新建一个base.html文件。
定义模块,比如在head标签中,开头加上{% block head %},然后结尾再关闭。
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block css_style %}
{% endblock %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block js_script %}
{% endblock %}
</body>
</html>
给各个部分定义好block,一个基本的模板就创建好啦~
接下来如何引用:
想要让我们的html文件中有刚刚base.html的全部内容,只要一句话就可以了:
{% extends 'base.html' %}
感觉就很像一个引用,这个extends不需要end了。
这时再看一下浏览器,发现基础的模板都有了
如果想要重写模块里的内容呢,就可以调用一下相应的模块:
(这时index.html文件里的)
{% extends 'base.html' %}
{% load static %}
{% block css_style %}
<link rel="stylesheet" href="{% static 'index.css' %}" />
{% endblock %}
记得一定要load static!!
确实有加进来,source里也能看到有css文件。
然后我们还可以再重写一下title
{% block title %}
艰难django
{% endblock %}
也实现啦~
body里的content block也是一样的
{% block content %}
<h1> hello {{name}} </h1>
{% endblock %}