Плагин Django CMS не загружает CSS - PullRequest
       55

Плагин Django CMS не загружает CSS

0 голосов
/ 26 сентября 2019

РЕДАКТИРОВАТЬ:

Я нашел ответ, прокрутите вниз до моего следующего поста, чтобы увидеть его!

(я не включил render_block "js" и "css" в нужном месте, и этовот почему CSS не загружается)

Я сделал плагин CMS django для моего новостного сайта, из модели "статьи".Плагин «работает» таким образом, что я вижу весь необработанный HTML-код с данными, которые я хочу отобразить, но он не применяет CSS к моей статье, и я понятия не имел, почему.

Есть идеи?

Мой код:

Плагин:

from cms.plugin_base import CMSPluginBase
from cms.plugin_pool import plugin_pool
from news_cms_integration.models import ArticlePluginModel
from django.utils.translation import ugettext as _


@plugin_pool.register_plugin  # register the plugin
class ArticlePluginPublisher(CMSPluginBase):
    model = ArticlePluginModel  # model where plugin data are saved
    module = _("Article")
    name = _("Article Plugin")  # name of the plugin in the interface
    render_template = "news_cms_integration/article_plugin.html"

    def render(self, context, instance, placeholder):
        context.update({'instance': instance})
        return context

Мой плагин html:

{% load sekizai_tags %}
{% render_block "css" %}

<h1>{{ instance.article.title }}</h1>

