django套用模版

目录

1、创建django项目

2、在pycharm当中打开项目

3、环境变量的配置

4、修改设置，路由和视图文件

settings.py文件

views.py文件

5、修正样式

6、套用模版

｛% block 名字 %}

 { % endblock %}

{% extends 'base.html' %}

{% include 'newslistpic.html' %}

---

1、创建django项目

操作

1. 切换到想要创建目录的位置
2. Shift+鼠标右键 --> 在此处打开命令窗口
3. 执行activate djangopath，**环境
4. 执行django-admin startproject 项目名字

注意：

1. Django-admin是Django的命令，如果在常规的python环境下，执行前需要将python的 scripts目录添加到环境变量里
2. Django-admin在哪个目录下执行，项目就创建在哪个目录下

2、在pycharm当中打开项目

打开项目时，必须是创建的django项目那个文件夹，不能是上级目录或者下级目录

在Blog目录下，新建一个static目录存放静态文件，新建一个templates目录存放html文件

在Blog目录下的Blog目录下新建一个views.py文件

3、环境变量的配置

打开pycharm-->File --> settings --> Project: 项目名 --> Project Interpreter

然后选择之前配置好的了环境

如果是之前配置过，但是下拉菜单也没有，就可以点那个show all，查看有没有

如果是第一次配置，那么需要添加

 

然后选择之前配置过的环境

 

4、修改设置，路由和视图文件

settings.py文件

在TEMPLATES列表内的'DIRS'对应的列表添加os.path.join(BASE_DIR,'templates')

就可以让templates目录被导入

然后找到STATIC_URL = '/static/'，在它后面添加STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

 

views.py文件

设置返回的内容

然后打开urls.py文件

导入views文件，和在urlpatterns列表中添加路由和视图

 

5、修正样式

然后打开服务器

在浏览器的地址栏中输入地址，发现有错误，这个错误是因为编码不对

 

 

打开about.html，把编码改为utf8

再重新进一次，就可以了，但是样式上有错误，所以我们接下来把样式也修正一下

先用标签导入static，然后用标签和地址串起来，如红线所示

再打开浏览器，进入页面

发现图片也没有载入，然后我们也把图片路径也修改一下

按ctrl+f然后搜索image，发现了这个路径，然后把image改成/static/image，因为这个页面只有一个图片，所以就直接改了

如果有很多图片的话，则需要使用替换ctrl+r

进浏览器查看效果

 

6、套用模版

发现，这个页面的头和尾基本一样，所以如果制作其它的页面的时候，只需要把要修改的地方给修改一下，再套用模板的头和尾就行

我们把base.html作为模版，然后把它中间的代码删掉

显示效果如下，中间已经没有内容了

 

之后我们把中间缺的内容部分加一个模块

｛% block 名字 %}

 { % endblock %}

然后在想套用头和尾的那个页面（这里是listpic.html文件)继承base.html

{% extends 'base.html' %}

block模块之间，是已经写好的中间内容的代码

然后在views文件中添加视图

效果如下，已经把中间缺失的内容补上了

 

或者使用另一种方法

把base.html复制出来一份，命名为article.html

newslistpic.html中写的是中间的内容

如果不套用artical.html的话，效果是这样的

我们把它套入到article.html，在article.html中间空出来的位置，使用

{% include 'newslistpic.html' %}

然后修改views.py文件

修改urls.py文件

打开浏览器查看，可以看到已经套用成功了