How to use local CSS / JS file through Django

Time:2020-5-31

This article mainly introduces how to use the local CSS / JS file through Django. The example code in this article is very detailed, which has a certain reference learning value for everyone’s study or work. You can refer to the following for friends who need it

I read a lot of articles on how Django uses local CSS / JS on the Internet, many of which are not very clear.

Today, I finally come to verify one that can be used. Record it

stay manager.py Create a static folder at the same level, which contains CSS, JS, image and other files or folders

My folder tree:

➜ FileService git:(master) ✗ tree
.
├── 2kill_port.sh
├── FileService
│  ├── __init__.py
│  ├── __pycache__
│  │  ├── __init__.cpython-37.pyc
│  │  ├── settings.cpython-37.pyc
│  │  ├── urls.cpython-37.pyc
│  │  └── wsgi.cpython-37.pyc
│  ├── settings.py
│  ├── urls.py
│  └── wsgi.py
├── db.sqlite3
├── en_bg.jpg
├── fileoperation
│  ├── __init__.py
│  ├── __pycache__
│  │  ├── __init__.cpython-37.pyc
│  │  ├── admin.cpython-37.pyc
│  │  ├── models.cpython-37.pyc
│  │  └── views.cpython-37.pyc
│  ├── admin.py
│  ├── apps.py
│  ├── migrations
│  │  ├── __init__.py
│  │  └── __pycache__
│  │    └── __init__.cpython-37.pyc
│  ├── models.py
│  ├── templates
│  │  ├── bg_homg.html
│  │  └── home.html
│  └── views.py
├── files
│  ├── 11.log
│  ├── 22.log
│  ├── 44.log
│  ├── th.jpeg

│  └── �5�1��2��40�7��1.pdf
├── kill_port.sh
├── manage.py
└── static
  ├── images
  │  └── en_bg.jpg
  └── style
    └── style.css

Then just in fileservice/ settings.py Set it in, and add the following code at the end


STATIC_URL = '/static/'
STATICFILES_DIRS=[
  os.path.join(BASE_DIR,'static')
]

Finally, you only need to import in the HTML file you use in the following ways:

<head>
  <link rel="stylesheet" type="text/css" href="../static/style/style.css" rel="external nofollow" />
  <meta charset="UTF-8">
  < title > file transfer < / Title >
</head>

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.