Я использую анимацию codepen с django шаблонами, но ничего не происходит - PullRequest
Новая
       13

Я использую анимацию codepen с django шаблонами, но ничего не происходит

0 голосов
/ 29 апреля 2020

Я использовал загрузчик кодов, прежде чем загружать главную страницу, этот эффект должен произойти, я думаю, я запутался в теге extends. все файлы связаны друг с другом. Приведенный ниже код не дает мне ошибку, просто белая пустая страница.

Вот моя база. html

{% block content %}
<!DOCTYPE html>
{% load static %}
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/my-loader'%}">
</head>
<body>

    h1.intro cat loader

.box
  .cat
    .cat__body
    .cat__body
    .cat__tail
    .cat__head

</body>
</html>
{% endblock %}

Это мой загрузчик . css

  position: $type;
  @if $dir != 'bottom' {top: 0; }
  @if $dir != 'right' {left: 0; }
  @if $dir != 'left' {right: 0; }
  @if $dir != 'top' {bottom: 0; }
}

.cat {
  position: relative;
  width: 100%;
  max-width: 20em;
  overflow: hidden;
  background-color: #e6dcdc;

  &::before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  &:hover > * { animation-play-state: paused; }
  &:active > * { animation-play-state: running; }
}

%cat-img {
  @include fill-full;
  animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite;

  &::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il');
  }
}

.cat__head {
  @extend %cat-img;

  &::before {
    top: 0;
    right: 0;
    background-position: 100% 0%;
    transform-origin: 0% 100%;
    transform: rotate(90deg);
  }
}

.cat__tail {
  @extend %cat-img;
  animation-delay: .2s;

  &::before {
    left: 0;
    bottom: 0;
    background-position: 0% 100%;
    transform-origin: 100% 0%;
    transform: rotate(-30deg);
  }
}

.cat__body {
  @extend %cat-img;
  animation-delay: .1s;

  &:nth-of-type(2) {
    animation-delay: .2s;
  }

  &::before {
    right: 0;
    bottom: 0;
    background-position: 100% 100%;
    transform-origin: 0% 0%;
  }
}

@keyframes rotating {
  from { transform: rotate(720deg); }
  to { transform: none; }
}

.box {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;
  background-color: #e6dcdc;
}

// reset

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  line-height: 1.4;
}

.intro {
  width: 90%;
  max-width: 36rem;
  padding-bottom: 1rem;
  margin: 0 auto 1em;
  padding-top: .5em;
  font-size: calc(1rem + 2vmin);
  text-transform: capitalize;
  border-bottom: 1px dashed rgba(#000, .3);
  text-align: center;

  small {
    display: block;
    opacity: .5;
    font-style: italic;
    text-transform: none;
  }
}

.info {
  margin: 0;
  padding: 1em;
  font-size: .9em;
  font-style: italic;
  font-family: serif;
  text-align: right;
  opacity: .5;

  a {
    color: inherit;
  }
}

это моя главная страница, где я хочу получить этот эффект 

{% extends 'blog/base.html' %}
<!DOCTYPE html>
{% load static %}
<link rel="shortcut icon" href="{%  static 'img/favicon.png' %} ">
<html lang="en">

{% block content%}

{% endblock %}

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Advice Lancing</title>

    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->

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

    <!-- Theme CSS -->
    <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="{% url 'allblogs' %}">
                Advice lancing</a>


            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="{% url 'allblogs' %}">Home</a>
                    </li>
                    <li>
                        <a href="{% url 'about' %}">About</a>
                    </li>
                    <li>
                        <a href="{% url 'allblogs' %}">My Blogs</a>
                    </li>
                    <li>
                        <a href="{% url 'contact' %}">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <!-- <header class="intro-header" style="background-image: url('img/home-bg.jpg')"> -->
    <header class="intro-header" style="background-image: url('static/img/home.jpg') ">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Advice Lancing</h1>
                        <hr class="small">
                        <span class="subheading">Here You Write your Subheading</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                {% for blog in blogs.all %}
                <div class="post-preview">
                    <a href="{% url 'detail' blog.id %}">
                        <h2 class="post-title">
                            {{ blog.title }}
                        </h2>
                        <h4 class="post-subtitle"><u>{{blog.publish_date|date:"d M Y"}}</u></h4>
                        <h3 class="post-subtitle">
                            {{ blog.subtitle}}
                        </h3>

                    </a>
                    <p class="post-meta">{{ blog.publish_date_pretty }}</p>
                </div>
                <br />
                  <img src = "{{ blog.image.url }}" height=280 width=340/>
                <br />
                  <p>{{ blog.summary }}</p>
                  <ul class="pager">
                    <li class="next">
                        <a href="{% url 'detail' blog.id %}">Read More &rarr;</a>
                    </li>
                </ul>
             {% endfor %}

                <hr>
                <!-- Pager -->
                <ul class="pager">
                    <li class="next">
                        <a href="base.html">Older Posts &rarr;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <hr>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <ul class="list-inline text-center">
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                    <p class="copyright text-muted">Copyright &copy; Advice lancing 2020</p>
                </div>
            </div>
        </div>
    </footer>

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

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>

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

    <!-- Theme JavaScript -->
    <script src="{% static 'js/clean-blog.min.js' %}"></script>

</body>

</html>

1 Ответ

0 голосов
/ 29 апреля 2020

Обновите ваши шаблоны, как показано ниже. Пожалуйста, проверьте встроенные комментарии.
Кроме того, как отметил Дэниел в комментариях, вам придется скомпилировать my-loader.css до CSS, кроме внесения следующих изменений, чтобы ваши шаблоны работали.

base. html

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/my-loader'%}">

    {% block extra_head %} <!-- content from the head tag of main.html will come here -->
    {% endblock %}

</head>
<body>

    h1.intro cat loader <!-- is this and the below lines valid html? -->

.box
  .cat
    .cat__body
    .cat__body
    .cat__tail
    .cat__head

    {% block content %} <!-- content from the body of main.html will come here -->
    {% endblock %}

</body>
</html>

main. html

{% extends 'blog/base.html' %}

{% block extra_head %}
    <link rel="shortcut icon" href="{%  static 'img/favicon.png' %} ">
    <meta charset="utf-8">
    ...
    ...
    ...

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

{% endblock }

{% block content %}

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        ...
        ...
        ...

    <!-- Theme JavaScript -->
    <script src="{% static 'js/clean-blog.min.js' %}"></script>

{% endblock %}

Если base.html и main.html находятся в одной папке, первый оператор в main.html должен быть изменен на {% extends 'base.html' %}

...