Django, HTML, подключение шаблона к js, css - PullRequest
Новая
       4

Django, HTML, подключение шаблона к js, css

0 голосов
/ 19 марта 2020

У меня есть проект Django, который содержит целевую страницу.

Я работал над ним вне проекта, и страница HTML смогла перенаправить файлы js и CSS и он работал отлично.

Как только я скопировал папку в папку шаблонов проекта (как показано в структуре ниже), и добавил маршруты и представления в проект по мере необходимости. Сервер работает нормально и открывает страницу, но это показывает только HTML и не может ссылаться на вызывает ошибки при попытке обратиться к сценариям js.

например:

Не найдено: /templates/js/main.js [19 / Mar / 2020 08:22:12] "GET /templates/js/main.js HTTP / 1.1 "404 2490 

# home.hmtl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="yovelcohen" content="Sumon Rahman"/>
    <meta name="keywords" content="HTML,CSS,XML,JavaScript"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Title -->
    <title>Triangulation Calculator</title>
    <!-- Plugin-CSS -->
    <link rel="stylesheet" href=".css/bootstrap.min.css"/>
    <link rel="stylesheet" href=".css/owl.carousel.min.css"/>
    <link rel="stylesheet" href=".css/linearicons.css"/>
    <link rel="stylesheet" href=".css/magnific-popup.css"/>
    <link rel="stylesheet" href=".css/animate.css"/>
    <!-- Main-Stylesheets -->
    <link rel="stylesheet" href=".css/normalize.css"/>
    <link rel="stylesheet" href=".style.css"/>
    <link rel="stylesheet" href=".css/responsive.css"/>
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!-- MainMenu-Area-End -->
<!-- Home-Area -->
<header class="home-area overlay" id="home_page">

</header>
<!-- Home-Area-End -->
<!-- About-Area -->
  # some HTML stuff ...

    <!-- Footer-Area-End -->
    <!--Vendor-JS-->
    <script src="templates/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="templates/js/vendor/jquery-ui.js"></script>
    <script src="templates/js/vendor/bootstrap.min.js"></script>
    <!--Plugin-JS-->
    <script src="templates/js/owl.carousel.min.js"></script>
    <script src="templates/js/contact-form.js"></script>
    <script src="templates/js/ajaxchimp.js"></script>
    <script src="templates/js/scrollUp.min.js"></script>
    <script src="templates/js/magnific-popup.min.js"></script>
    <script src="templates/js/wow.min.js"></script>
    <!--Main-active-JS-->
    <script src="templates/js/main.js"></script>
</body>
</html>

Папка" Мои шаблоны ": 

.
├── css
│   ├── animate.css
│   ├── bootstrap.min.css
│   ├── linearicons.css
│   ├── magnific-popup.css
│   ├── normalize.css
│   ├── owl.carousel.min.css
│   └── responsive.css
├── fonts
│   ├── Linearicons-Free.eot
│   ├── Linearicons-Free.svg
│   ├── Linearicons-Free.ttf
│   ├── Linearicons-Free.woff
│   └── Linearicons-Free.woff2
├── home.html
├── images
│   ├── # Some images..
├── js
│   ├── ajaxchimp.js
│   ├── contact-form.js
│   ├── magnific-popup.min.js
│   ├── main.js
│   ├── owl.carousel.min.js
│   ├── scrollUp.min.js
│   ├── vendor
│   └── wow.min.js
└── style.css

Как выглядит веб-страница:

enter image description here

Ответы [ 3 ]

1 голос
/ 19 марта 2020

вам нужно управлять стати c файлами. См. Это: doc_link Кроме того, вы не должны помещать stati c файлы типа CSS, js в папку шаблонов

0 голосов
/ 19 марта 2020

Вам нужно посмотреть на stati c файлы, как сказано здесь , вам нужно создать отдельную папку для файлов css и js и установить ее как файл stati c, или добавить папку в папку добавления

, например, на моем сайте это выглядит так: 

|   admin.py
|   apps.py
|   models.py
|   tests.py
|   urls.py
|   views.py
|   
+---static
|   \---finance
|       +---css
|       |       main.css
|       |       
|       \---js
|               main.js
|               
\---templates
    \---finance
            about.html
            base.html
            home.html

, затем в верхней части вашего файла используйте {% load static %} и используйте {% static "app-name/foo.txt" %} Для получения дополнительной информации см. Руководство Django для файлов c

0 голосов
/ 19 марта 2020 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block page_title %}{% endblock %}</title>
    <!-- add below Django command to use bootstrap3 in web page.  -->
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    <!-- first load django static tag. -->
    {% load staticfiles %}

    <!-- use django static tag ton load js file and css file. -->
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <link rel=”stylesheet” href=”{% static 'css/dept_emp_style.css' %}”>
</head>
    <body>
        <div class="container">
            <!-- include web page navigation bar page -->
            {% include "./base_menu_bar.html" %}
            {% block page_content %}
            {% endblock %}
        </div>
    </body>
</html>
...