Python-сообщество

TitanFighter · Сен. 21, 2015 21:54:57

Приветствую.
Весь гугл изгуглил, пробовал разные запросы - не могу найти вообще ничего, чтобы подсказало, как правильно решить свой вопрос.

Как правильно интегрировать приложения со своими html+css+js в уже существующий проект, где есть свой настроенный index.html? Т.е. грубо говоря, у меня есть уже “обрамление” (меню, кнопки), и в него я хочу вставить DjangoBB как есть.

Есть у меня project/src/templates/index.html, к которому я уже подключаю другие шаблоны и который сам по себе дает всему сайту верхний блок меню и слева панель кнопочек. Этот index.html выглядит так:

{% load staticfiles %}
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloEvery1</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" >
    <link rel="stylesheet" href="{% static "css/normalize.css" %}">
    <link rel="stylesheet" href="{% static "css/main.css" %}">
    <script src="{% static "js/vendor/modernizr.js" %}"></script>
</head>
<body>
<div class="fixed">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            <li><div style="font-weight: 900; color: white; line-height: 3rem; margin-left: 2rem" >HelloEvery1</div></li>
        </ul>
        <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="center-buttons">
                <li class="divider"></li>
                <li class="has-dropdown">
                    <a href="#">Places</a>
                    <ul class="dropdown">
                        <li><a href="{% url 'app_places:all_cinemas' %}">Cinemas</a></li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li><a href="#">Friends</a></li>
                <li class="divider"></li>
            </ul>
        </section>
    </nav>
</div>
{% block show %}{% endblock %}
<div class="slide-menu left-side">
    <ul class="menu-items">
        <li class="menu-item" data-target="#Panel1" title="Panel 1">
            <div class="menu-icon">
                <i class="fa fa-book"></i>
            </div>
            <div class="menu-content">
                <span>Panel 1</span>
            </div>
            <div class="menu-close">
                <i class="fa fa-times"></i>
            </div>
        </li>
        <li id="CalendarIcon" class="menu-item" data-target="#Panel2" title="Panel 2">
            <div class="menu-icon">
                <i class="fa fa-calendar"></i>
            </div>
            <div class="menu-content">
                <span>Panel 2</span>
            </div>
            <div class="menu-close">
                <i class="fa fa-times"></i>
            </div>
        </li>
    </ul>
    <div class="menu-panels">
        <div id="Panel1" class="menu-panel">
            <h3>Panel 1 Contents</h3>
        </div>
        <div id="Panel2" class="menu-panel">
            <h3>Panel 2 Contents</h3>
        </div>
        </div>
    </div>
</div>
<script src="{% static "js/vendor/jquery.js" %}"></script>
<script src="{% static "js/vendor/jquery.slidemenu.js" %}"></script>
<script src="{% static "js/vendor/fastclick.js" %}"></script>
<script src="{% static "js/foundation/foundation.js" %}"></script>
<script src="{% static "js/foundation/foundation.topbar.js" %}"></script>
<script type="text/javascript">
    $(document).foundation({topbar: {custom_back_text : false,
                                    mobile_show_parent_link : false}});
</script>
<script type="text/javascript">
    $(".slide-menu").slidemenu({top:45});
</script>
</body>
</html>

и берет всю нужную статику из
project/src/static/css
project/src/static/js
project/src/static/img
Используется Foundation 5

Поставил я DjangoBB в project/src/djangobb_forum, у которого есть своя статика со своими html шаблонами, главный из которых base.html. Если ничего не трогать, то форум работает без проблем. Но нужно на страницах форума получить верхнее меню и боковые кнопки, как и на всех других страницах сайта. Как правильно интегрировать base.html в index.html? Наглым образом через теги:

{% extends 'index.html' %}
{% block show %}

не получается - слетают стили у форума.

Благодарю.

Отредактировано TitanFighter (Сен. 21, 2015 23:57:55)

DOOMer · Сен. 22, 2015 10:35:01

Перепишите шаблон форума, отнаслледовав его от вашего index.html и перенеся вывод форумного контента в блок {% block show %}
В базовом шаблонеопределите пустые блоки длядополнительных файлов стилей и скриптов, например так

[% block custom_css %}
{% endblock %}

[% block custom_js %}
{% endblock %}

А в нужныхдочерних шаблонах для конкретных страниц, в эти блоки и вставьте HTML-код для подключения нужных стилей и скриптов, которые не использутся на всех страница сайта.

Или выделите ваше меню и кнопки в отдельные шаблоны, вставляйте их вбазовые шблоны сайта и форума через }% include … %}

p.s. блок вывода основного контента обычно (по негласному соглашению) именуют {%block content %}, для сглаживания нестыковок сторонних приложений, имеющих в своем составе шаблоны от разработчиков приложения.

Python-сообщество

Уведомления

#1 Сен. 21, 2015 21:54:57

Как правильно интегрировать приложение со своей статикой в существующий проект\шаблон?

#2 Сен. 22, 2015 10:35:01

Как правильно интегрировать приложение со своей статикой в существующий проект\шаблон?

Board footer