-1

I am working on a one page website, and try to disect each section to different html file, and now the base.html that contain css, js file don't want to load. Instead, it returns "Invalid block tag on line 21: 'static', expected 'endblock'. Did you forget to register or load this tag?" comment on some of the {% include "page.html" %}. I've tried add {% load static %} {% load staticfiles %} on each {% include "page.html" %}, still don't help with the css, js from the base.html.

Any thoughts to solve this issue? Thank you in advance

Here are my codes:

Here is my base.html

<!DOCTYPE html>
{% load staticfiles %}
{% load fontawesome %}
{% load static %}
<html lang="en">

  <head>
    {% fontawesome_stylesheet %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Website</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'https://fonts.googleapis.com/css?family=Montserrat:400,700' %}" rel="stylesheet"
          type="text/css">
    <link href='{% static "https://fonts.googleapis.com/css?family=Kaushan+Script" %}' rel='stylesheet' type='text/css'>
    <link href='{% static "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" %}'
          rel='stylesheet' type='text/css'>
    <link href='{% static "https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" %}' rel='stylesheet'
          type='text/css'>

    <!-- Custom styles for this template -->
    <link href="{% static 'css/agency.min.css' %}" rel="stylesheet">

  </head>

  <body>
   {% block content %}
   {% endblock %}
  <!-- Bootstrap core JavaScript -->
    <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

    <!-- Plugin JavaScript -->
    <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>

    <!-- Contact form JavaScript -->
    <script src="{% static 'js/jqBootstrapValidation.js'%}"></script>
    <script src="{% static 'js/contact_me.js' %}"></script>

    <!-- Custom scripts for this template -->
    <script src="{% static 'js/agency.min.js' %}"></script>

  </body>
</html>

and here is one of the page I am going to use for djago view.

{% extends '00_base.html' %}
{% block content %}
{% include "001_navigation.html" %}
<!-- Header -->
<header class="masthead">
    <div class="container">
        <div class="intro-text">
            <div class="intro-lead-in">Welcome Text!</div>
            <div class="intro-heading text-uppercase">Sub Welcome Text</div>
            <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
        </div>
    </div>
</header>
{% include "02_services.html" %}
{% include "03_portfolio.html" %}
{% include "04_about.html" %}
{% include "05_team.html" %}
{% include "06_clients.html" %}
{% include "07_contact.html" %}
{% include "08_footer.html" %}
{% include "09_modals.html" %}
{% endblock %}

Here is one of the "include page.html". It returns "Invalid block tag on {% static 'img/portfolio/01-thumbnail.jpg' %}: 'static', expected 'endblock'. Did you forget to register or load this tag?"

{% extends '00_base.html' %}

  {% block content %}
<!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Portfolio</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolio1">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="{% static 'img/portfolio/01-thumbnail.jpg' %}" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Item</h4>
              <p class="text-muted">Item text</p>
            </div>
          </div>
{%endblock%}

Templates in settings:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['web/web2/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',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'templates', 'web2', 'static', 'public'),'/www/static/'
)
STATIC_ROOT = os.path.join(BASE_DIR, 'public', 'static')
MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'public', 'media')
arkur
  • 1
  • 3

1 Answers1

3

in last html file you forgot to add {% endblock %}.

{% block content %}
.
. Html contents
.
{% endblock %}
noob
  • 130
  • 12