accessing static files in Django (JS CSS img)

Source: Internet
Author: User
Tags naming convention

The first reference is other articles, later reference to the article "various Django static file configuration Summary" only to see the original did not notice the version, tossing a night, wasted a lot of time. Then finally know search django1.7 access static files. It's stupid.

Environment:
Python 2.7.3
Django 1.7.5

Django is not good at dealing with static files. This kind of work should be given to the server such as Nginx or Apache. But in debugging, you still need to configure the
Django 1.7.5 configuration access to static files seems simpler than other versions. Only the following steps are required:

  1. Collect the static files, and then put them in static under the app, the directory is as follows:
    iot_app├──admin.py├──admin.pyc├──forms.py├──forms.pyc├──__init__.py├──__init__.pyc├──migrations│   ├──0001_initial.py│  ├──0001_initial.pyc│  ├──0002_auto_20150317_1623.py│  ├── 0002_auto_20150317_1623.pyc│  ├──__init__.py│  └──__init__.pyc├──models.py├──models.pyc├── static│  ├──css│  │  ├──bootstrap.css│  │  ├── bootstrap.css.map│  │  ├──bootstrap.min.css│  │  ├── bootstrap-theme.css│  │  ├──bootstrap-theme.css.map│  │  └── Bootstrap-theme.min.css│  ├──fonts│  │  ├──glyphicons-halflings-regular.eot│   │  ├──glyphicons-halflings-regular.svg│  │  ├── Glyphicons-halflings-regular.ttf│  │  ├──glyphicons-halflings-regular.woff│  │   └──glyphicons-halflings-regular.woff2│  ├──images│  │  ├──chrome.png│  │   ├──firefox.png│  │  ├──ie.png│  │  ├──opera.png│  │& Nbsp; └──safari.png│  └──js│  ├──bootstrap.js│  ├──bootstrap.min.js│&nb     sp; ├──html5shiv.js│  ├──html5shiv.min.js│  ├──jquery-1.11.1.js│   ├──jquery-1.11.1.min.js│  ├──jquery-1.11.1.min.map│  ├──jquery-1.11.2.min.js│ &nbs     P ├──jquery-1.11.2.min.map│  ├──npm.js│  └──respond.min.js├──templates│  ├──ba Se.html│  ├──buttons.html│  ├──contact.html│  ├──form.html│  ├──form_ Inline.html│  ├──formset.html│  ├──form_using_template.html│  ├──index.html│   ├──login.html│  ├──paGination.html│  └──tabs.html├──tests.py├──views.py└──views.pyc 
  2. Set setting.py
    STATIC_URL = ‘/static/‘STATICFILES_DIRS = (    os.path.join(BASE_DIR, ‘static/‘),#    ‘/var/www/static‘,)
  3. Using in templates
    {% load staticfiles %} < img src = "{% static "img/test.jpg" %}" alt = "test"/>或者{% load staticfiles %} < link rel="stylesheet" href="{% static ‘css/header.css‘ %}" >

Attention:

    • Make sure that the Install_apps in setting.py contains Django.contrib.staticfiles
    • Ensure that the debug option in setting.py is true, otherwise it cannot be mapped to a static file directory

In production mode cannot be set to True Oh, so the configuration in production mode is not the same, the following use Nginx to configure static resources.
Add:
Note that the questions set in several settings Static_root Static_url staticfiles_dirs:

  1. In settings.py
    As for the static folder under MyProject root, actually it doesn ' t necessarily has to be there. As long as static_root (in settings.py) points to the same location. So what's going on here's when we do:

    python manage.py collectstatic

    It'll copy all the individual static folder to the Static_root folder, that's why in each of the your apps, you need to Follo W The naming convention like this:

    app_one/static/app_one/css

    Supposed to put stuff directly under the app's static folder, which might cause name collisions when you Colle Ctstatic.
    In other words, when the collectstatic is executed, the static files under each app are automatically copied to the path specified by the static_root. In addition to this directory format App_one/static/app_one, This is true if there are multiple apps. It's not possible for files with the same file name to be overwritten.

  2. The Static_url in the settings.py
    This URL would appear in your browser:
    (BTW, make sure the URL of ends with a slash/, without a slash it might work but very unstable, Django would error out this in The log)

    # STATIC_URL = ‘/static/‘ # it doesn‘t have to thisSTATIC_URL = ‘/static/monkeyking/‘ # it can be anything

    You shouldn ' t hardcode the img or CSS in your template something like:

    In stead, you should does this in your template:

    {% load staticfiles %}< link rel="stylesheet" href="{% static "gl_pulltabs/css/foundation.css" %}" / >

    The role of this static_url is actually: in the settings.py Debug and Template_debug are open in the case. As long as the template is used as above, it will automatically add/static/to the front. For example, you want to ask for a/static/ App_one/css/mycss.css, then if you say Static_url is set to/static/appone/, then you can just use {% static "Css/mycss.css"%}.

    During the development phase, Django mapped the/static to the Django.contrib.staticfiles app. Staticfiles automatically searches for static files from the Staticfiles_dirs, Static_root, and the static subdirectories of each app. Once the deployment to the development environment, settings.py do not need to rewrite, as long as the Apache configuration file to write a map,/static will be processed by Apache. Django.contrib.staticfiles still exists, but because it does not receive a path starting with/static/, it will not work. Don't worry that Django will use slow processing. In addition, when settings. When DEBUG is false, the staticfiles automatically shuts down .

  3. Staticfiles_dirs
    Here, in settings.py again, you need to explicitly tell Django where else to look for static files:

    STATICFILES_DIRS = ("/path/to/your/project/yourapp/static/",...)

    Can you put your deploy static folder (Static_root) path to here, so can save some disk space? No, you cannot! Django won ' t allow it.

accessing static files in Django (JS CSS img)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.