在我们开发Django项目时往往需要一个好看的前端页面,然而自己再耗费大量的时间去从0开始搭建前端页面就太不切实际了,所以大部分人都会去下载现有的前端模板使用,比如我就在Bootstrap中文网下载了一个模板准备用在我的项目中。下面是我下载的模板的文件夹内容:
下载的模板,直接打开网址是正常的
但是copy到项目的模板里再访问就变成:
这是django对静态资源的处理机制导致的,执行下面操作恢复正常
1.将css,js,img(我这边都在assets那个文件夹里)都放入myapp/static(需手动创建)
非必要操作:
接着在project/settings.py下输入:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
在终端输入:
python manage.py collectstatic
2.
html开头加入:
{% load static %}
所有类似于
<link rel="stylesheet" href="assets/css/app.css">
替换为
<link rel="stylesheet" href="{% static 'assets/css/app.css' %}">
将
<a class="navbar-brand font-weight-bolder mr-3" href="index.html"><img src="assets/img/logo.png"></a>
替换为
<a class="navbar-brand font-weight-bolder mr-3" href="index.html"><img src="{% static 'assets/img/logo.png'%}"></a>
将
<script src="assets/js/app.js"></script>
替换为
<script src="{% static 'assets/js/app.js' %}"></script>
现在就能正常访问了
对于模板的网址的切换也要修改:
<a href="post.html">
修改为
<a href="/post">
然后在urls.py和views.py进行配置就可以了