13. Arquivos estáticos - AndersonBatalha/tango_with_django GitHub Wiki

Arquivos CSS, JavaScript e imagens são exemplos de arquivos estáticos

1. Criar diretório

   1. No mesmo diretório onde foi criada a pasta templates, criar outra pasta, de nome 'static':

           (env) $ mkdir static
      

   2. Para armazenar imagens, crie uma pasta de nome 'images'

             (env) $ mkdir static/images
      

   3. Alterar o arquivo settings.py

      1. Semelhante ao que foi feito com a pasta templates, o arquivo settings.py deve ser configurado para suportar arquivos estáticos:

      2. Adicionar as seguintes linhas:

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

   4. Testando

      1. Para testar suas configurações, salve uma imagem qualquer na pasta 'static', e tente acessar no navegador:

      http://localhost:8000/static/images/rango.jpg
      

      • Troque rango.jpg pelo nome do seu arquivo

   5. Inserindo arquivos estáticos no template

      1. Exemplos

          {% load staticfiles %}
          
          <!-- Imagens -->
          <img src="{% static "images/rango.jpg" %}"
               alt="Picture of Rango" />
          <!-- CSS -->
          <link rel="stylesheet" href="{% static "css/base.css" %}" />
          <!-- JavaScript -->
          <script src="{% static "js/jquery.js" %}"></script>
         

      2. Os comandos {% load staticfiles %} e {% static "nome_do_arquivo" %} devem ser utilizados ao inserir arquivos estáticos