Contribute with CSS to the template page from a template view

decebals commented 5 years ago

I don't know if from the title is clear enough what I try to achieve, so I will explained below in details. It's more easy to follow with a concrete example. I have a template page (base.peb)

<head>
    {% block headCss %}
        <link href="{{ webjarsAt('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ webjarsAt('font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
        <link href="{{ publicAt('css/app.css') }}" rel="stylesheet">
    {% endblock %}
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>

    {% block bodyJs %}
        <script src="{{ webjarsAt('jquery/jquery.min.js') }}"></script>
        <script src="{{ webjarsAt('bootstrap/js/bootstrap.min.js') }}"></script>
    {% endblock %}
</body>

The template of the main page (main.peb) extends the base template and add a menu (view/menu.peb)

{% extends "base.peb" %}

{% block content %}
    {# Menu/Navbar #}
    {% include "view/menu.peb" %}

    {% block main %}Content here{% endblock %}
{% endblock %}

{% block bodyJs %}
    {{ parent() }}
    <script>
        $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]').closest('li').addClass('active');
    </script>
{% endblock %}

The content of menu.peb is not important for explanation but I will add it just in case

<nav class="navbar navbar-default" role="navigation" style="margin-top: 20px;">
    <!-- Collection of nav links and other content for toggling -->
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="/a">A</a></li>
            <li><a href="/b">B</a></li>
        </ul>
</nav>

I wish a more component oriented approach. So, in the template of menu I want to come with contributions for head (headCss block from page) and to the end of body (bodyJs block from page). Is it possible?

They are some interesting attempts for component oriented approach like:

but I didn't find what I looking for.

Do you have other idea to how I can obtain this modularization (component oriented) in Pebble?

decebals commented 5 years ago

As information, my first design was without the menu.peb template. The content of the menu.peb template was added directly in base.peb template. In this case is easy to override the headCss and bodyJs blocks and to add the assets that comes with menu. But I wish to extract the menu in a separate template (menu.peb) to strip the content of base.peb and increase the readability. When I did this segregation I encountered this problem, I don't know how to add assets (css, scripts) to the base page, via headCss and bodyJs blocks, from menu.peb (that is a part/view/component of the base page).

decebals commented 10 months ago

The part with assets and how to contribute to html page head (css, javascript, ..) was discussed in https://github.com/PebbleTemplates/pebble/issues/115. The issue (#115) was closed for the reason that it is too complicated to implement (it assumes the execution of the rendering process twice - the first time for collecting information and the second time the actual rendering). I don't know how Symphony solves this type of problem but I know that in Apache Wicket you can do this from the beginning (it's a component oriented based web framework). I created this issue a long time ago and it can be closed if it gets confusing :smile: . It's not clear for me if I am a sophisticated pebble user with this component oriented approach (a component comes with the html fragment, css and javascript files) and I have too high expectations from pebble (I'm somehow only thinking about facilitating such a functionality).

PebbleTemplates / pebble

Contribute with CSS to the template page from a template view #463