HTML-файл не загружается должным образом в django
Я пытаюсь интегрировать свое приложение django с панелью администратора из github. Я вижу, что после моего успешного входа в приложение приложение направляется на панель управления, но загружается только часть HTML, я не вижу, чтобы на мою панель добавлялись какие-либо причудливые вещи
.Он должен был выглядеть как один снимок экрана, приведенный в github ссылка на сайт. Я не являюсь обычным фронтенд-разработчиком, поэтому мне становится все труднее понять, в чем ошибка.
Dashboard.html
<!doctype html>
<html lang = "en">
<head>
{% load staticfiles %}
<meta charset = "utf-8" />
<link rel = "icon" type = "image/png" href = "assets/img/favicon.ico">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<title>Light Bootstrap Dashboard by Creative Tim</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name = "viewport" content = "width=device-width" />
<!-- Bootstrap core CSS -->
<!--<link href = "css/bootstrap.min.css" rel = "stylesheet" />-->
<link rel='stylesheet' href = "{% static 'css/bootstrap.min.css' %}" type='text/css' />
<!-- Animation library for notifications -->
<!--<link href = "assets/css/animate.min.css" rel = "stylesheet"/>-->
<link rel='stylesheet' href = "{% static 'css/animate.min.css' %}" type='text/css' />
<!-- Light Bootstrap Table core CSS -->
<!--<link href = "assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel = "stylesheet"/>-->
<link rel='stylesheet' href = "{% static 'css/animate.min.css' %}" type='text/css' />
<!-- CSS for Demo Purpose, don't include it in your project -->
<!--<link href = "assets/css/demo.css" rel = "stylesheet" />-->
<link rel='stylesheet' href = "{% static 'css/demo.css' %}" type='text/css' />
<!-- Fonts and icons -->
<link href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel = "stylesheet">
<!--<link rel='stylesheet' href = "{% static 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' %}" type='text/css' />-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<!--<link rel='stylesheet' href = "{% static 'http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' %}" type='text/css' />-->
<!--<link href = "assets/css/pe-icon-7-stroke.css" rel = "stylesheet" />-->
<!--<link rel='stylesheet' href = "{% static 'css/pe-icon-7-stroke.css' %}" type='text/css' />-->
<link rel='stylesheet' href = "{% static 'css/pe-icon-7-stroke.css' %}" type='text/css' />
</head>
<body>
<div class = "wrapper">
<div class = "sidebar" data-color = "purple" data-image = "img/sidebar-5.jpg">
<!--
Tip 1: you can change the color of the sidebar using: data-color = "blue | azure | green | orange | red | purple"
Tip 2: you can also add an image using data-image tag
-->
<div class = "sidebar-wrapper">
<div class = "logo">
<a href = "http://www.creative-tim.com" class = "simple-text">
Creative Tim
</a>
</div>
<ul class = "nav">
<li class = "active">
<a href = "dashboard.html">
<i class = "pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href = "user.html">
<i class = "pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
<li>
<a href = "table.html">
<i class = "pe-7s-note2"></i>
<p>Table List</p>
</a>
</li>
<li>
<a href = "typography.html">
<i class = "pe-7s-news-paper"></i>
<p>Typography</p>
</a>
</li>
<li>
<a href = "icons.html">
<i class = "pe-7s-science"></i>
<p>Icons</p>
</a>
</li>
<li>
<a href = "maps.html">
<i class = "pe-7s-map-marker"></i>
<p>Maps</p>
</a>
</li>
<li>
<a href = "notifications.html">
<i class = "pe-7s-bell"></i>
<p>Notifications</p>
</a>
</li>
<li class = "active-pro">
<a href = "upgrade.html">
<i class = "pe-7s-rocket"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class = "main-panel">
<nav class = "navbar navbar-default navbar-fixed">
<div class = "container-fluid">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#navigation-example-2">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Dashboard</a>
</div>
<div class = "collapse navbar-collapse">
<ul class = "nav navbar-nav navbar-left">
<li>
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<i class = "fa fa-dashboard"></i>
<p class = "hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<i class = "fa fa-globe"></i>
<b class = "caret hidden-lg hidden-md"></b>
<p class = "hidden-lg hidden-md">
5 Notifications
<b class = "caret"></b>
</p>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Notification 1</a></li>
<li><a href = "#">Notification 2</a></li>
<li><a href = "#">Notification 3</a></li>
<li><a href = "#">Notification 4</a></li>
<li><a href = "#">Another notification</a></li>
</ul>
</li>
<li>
<a href = "">
<i class = "fa fa-search"></i>
<p class = "hidden-lg hidden-md">Search</p>
</a>
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li>
<a href = "">
<p>Account</p>
</a>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<p>
Dropdown
<b class = "caret"></b>
</p>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li>
<a href = "#">
<p>Log out</p>
</a>
</li>
<li class = "separator hidden-lg"></li>
</ul>
</div>
</div>
</nav>
<div class = "content">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-4">
<div class = "card">
<div class = "header">
<h4 class = "title">Email Statistics</h4>
<p class = "category">Last Campaign Performance</p>
</div>
<div class = "content">
<div id = "chartPreferences" class = "ct-chart ct-perfect-fourth"></div>
<div class = "footer">
<div class = "legend">
<i class = "fa fa-circle text-info"></i> Open
<i class = "fa fa-circle text-danger"></i> Bounce
<i class = "fa fa-circle text-warning"></i> Unsubscribe
</div>
<hr>
<div class = "stats">
<i class = "fa fa-clock-o"></i> Campaign sent 2 days ago
</div>
</div>
</div>
</div>
</div>
<div class = "col-md-8">
<div class = "card">
<div class = "header">
<h4 class = "title">Users Behavior</h4>
<p class = "category">24 Hours performance</p>
</div>
<div class = "content">
<div id = "chartHours" class = "ct-chart"></div>
<div class = "footer">
<div class = "legend">
<i class = "fa fa-circle text-info"></i> Open
<i class = "fa fa-circle text-danger"></i> Click
<i class = "fa fa-circle text-warning"></i> Click Second Time
</div>
<hr>
<div class = "stats">
<i class = "fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-6">
<div class = "card ">
<div class = "header">
<h4 class = "title">2014 Sales</h4>
<p class = "category">All products including Taxes</p>
</div>
<div class = "content">
<div id = "chartActivity" class = "ct-chart"></div>
<div class = "footer">
<div class = "legend">
<i class = "fa fa-circle text-info"></i> Tesla Model S
<i class = "fa fa-circle text-danger"></i> BMW 5 Series
</div>
<hr>
<div class = "stats">
<i class = "fa fa-check"></i> Data information certified
</div>
</div>
</div>
</div>
</div>
<div class = "col-md-6">
<div class = "card ">
<div class = "header">
<h4 class = "title">Tasks</h4>
<p class = "category">Backend development</p>
</div>
<div class = "content">
<div class = "table-full-width">
<table class = "table">
<tbody>
<tr>
<td>
<div class = "checkbox">
<input id = "checkbox1" type = "checkbox">
<label for = "checkbox1"></label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class = "td-actions text-right">
<button type = "button" rel = "tooltip" title = "Edit Task" class = "btn btn-info btn-simple btn-xs">
<i class = "fa fa-edit"></i>
</button>
<button type = "button" rel = "tooltip" title = "Remove" class = "btn btn-danger btn-simple btn-xs">
<i class = "fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class = "checkbox">
<input id = "checkbox2" type = "checkbox" checked>
<label for = "checkbox2"></label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class = "td-actions text-right">
<button type = "button" rel = "tooltip" title = "Edit Task" class = "btn btn-info btn-simple btn-xs">
<i class = "fa fa-edit"></i>
</button>
<button type = "button" rel = "tooltip" title = "Remove" class = "btn btn-danger btn-simple btn-xs">
<i class = "fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class = "checkbox">
<input id = "checkbox3" type = "checkbox">
<label for = "checkbox3"></label>
</div>
</td>
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class = "td-actions text-right">
<button type = "button" rel = "tooltip" title = "Edit Task" class = "btn btn-info btn-simple btn-xs">
<i class = "fa fa-edit"></i>
</button>
<button type = "button" rel = "tooltip" title = "Remove" class = "btn btn-danger btn-simple btn-xs">
<i class = "fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class = "checkbox">
<input id = "checkbox4" type = "checkbox" checked>
<label for = "checkbox4"></label>
</div>
</td>
<td>Create 4 Invisible User Experiences you Never Knew About</td>
<td class = "td-actions text-right">
<button type = "button" rel = "tooltip" title = "Edit Task" class = "btn btn-info btn-simple btn-xs">
<i class = "fa fa-edit"></i>
</button>
<button type = "button" rel = "tooltip" title = "Remove" class = "btn btn-danger btn-simple btn-xs">
<i class = "fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class = "checkbox">
<input id = "checkbox5" type = "checkbox">
<label for = "checkbox5"></label>
</div>
</td>
<td>Read "Following makes Medium better"</td>
<td class = "td-actions text-right">
<button type = "button" rel = "tooltip" title = "Edit Task" class = "btn btn-info btn-simple btn-xs">
<i class = "fa fa-edit"></i>
</button>
<button type = "button" rel = "tooltip" title = "Remove" class = "btn btn-danger btn-simple btn-xs">
<i class = "fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class = "checkbox">
<input id = "checkbox6" type = "checkbox" checked>
<label for = "checkbox6"></label>
</div>
</td>
<td>Unfollow 5 enemies from twitter</td>
<td class = "td-actions text-right">
<button type = "button" rel = "tooltip" title = "Edit Task" class = "btn btn-info btn-simple btn-xs">
<i class = "fa fa-edit"></i>
</button>
<button type = "button" rel = "tooltip" title = "Remove" class = "btn btn-danger btn-simple btn-xs">
<i class = "fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class = "footer">
<hr>
<div class = "stats">
<i class = "fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class = "footer">
<div class = "container-fluid">
<nav class = "pull-left">
<ul>
<li>
<a href = "#">
Home
</a>
</li>
<li>
<a href = "#">
Company
</a>
</li>
<li>
<a href = "#">
Portfolio
</a>
</li>
<li>
<a href = "#">
Blog
</a>
</li>
</ul>
</nav>
<p class = "copyright pull-right">
© <script>document.write(new Date().getFullYear())</script> <a href = "http://www.creative-tim.com">Creative Tim</a>, made with love for a better web
</p>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src = "{% static 'js/jquery.3.2.1.min.js' %}"></script>
<!--<script src = "assets/js/jquery.3.2.1.min.js" type = "text/javascript"></script>-->
<!--<script src = "assets/js/bootstrap.min.js" type = "text/javascript"></script>-->
<script src = "{% static 'js/bootstrap.min.js' %}"></script>
<!-- Charts Plugin -->
<!--<script src = "assets/js/chartist.min.js"></script>-->
<script src = "{% static 'js/chartist.min.js' %}"></script>
<!-- Notifications Plugin -->
<!--<script src = "assets/js/bootstrap-notify.js"></script>-->
<script src = "{% static 'js/bootstrap-notify.js' %}"></script>
<!-- Google Maps Plugin -->
<script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<!--<script src = "assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>-->
<!--<script src = "{% static 'js/light-bootstrap-dashboard.js?v=1.4.0' %}"></script>-->
<!--<script src = "{% static 'js/light-bootstrap-dashboard.js?v=1.4.0' %}"></script>-->
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<!--<script src = "assets/js/demo.js"></script>-->
<script src = "{% static 'js/demo.js' %}"></script>
<script type = "text/javascript">
$(document).ready(function(){
demo.initChartist();
$.notify({
icon: 'pe-7s-gift',
message: "Welcome to <b>Light Bootstrap Dashboard</b> - a beautiful freebie for every web developer."
},{
type: 'info',
timer: 4000
});
});
</script>
</html>
Весь мой медиа-контент присутствует в статической папке, когда я запустил сбор статических и запустил свой локальный хост, я вижу ответ 200 для всех моих css и т. д.
Мои точки отладки: Я вижу, что, возможно, он не работает, начиная с класса div.
Примечание Я могу вставить код из других файлов в соответствии с требованиями здесь
Edit1: добавление вывода из консоли
Edit2: добавление файла demo.js показывает, что debounce не определен. пфа второй последний скриншот Добавление settings.py
Settings.py
import os
import warnings
from django.utils.translation import ugettext_lazy as _
from os.path import dirname
warnings.simplefilter('error', DeprecationWarning)
BASE_DIR = dirname(dirname(dirname(dirname(os.path.abspath(__file__)))))
CONTENT_DIR = os.path.join(BASE_DIR, 'content')
SECRET_KEY = 'NhfTvayqggTBPswCXXhWaN69HuglgZIkM'
DEBUG = True
ALLOWED_HOSTS = []
SITE_ID = 1
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
# Vendor apps
'bootstrap4',
# Application apps
'main',
'accounts',
'dashboard',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'app.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(CONTENT_DIR, '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 = 'app.wsgi.application'
EMAIL_BACKEND = 'django.core.mail.backends.filebased.EmailBackend'
EMAIL_FILE_PATH = os.path.join(CONTENT_DIR, 'tmp/emails')
EMAIL_HOST_USER = '[email protected]'
DEFAULT_FROM_EMAIL = '[email protected]'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'test',
'USER': 'root',
'PASSWORD': '',
'HOST': 'localhost',
'PORT': '5432',
}
}
#STATIC_ROOT = os.path.join(CONTENT_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(CONTENT_DIR, 'media')
MEDIA_URL = '/media/'
STATICFILES_DIRS = [
os.path.join(CONTENT_DIR, "static"),
]
@JonahBishop, я отредактировал и добавил вывод консоли. Похоже, есть проблема с js
—
26.12.2018 19:26
Эти проблемы, скорее всего, ваша проблема. Вам нужно будет пройти каждый из них, исправляя ошибки по ходу дела.
—
26.12.2018 19:28
Покажите, пожалуйста, картинку вашей статической папки. Возможно, отсутствует файл. Кроме того, если вы установили отладку в значение false в своих настройках, вы не сможете обслуживать статические и мультимедийные файлы.
—
26.12.2018 19:33
@JonahBishop я решил их, удалив эту функцию из моего demo.js, которую я нигде не использовал.
—
26.12.2018 19:39
Добавлен скриншот @AmineMessaoudi
—
26.12.2018 19:41
можешь ли ты добавить свой файл settings.py
—
27.12.2018 03:36
@ShafikurRahmanShaon Я добавил setting.py. Из-за ограничения на количество символов я попытался добавить большую часть деталей из файла, в любом случае, если вам нужна дополнительная информация, пожалуйста, дайте мне знать
—
27.12.2018 05:01
ваши статические файлы в your_project_root_directory/static
—
27.12.2018 05:03
@ShafikurRahmanShaon, мне кажется, он размещен правильно, может быть, вы также можете проверить последний снимок экрана, которым я поделился?
—
27.12.2018 05:08
измените это только для проверки. CONTENT_DIR = os.path.join(BASE_DIR, 'source/content'), дайте знать, работает он или нет?
—
27.12.2018 05:10
Позвольте нам продолжить обсуждение в чате.
—
27.12.2018 05:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
12
1 707
1
Ответы 1
Убедитесь, что django.contrib.staticfiles включен в ваш INSTALLED_APPS.
В вашем файле настроек определите STATIC_URL, например:
STATIC_URL = '/ статический /'
В ваших шаблонах используйте статический тег шаблона, чтобы создать URL-адрес для данного относительного путь с использованием настроенного STATICFILES_STORAGE.
пример:
{% load static%}
В своем Dashboard.html напишите {% load static%}
—
25.01.2019 12:42
Другие вопросы по теме
Создайте сигнал о создании модели
Наследование классов в Python, методы super и overridden
Как указать input_shape для последовательной модели Keras
При установке модуля в файле requirements.txt не удается найти другой модуль, определенный там
Как я могу объединить целую строку, чтобы создать URL, ссылки и добавить их в список?
Как вызвать другую фигуру, нажав на текущую фигуру
Инструменты Music21 не работают должным образом
Что является достойной практикой для запуска django `makemigrations` вне среды разработки, содержащей только контейнер?
Как узнать среднее значение пикселя изображения, отсканировав его сверху и снизу?
Django: как передать объект запроса из одного представления в другое?
Похожие вопросы
Как ссылаться на внешний файл JSON в Javascript как на переменную
Диаграмма Chart.js позиционирует переменную на 0, даже если значение> 0
Получение результатов из fetchXml с помощью нового метода retrieveMultipleRecords (справочник по клиентскому API)
Как эффективно создать экземпляр объекта в компоненте Vue?
Как изменить цвет фона подменю многоуровневого аккордеонного меню внутри элемента навигации с помощью javascript
Анализировать HTML-таблицу с информацией о больших данных JSON
Более простой способ выполнить код Javascript, заменяющий URL-адрес на веб-сайте
Печать полученного JSON в таблицу
Как я могу отправить одно предупреждение с моего Node.JS моему клиенту Javascript?
Пунктирная линия Highcharts на оси x не проходит полностью
Мне кажется, что какой-то CSS или Javascript не загружается должным образом. Либо это, либо какой-то код Javascript не выполняется должным образом. Вы видите какие-либо ошибки в консоли разработки?