【django轻量级框架】Django项目导入css,js,images等静态文件

李响Superb 2021-07-20 03:35:40
前端开发 css


1 环境
windows10
python3.6.8
django2.0

  • 1.
  • 2.
  • 3.
2 方法

创建项目
从网络上下载模板,比如模板之家
将模板中的html文件放入项目的template文件夹下,其实也可以放到其他目录下,只是设置的时候改一下目录即可。
项目的根目录(与manage.py)或APP下创建一个文件夹命名为static用于保存css、js、images等文件
打开项目,在settings.py文件里寻找TEMPLATES选项,添加static文件
(Base_dir表示项目目录,根据自己项目实际情况修改)

'DIRS': [os.path.join(BASE_DIR, 'templates'),
os.path.join(BASE_DIR, 'static').replace('\\', '/')],

  • 1.
  • 2.

在settings.py最底部添加(根据你自己CSS等文件名字修改)

STATIC_ROOT = os.path.join(BASE_DIR, 'static').replace('\\', '/')
STATICFILES_DIRS = (
('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
('fonts', os.path.join(STATIC_ROOT, 'fonts').replace('\\', '/')),
('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
)

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

修改urls.py文件在文件头添加

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

  • 1.

在文件尾部添加

urlpatterns += staticfiles_urlpatterns()

  • 1.

修改HTML文件里面的路径
导入css
重点是添加/static/,根据实际情况修改。

<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />

  • 1.
  • 2.

导入js

<script src="/static/js/jquery-1.11.1.min.js"></script>

  • 1.

插图

<img src="/static/images/4.jpg" alt=" " class="img-responsive" />

  • 1.
3 效果预览

我自己搭了一个是可行的。

http://39.106.66.222:8000/

  • 1.
版权声明
本文为[李响Superb]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_14013325/2890414

  1. 利用Python爬虫获取招聘网站职位信息
  2. Using Python crawler to obtain job information of recruitment website
  3. Several highly rated Python libraries arrow, jsonpath, psutil and tenacity are recommended
  4. Python装饰器
  5. Python实现LDAP认证
  6. Python decorator
  7. Implementing LDAP authentication with Python
  8. Vscode configures Python development environment!
  9. In Python, how dare you say you can't log module? ️
  10. 我收藏的有关Python的电子书和资料
  11. python 中 lambda的一些tips
  12. python中字典的一些tips
  13. python 用生成器生成斐波那契数列
  14. python脚本转pyc踩了个坑。。。
  15. My collection of e-books and materials about Python
  16. Some tips of lambda in Python
  17. Some tips of dictionary in Python
  18. Using Python generator to generate Fibonacci sequence
  19. The conversion of Python script to PyC stepped on a pit...
  20. Python游戏开发,pygame模块,Python实现扫雷小游戏
  21. Python game development, pyGame module, python implementation of minesweeping games
  22. Python实用工具,email模块,Python实现邮件远程控制自己电脑
  23. Python utility, email module, python realizes mail remote control of its own computer
  24. 毫无头绪的自学Python,你可能连门槛都摸不到!【最佳学习路线】
  25. Python读取二进制文件代码方法解析
  26. Python字典的实现原理
  27. Without a clue, you may not even touch the threshold【 Best learning route]
  28. Parsing method of Python reading binary file code
  29. Implementation principle of Python dictionary
  30. You must know the function of pandas to parse JSON data - JSON_ normalize()
  31. Python实用案例,私人定制,Python自动化生成爱豆专属2021日历
  32. Python practical case, private customization, python automatic generation of Adu exclusive 2021 calendar
  33. 《Python实例》震惊了,用Python这么简单实现了聊天系统的脏话,广告检测
  34. "Python instance" was shocked and realized the dirty words and advertisement detection of the chat system in Python
  35. Convolutional neural network processing sequence for Python deep learning
  36. Python data structure and algorithm (1) -- enum type enum
  37. 超全大厂算法岗百问百答(推荐系统/机器学习/深度学习/C++/Spark/python)
  38. 【Python进阶】你真的明白NumPy中的ndarray吗?
  39. All questions and answers for algorithm posts of super large factories (recommended system / machine learning / deep learning / C + + / spark / Python)
  40. [advanced Python] do you really understand ndarray in numpy?
  41. 【Python进阶】Python进阶专栏栏主自述:不忘初心,砥砺前行
  42. [advanced Python] Python advanced column main readme: never forget the original intention and forge ahead
  43. python垃圾回收和缓存管理
  44. java调用Python程序
  45. java调用Python程序
  46. Python常用函数有哪些?Python基础入门课程
  47. Python garbage collection and cache management
  48. Java calling Python program
  49. Java calling Python program
  50. What functions are commonly used in Python? Introduction to Python Basics
  51. Python basic knowledge
  52. Anaconda5.2 安装 Python 库(MySQLdb)的方法
  53. Python实现对脑电数据情绪分析
  54. Anaconda 5.2 method of installing Python Library (mysqldb)
  55. Python implements emotion analysis of EEG data
  56. Master some advanced usage of Python in 30 seconds, which makes others envy it
  57. python爬取百度图片并对图片做一系列处理
  58. Python crawls Baidu pictures and does a series of processing on them
  59. python链接mysql数据库
  60. Python link MySQL database