Bootstrap a Twig w Symfony

pytanie zadane 12 listopada 2016 w HTML i CSS przez wanderer Gaduła (3,710 p.)

Cześć, jesli podpinam w symfony jakis fragment szablonu bootstrapowego, dajmy na to np. menu, i jest on w formie wiadomo htmlowej bez tych twigowych znacznikow {%block aaa %} {%endblock%} to czy należy ten szablon specjalnie przerabiac na rzecz tych bloczków {%block aaa %} {%endblock%} ? Bez tego typu notacji: {%block aaa %} {%endblock%} co prawda wszystko dziala , ale czy istnieje jakas niepisana zasada, dobra praktyka że jednak nalezy to przerobic ?

1 odpowiedź

odpowiedź 12 listopada 2016 przez HaKIM Szeryf (87,590 p.)
wybrane 12 listopada 2016 przez wanderer

Najlepsza

Machnij sobie template.twig i pliki rozszerzaj o ten szablon.

W template.twig możesz użyć:

{% include 'templates/navbar.twig' %}

A w templates/navbar.twig zamieścić kod HTML z bootstrap'a.

Każdy plik rozszerzony o template.twig będzie automatycznie zawierał menu.

Rozszerzasz w ten sposób:

{% extends 'template.twig' %}

Przetestuj.

Stwórz 3 pliki:

template.twig
homepage.twig
templates/navbar.twig

template.twig:

<!DOCTYPE html>
<html lnag="pl">
<head>
    <meta charset="UTF-8">
    <title>Witaj Świecie</title>
</head>
<body>
    {% include 'templates/navbar.twig' %}

    {% block body %}

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

homepage.twig:

{% extends 'template.twig' %}

{% block body %}
    <h1>Witaj Świecie!</h1>
{% endblock %}

templates/navbar.twig:

<nav>
    <ul>
        <li>Menu!</li>
    </ul>
</nav>

Pokaż 7 poprzednich komentarzy

komentarz 12 listopada 2016 przez HaKIM Szeryf (87,590 p.)

Bywa.

Najlepszym, w tego typu błędach, jest śmiech, gdy się go już rozwiąże.

komentarz 12 listopada 2016 przez efiku Szeryf (75,160 p.)

Zainstaluj Symfony plugin do storma i włącz go z pozycji menu. nie będziesz miał takich błędów. Must have przy pracy z Symfony.

komentarz 12 listopada 2016 przez wanderer Gaduła (3,710 p.)

A czy można np. caly kod html/bootstrap w templates/navbar.html.twig objąc w znaczniki {%block navbar %} CAŁY KOD MENU {% endblock %} i potem wywolywac to jako

{% block navbar %} {% endblock %} w indexie ?

{% block navbar %}
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width-device-width, initial-scale=1, user-scalable=no">

    <title> Nazwa strony </title>

    <link rel="stylesheet" type="text/css" href="web/bundles/framework/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!--Styl menu -->
    <link href="{{ asset('bundles/framework/css/style.css') }}" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="<a title="" original-title="" href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" ><="" script>"="" rel="nofollow" target="_blank">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script></a>
    <script src="<a title="" original-title="" href="https://oss.maxcdn.com/libs/respond.min.jsjs" ><="" script>"="" rel="nofollow" target="_blank">https://oss.maxcdn.com/libs/respond.min.jsjs"></script></a>
    <![endif]-->

    <!--Skrypty do działania sumbenu -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

</head>
<body>


<div class="nav-side-menu">
    <div class="brand">MENU</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

    <div class="menu-list">

        <ul id="menu-content" class="menu-content collapse out">


            <li data-toggle="collapse" data-target="#przedmiot" class="collapsed">
                <a href="#"><i class="fa fa-book fa-lg"></i> Przedmioty <span class="arrow"></span></a>
            </li>
            <ul class="sub-menu collapse" id="przedmiot">
                

            </ul>


            <li data-toggle="collapse" data-target="#pracownik" class="collapsed">
                <a href="#"><i class="fa fa-graduation-cap fa-lg"></i> Pracownicy <span class="arrow"></span></a>
            </li>
            <ul class="sub-menu collapse" id="pracownik">
                
            </ul>
            <li>
                <a href="#">
                    <i class="fa fa-table fa-lg"></i> 
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-bar-chart fa-lg"></i> Statystyki
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-user fa-lg"></i> Profil
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-users fa-lg"></i> Użytkownicy
                </a>
            </li>
        </ul>
    </div>
</div>

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

Bo na razie wywolywalbym to jako {% block body%} {%end block%} zamiast {% block navbar %} {% endblock %}

EDIT : Chyba jednak to bez znaczenia bo dziala to inaczej