<section class="container post-details-area">
    <div class="container single-article-div">
        <hr class="hr-single hr-top">
        <h2 id="article-title" class="single-article-titles">{{ article.title }}</h2>
        <hr class="hr-single">
        <img class="single-article-img" src="{{ article.article_image.url }}" alt="">
        <!-- *********************************** -->
        <hr class="hr-single">
        <p>Category: {{ article.article_category }}</p>
        <hr class="hr-single">
        <div class="row justify-content-center">
            <!-- Post Details Content Area -->
            <div class="col-12 col-xl-8">
                <div class="post-details-content bg-white box-shadow">
                    <div class="blog-thumb">
                    </div>
                    <div class="blog-content">
                        <div class="post-meta">
                            <a href="#">{{ article.pub_date }}</a>
                        </div>
                        <h3 class="single-article-titles post-title"> {{ article.description }}</h3>
                        <hr>

                        <!-- Post Meta -->
                        <div class="post-meta-2">
                            <a href="#"><i class="fa fa-eye" aria-hidden="true"></i> 1034</a>
                            <a href="#"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 834</a>
                            <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i> 234</a>
                        </div>
                        <p>{{ article.article_text }}</p>
                        <hr />

                        {% include "partials/_thumbnails.html" %}

                        <hr>
                        <p>Author: {{ article.author }}</p>

                        <hr>

                        {% for comment in article.comments.all %}
                        <div class="comment">
                            <div class="date">{{ comment.created_date }}</div>
                            <strong>{{ comment.author }}</strong>
                            <p>{{ comment.text|linebreaks }}</p>
                        </div>
                        {% empty %}
                        <p>No comments here yet :(</p>
                        {% endfor %}
                    </div>
                    <!-- Post A Comment Area -->
                    <div class="post-a-comment-area bg-white mb-30 p-30 box-shadow clearfix">
                        <!-- Section Title -->
                        <div class="section-heading">
                            <h5>LEAVE A REPLY</h5>
                        </div>
                        <!-- Reply Form -->
                        <a class="btn btn-default comment-btn"
                            href="{% url 'news:add_comment_to_article' pk=article.pk %}#add-comment">Add
                            comment</a>
                    </div>
                </div>
            </div>
        </div>
</section>


{% render_block "js" %}

Есть идеи, почему это происходит?В моем base.html я включил:

{% load cms_tags sekizai_tags %}
{% load static %}
{% render_block "css %}
{% render_block "js" %}

Я также попытался обернуть все сценарии в:

{% addtoblock "css" %} and {% endaddtoblock %}

На случай, если вам это нужно, вот мой base.html:

{% load cms_tags sekizai_tags %}
{% load static %}
<!doctype html>
<html lang="en">

<head>
  {% render_block "css" %}
  <meta charset="utf-8">
  <title>Fake News</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">

  {% block "scripts" %}
  <!-- Favicons -->
  <link href="{% static 'images/favicon.png' %}" rel="icon">
  <link href="{% static 'images/apple-touch-icon.png' %}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900"
    rel="stylesheet">

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

  <!-- Libraries CSS Files -->
  <link href="{% static 'lib/nivo-slider/css/nivo-slider.css' %}" rel="stylesheet">
  <link href="{% static 'lib/owlcarousel/owl.carousel.css' %}" rel="stylesheet">
  <link href="{% static 'lib/owlcarousel/owl.transitions.css' %}" rel="stylesheet">
  <link href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
  <link href="{% static 'lib/animate/animate.min.css' %}" rel="stylesheet">
  <link href="{% static 'lib/venobox/venobox.css' %}" rel="stylesheet">

  <!-- Nivo Slider Theme -->
  <link href="{% static 'css/nivo-slider-theme.css' %}" rel="stylesheet">

  <!-- Main Stylesheet File -->
  <link href="{% static 'css/style.css' %}" rel="stylesheet">

  <!-- Responsive Stylesheet File -->
  <link href="{% static 'css/responsive.css' %}" rel="stylesheet">
  {% endblock %}

</head>
</body>
<!-- {% cms_toolbar %} -->

<!-- {% cms_toolbar %} -->
{% block base_product %}
{% placeholder "base_product" %}
{% endblock %}

{% block navbar %}
{% include "partials/_navbar.html" %}
{% endblock %}

{% block index %}
{% endblock %}

{% static_placeholder "yo" %}

{% block article %}
{% endblock %}

{% block articles %}
{% endblock %}

{% block search %}
{% endblock %}

{% block comment %}
{% endblock %}


{% block about_footer %}
{% include "partials/_about_footer.html" %}
{% endblock %}



{% render_block "js" %}
<script src="{% static 'lib/jquery/jquery.min.js' %}"></script>
<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>
<script src="{% static 'lib/venobox/venobox.min.js' %}"></script>
<script src="{% static 'lib/knob/jquery.knob.js' %}"></script>
<script src="{% static 'lib/wow/wow.min.js' %}"></script>
<script src="{% static 'lib/parallax/parallax.js' %}"></script>
<script src="{% static 'lib/easing/easing.min.js' %}"></script>
<script src="{% static 'lib/nivo-slider/js/jquery.nivo.slider.js' %}" type="text/javascript"></script>
<script src="{% static 'lib/appear/jquery.appear.js' %}"></script>
<script src="{% static 'lib/isotope/isotope.pkgd.min.js' %}"></script>


<script src="{% static 'contactform/contactform.js' %}"></script>

<script src="{% static 'js/main.js' %}"></script>



</body>

</html>

Но это тоже не сработало :( Любая помощь приветствуется!

1 Ответ

1 голос
/ 26 сентября 2019

РЕШЕНИЕ:

(я не включил render_block "js" и "css" в нужном месте, и поэтому CSS не загружался)

{% load cms_tags sekizai_tags %}
{% load static %}
<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <title>Fake News</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">

  {% block "scripts" %}
  <!-- Favicons -->
  <link href="{% static 'images/favicon.png' %}" rel="icon">
  <link href="{% static 'images/apple-touch-icon.png' %}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  {% addtoblock "css" %}
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900"
    rel="stylesheet">{% endaddtoblock %}

  <!-- Bootstrap CSS File -->
  {% addtoblock "css" %}
  <link href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Libraries CSS Files -->
  {% addtoblock "css" %}
  <link href="{% static 'lib/nivo-slider/css/nivo-slider.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/owlcarousel/owl.carousel.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/owlcarousel/owl.transitions.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/animate/animate.min.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% addtoblock "css" %}
  <link href="{% static 'lib/venobox/venobox.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Nivo Slider Theme -->
  {% addtoblock "css" %}
  <link href="{% static 'css/nivo-slider-theme.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Main Stylesheet File -->
  {% addtoblock "css" %}
  <link href="{% static 'css/style.css' %}" rel="stylesheet">{% endaddtoblock %}

  <!-- Responsive Stylesheet File -->
  {% addtoblock "css" %}
  <link href="{% static 'css/responsive.css' %}" rel="stylesheet">{% endaddtoblock %}
  {% endblock %}
  {% render_block "css" %}
</head>
</body>
{% cms_toolbar %}

<!-- {% cms_toolbar %} -->
{% block base_product %}
{% placeholder "base_product" %}
{% endblock %}

{% block navbar %}
{% include "partials/_navbar.html" %}
{% endblock %}

{% block index %}
{% endblock %}

{% static_placeholder "yo" %}

{% block article %}
{% endblock %}

{% block articles %}
{% endblock %}

{% block search %}
{% endblock %}

{% block comment %}
{% endblock %}


{% block about_footer %}
{% include "partials/_about_footer.html" %}
{% endblock %}




{% addtoblock "js" %}
<script src="{% static 'lib/jquery/jquery.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/venobox/venobox.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/knob/jquery.knob.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/wow/wow.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/parallax/parallax.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/easing/easing.min.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/nivo-slider/js/jquery.nivo.slider.js' %}" type="text/javascript"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/appear/jquery.appear.js' %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script src="{% static 'lib/isotope/isotope.pkgd.min.js' %}"></script>{% endaddtoblock %}


{% addtoblock "js" %}
<script src="{% static 'contactform/contactform.js' %}"></script>{% endaddtoblock %}

{% addtoblock "js" %}
<script src="{% static 'js/main.js' %}"></script>{% endaddtoblock %}
{% render_block "js" %}


</body>

</html>
...