0

No logro cargar mis archivos estaticos css y js:

Mi settings :


import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

#PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '&zd^9_h4fa9s4e%ylo6qqjfi2dmya*^7)#7bdvb6-t+b%8=#qr'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #'django-bootstrap',
    #'django-jquery',
    'apps.adopcion',
    'apps.mascota',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'refugio.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        #'DIRS': [os.path.join(BASE_DIR, 'templates')],
        #OK, ME FUNCIONO CON LA DIRECCION
        'DIRS':['C:/Users/JORGE IVAN SIERRA/Proyectos_PY37/PP37DJANGO_REF2/refugio/refugio/templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'refugio.wsgi.application'

"""TEMPLATES = [{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'templates')],
}]"""

# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'refug2',
        'HOST': 'localhost',
        'USER':'postgres',
        'PASSWORD': '12345',
    }
}


# Password validation
# https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'

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

>

Mi index html:

        {% load static %}
        <!DOCTYPE html>
        <html lang="es">
        <head>
            <meta charset="UTF-8">

            {% block extrastatic %}
            {% endblock %}

            <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
            <title>{%block title %} Document {% endblock %}</title>

        <body>
        <div class="container">

            {% block navbar %}
                <div class="bs-docs-section clearfix">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="bs-component">
                                <nav class="navbar navbar-default">
                                    <div class="container-fluid">
                                        <div class="navbar-header">
                                            <a class="navbar-brand" href="#">Home</a>
                                        </div>
                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                        <ul class="nav navbar-nav">
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="
                                                dropdown" role="button" aria-expanded="false">Mascotas
                                                <span class="caret" ></span></a>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Registrar</a></li>
                                                    <li><a href="#">Listar</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="
                                                dropdown" role="button" aria-expanded="false">
                                                Adopciones<span class="caret"></span></a>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Solicitar</a></li>
                                                    <li><a href="#">Listar solicitudes</a></li>
                                                <ul>
                                            </li>
                                        </ul>
                                        <ul class="nav navbar-nav navbar-right">
                                            <li class="dropdown"><a href="http://actualicese.com"
                                            onclick="pageTractor._link(this.href); return false;">
                                            Actualicese.com</a>
                                            </li>
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="
                                                dropdown" role="button" aria-expanded="false">
                                            Opciones<span class="caret"></span></a>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Salir</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            {% endblock %}

            {% block content %}
            <h4> Bloque de contenido  </h4>
            {% endblock %}

            {% block footer %}
            {% endblock %}

        </div>
            <script  src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
            <script  src="{% static 'js/bootstrap.min.js' %}"></script>


            {% block extrajs %}
            {% endblock %}

        </body>
        </html>

> Alguna orientación, gracias.

1 respuesta 1

0

Primero que daba la configuracion seria algo asi:

settings.py

 #agrega esto al final de tu settings.py

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

ahora en tu template(pagina.html), es muy importante el tag:

<!--ASI DECLARAS EL STATIC-->
{% load staticfiles %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

Si te fijas la declaracion va antes que cualquier tag, otra cosa es staticfiles no solo static:

 {% load staticfiles %}

Te sugiero que revises la documentacion oficial: Documentacion

Espero te sirva y suerte

3
  • Amigo, ya hice la prueba pero solo muestra el Hello world, (no muestra los temas css y js), estoy con pycharm community 2018.1 este es el error por consola: [10/Jul/2018 16:56:02] "GET /mascota/ HTTP/1.1" 200 2228 [10/Jul/2018 16:56:02] "GET /static/js/bootstrap.min.js HTTP/1.1" 404 1681 [10/Jul/2018 16:56:02] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 1687 [10/Jul/2018 16:56:02] "GET /static/js/bootstrap.min.js HTTP/1.1" 404 1681 Commented el 10 jul. 2018 a las 21:58
  • No quiere cargar los estaticos Commented el 10 jul. 2018 a las 22:01
  • Tengo la duda si es por el IDE Pycharm community Commented el 10 jul. 2018 a las 22:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.