A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

这两天被django折磨的快崩溃了。。。要做一个网页,结果CSS 和图片总是加载不出来。。。。官方文档中教了一部分,上网看乐各种教程都不行,研究了好几个小时,东拼西凑各个地方学一点,终于弄出来了,赶紧记录下来。

django用的静态文件路径:STATICFILES_DIRS部署的方式,文件路径一定要设置好。
注: python2.7 django1.10.6; 项目mysite,项目下有一个应用myapp

一、目录结构:
整个目录结构是这样的:

| mysite
| —— manage.py
| —— mysite
| —— | —— settings
| —— | ——…(urls等)
| —— templates
| —— myapp
| —— …(views等)
| —— | —— templates
| —— | —— | —— myapp
| —— | —— | —— | —— home.html
| —— | —— | —— | —— static
| —— | —— | —— | —— | —— css
| —— | —— | —— | —— | —— images

注意,文件夹结构比较复杂。
在项目文件夹下有一个templates文件夹,不过这个文件夹暂时没什么用,可以不用管(我也不知道为什么要有这么个文件夹)。
应用文件夹结构是这样的:

“myapp/templates/myapp/home.html”;
“myapp/templates/myapp/static/images”;
“myapp/templates/myapp/static/CSS”;

二、设置templates和静态路径

  • 在settings.py中设置templates路径
TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [os.path.join(BASE_DIR, 'myapp/templates').replace('\\', '/'),                 os.path.join(BASE_DIR, 'templates').replace('\\', '/')],     }]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 在settings.py文件的最后加上以下内容:
STATIC_ROOT = os.path.join(BASE_DIR, 'myapp/templates/myapp/static').replace('\\', '/')STATICFILES_DIRS = (    ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),    ('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),)
  • 1
  • 2
  • 3
  • 4
  • 5

三、修改urls.py文件
在urls.py开头加上一句:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
  • 1

在urls.py的最后加上以下内容:

#设置静态文件路径urlpatterns += staticfiles_urlpatterns()
  • 1
  • 2

四、修改html文件
home.html文件相关内容如下:

<!DOCTYPE html><html lang="en"><head>    <link href="/static/css/style.css" rel="stylesheet" type="text/css" />    <title>Home</title></head><body>    <a href="https://www.baidu.com/>        <img src="/static/images/logo.png" alt="logo"/>    </a></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

改成自己的图片名称,注意图片和link的前缀:/static/images/ 别写成 static/images/ ,这样会无法显示。


1 个回复

倒序浏览
奈斯,加油加油
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马