Python，Django加载自己的HTML，模板的使用和加载css文件

上篇简单做了一个hello world，下面来说说，在web开发的时候，肯定有很多自己的APP，就是很多的模块，通常我们会看到这样，www.XXX.com/index,这种类型，其实index，就相当于一个APP，而这个index肯定是一个比较大的HTML，等等，这里就讲解，加入我们有一个自己的APP，怎样让别人通过www.XXX.com/index的方式来访问自己。

这里首先，大家可以去百度去下载简单的html的模板，去搜索，商务html模板，html模板，html简易模板，等等关键字，就可以下载一个简单的html，这里就不写一个了，我也是从网上下的。

正题

接着上篇，我们进入到news的文件夹下，我这里从网上下载了一个简单的HTML的模板，然后在news文件夹下新建一个文件夹，叫templates，也就是django的模板，下面会以模板的形式来加载，然后把从网上下载的模板拖进去，我这里喜欢再在模板文件夹下再建立一个文件夹，针对这个app，以后有别的app就再建立一个，方便区分是这个app，就叫index，目录结构大概是这样的

接下来，我们就要去加载这个html的文件，打开我们的views.py文件，cd 到news文件夹下，上篇我们讲到，一个helloworld的显示是这样的

接下来我们改造一下，用render来加载，新建一个方法，

这样就可以了，然后通知我们的app的url来加载这个html，上篇我们讲到加载hello是这样的

是以正则表达式的方式去加载，这里显而易见，要想加载index，只需要将hello改成hello就可以了，url(r'^$',views.index,name='index'),

，接下来就是通知我们的django来加载我们的app了，这时候需要打开，django下的urls.py文件，而这个时候，其实我们不需要改什么了，因为上篇我们已经讲到怎么去加载我们的app，其实也是正则表达式，上篇显示helloworld，这篇显示html，其实改的就是我们自己的app，所有，这个urls里面我们什么都不需要改，大概是这样的

OK，这时候，我们去运行一下我们的app， python3 manage.py runserver，这个时候，会发现出错了，

原因是我们使用了模板，index.html这个文件没有找到，所以我们要想办法告诉他我们的模板。 接下来，我们打开我们系统为我们创建好的那个settings.py，那个文件，可以看到这个，

OK，我们将我们的APP加载进去，j就是我们的news APP，

这样还是不行，因为我们还是没有加载我们的模板，怎么去加载呢，往下翻，

OK，是不是看见一个和我们文件夹一模一样的templates，这就是我们需要记载模板的地方，会看见有个叫DIRS的key，他是一个list，将我们的模板的位置，放在里面就可以了，

OK ,我们再来看一下我们的目录结构，

OK ,可以看见，我们的html，是放在news/templates/index下面，OK，下面我们就把这个路径复制进去就OK了，这个时候，我们的APP也加载成功了，模板也加载成功了，我们run一下看看，

这样就代表你的代码没有问题了，

接着在我们的浏览器输入，http://127.0.0.1:8000/news/，就可以看到我们加载的html了，这时候会发现一个问题，没有样式，也就是没有加载css文件，

接下来我们就想办法，让他加载css文件，django加载css文件，可以以静态文件的形式加载，也可以以URL的形式加载，比如说我们写好一个样式文件，放在我们的服务器上，然后直接把url写到我们的setting文件里面就可以了，拉到settings文件的最下面，会看到这个，注释里面有个地址，打开，就会告诉我们怎么去加载，官方也是不建议我们使用加载本地静态文件的方式，因为我这里没有挂上去，所以就讲解加载本地css文件

OK ,下面我们就创建一个静态文件夹，放在我们的APP下面，cd到我们的app，news文件夹下，新建一个static文件夹，然后把css文件放进去，目录结构大概是这样的，

OK,目录创建好了，文件放进去了，下面就是告诉settings去加载哪个目录下的，哪个文件，打开settings.py文件

在最后加上这个 STATIC_URL = '/news/static/'

STATICFILES_DIRS = (

)

，告诉他去加载哪个目录，这个时候我们的配置就搞定了，然后打开我们的index.html，文件里面肯定会有地方去加载这个style.css文件，全局搜索找到文职，然后以静态文件的形式去加载，代码如下，

这样我们的css文件就加载成功了，代码主要是，{% load static %}，这段代码去载入静态文件，这个地方去替换css文件的加载方式，{% static 'style.css' %}去改变css文件的加载方式，这样就OK了，这个时候，我们去刷新一下我们的浏览器，

OK，这就是下载的原始的html文件，这样，我们的html文件就加载成功了。