👩‍🎓 🤞🏻 🕠 सिम्फनी 5 बंडलों के साथ कोड का पुन: उपयोग कैसे करें? भाग 3. मेजबान के साथ बंडल का एकीकरण: टेम्पलेट्स, शैलियों, जेएस ⛹🏽 🤴🏻 🧔🏻

आइए परियोजनाओं के बीच कॉपी-पेस्ट को रोकने और कोड को फिर से उपयोग करने योग्य सिम्फनी 5 प्लग-इन बंडल में स्थानांतरित करने के तरीके के बारे में बात करते हैं। बंडल के साथ मेरे अनुभव को सारांशित करने वाले लेखों की एक श्रृंखला, एक न्यूनतम बंडल बनाने और परीक्षण और बंडल रिलीज चक्र के लिए एक डेमो आवेदन को फिर से बनाने से अभ्यास में ले जाएगी।

में पिछले लेख, हम बंडल में मुख्य कोड और टेम्पलेट्स हटा दिया, मार्ग और निर्भरता इंजेक्शन कंटेनर में सेवाओं के संबंध की स्थापना की। इस लेख में, हम बंडल को होस्ट एप्लिकेशन में एम्बेड करेंगे:

टेम्पलेट एकीकरण: 2 तरीके
टेम्पलेट एकीकरण: स्वतंत्र मॉड्यूल
एक विधानसभा के लिए बंडल शैलियों को जोड़ना
टेम्पलेट एकीकरण: होस्ट टेम्पलेट्स में एम्बेड करना
ओवरराइडिंग स्टाइल और जेएस

श्रृंखला सामग्री

1.
2.
3. : , , JS
4.
5.
6. ,
7. ,

यदि आप ट्यूटोरियल को क्रमिक रूप से पूरा नहीं कर रहे हैं, तो रिपॉजिटरी से एप्लिकेशन डाउनलोड करें:
https://github.com/bravik/symfony-bundles-tutorial/
और 2-basic-refactoring शाखा में स्विच करें ।

एक फ़ाइल में प्रोजेक्ट को स्थापित करने और शुरू करने के निर्देश README.md। 3-एकीकरण
वेक्टर में आपको इस लेख के लिए कोड का अंतिम संस्करण मिलेगा ।

टेम्पलेट एकीकरण

, .

. base.html.twig, -:

{% extends 'base.html.twig' %}

HTML- , . , , - . ?

2 : , .

, .

:

reusability, . base.html.twig, .

include menu.html.twig —
{{ encore_entry_link_tags('host-styles') }} {{ encore_entry_script_tags('host-app') }} — entry- , webpack encore

templates/editor/* :

{% extends 'base.html.twig' %}
 
{% extends '@Calendar/base.html.twig' %}

. .

, . … HTML HTML- .

SCSS, — Symfony Encore ( Symfony, Webpack).

entry-. Entry- — , . webpack.config.js.

Entry- twig- encore_entry_link_tags(entry-file) encore_entry_script_tags(entry-file), Encore.

entry- . assets :

cp ./assets ./bundles/CalendarBundle/assets -R

entry-:

mv host-app.js calendar-editor-app.js
mv host-styles.scss calendar-editor-styles.scss

assets/scss/events/_main.scss calendar-editor-styles.scss.

, scss/events/calendar.scss, — . , assets . hosts-styles.scss :

@import "../../vendor/bravik/calendar-bundle/assets/scss/widget/calendar";

, calendar-editor-styles.scss.

WebpackEncore entry- webpack.config.js:

Encore
// ...
.addEntry(
    'calendar-editor-app',
     './vendor/bravik/calendar-bundle/assets/js/calendar-editor-app.js'
)
.addStyleEntry(
    'calendar-editor-styles',
     './vendor/bravik/calendar-bundle/assets/scss/calendar-editor-styles.scss'
)

, ./bundles/CalendarBundle, vendors. composer . vendors () .

.
Encore-: npm start.
— .
- , git- 3-integration .

entry- .

@Calendar/base.html.twig stylesheets :

{{ encore_entry_link_tags('calendar-editor-styles') }}

javascripts:

{{ encore_entry_script_tags('calendar-editor-app') }}

: .

— : , , , , .

:

— , . , , , .

,
?

API? , API? , .

, : , . , .

Symfony . , .

templates bundles/CalendarBundle. .

Symfony templates , templates/bundles/< > . , templates .

, templates/bundles/CalendarBundle , .

base.html.twig. :

cp ./bundles/CalendarBundle/templates/base.html.twig ./templates/bundles/CalendarBundle/base.html.twig

. <body>:

{% include 'menu.html.twig' %}

, — !

, . , . .

. , . , . .

templates/bundles/CalendarBundle/base.html.twig:

{% extends 'base.html.twig' %}

base.html.twig — .

HTML . , , . , .

{% extends 'base.html.twig' %}

{% block title %} {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('calendar-editor-styles') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('calendar-editor-app') }}
{% endblock %}

{{ parent() }} , :

, . .

— .

, . :

{% extends 'base.html.twig' %}

{% block title %}
    {%- block calendar_title %} {% endblock -%}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('calendar-editor-styles') }}
    {% block calendar_styles %}{% endblock %}
{% endblock %}

{% block body %}
    {%- block calendar_body %}{% endblock -%}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('calendar-editor-app') }}
    {% block calendar_scripts %}{% endblock %}
{% endblock %}

, , / .

entry- .

, , , entry-, .

, overriden-calendar-styles.scss:

//    
@import "../../vendor/bravik/calendar/assets/scss/calendar-styles";

//   
@import "calendar/customizations";

entry- , .

- , entry- -. , .

JavaScript

entry- JavaScript.

JS-. entry- :

import CalendarApp from "../calendar/CalendarApp";

global.bravikCalendar = new CalendarApp();
global.bravikCalendar.init();

Entry- . , .

, CalendarApp.
, . :

import CalendarApp from "../../vendor/bravik/calendar/assets/js/calendar/CalendarApp";
import myCustomLogic from "./MyCutomLogic";

global.bravikCalendar = new CalendarApp();
global.bravikCalendar.registerSomeCustomLogic(myCustomLogic);
// And more ...
global.bravikCalendar.init();

-: - , JS , . , «» .

3-integration.

, .

:

भाग 1. न्यूनतम बंडल
भाग 2. हम कोड और टेम्पलेट्स को बंडल में निकालते हैं।
भाग 3. मेजबान के साथ बंडल का एकीकरण: टेम्पलेट्स, शैली, JS
भाग 4. बंडल के विस्तार के लिए इंटरफ़ेस
5. पैरामीटर और कॉन्फ़िगरेशन
भाग 6. परीक्षण, बंडल भाग 7 के अंदर सूक्ष्म परीक्षण।
रिलीज चक्र, स्थापना और अद्यतन

सिम्फनी 5 बंडलों के साथ कोड का पुन: उपयोग कैसे करें? भाग 3. मेजबान के साथ बंडल का एकीकरण: टेम्पलेट्स, शैलियों, जेएस

टेम्पलेट एकीकरण

:

:

JavaScript

:

More articles: