Kreiranje novih EPT modula
Najteži način za kreiranje novog EPT modula je korišćenje Drush komande (za Drush 12+). Da biste koristili ovu komandu, potrebno je da omogućite EPT Core Starterkit modul:
Nakon toga, generator EPT modula biće dostupan:
drush generate ept:module
Počnite naziv mašine sa prefiksom ept_*, to je obavezno za rad svih EPT modula.
Takođe možete koristiti EPT Starterkit u EPT Core fascikli modula. Samo preimenujte sve ePt_starterkit u fajlovima u naziv mašine vašeg novog EPT modula.
https://www.drupal.org/project/ept_core
Ili kopirajte EPT Text modul i zamenite naziv mašine tamo.
https://www.drupal.org/project/ept_text
Jer je to najjednostavniji EPT modul i sadrži sva osnovna EPT podešavanja.
Kreiranje EPT modula korak po korak
(Neke snimke ekrana mogu biti iz EBT countdown modula)
Kopirajte postojeći EPT Text modul ili EPT Kickstarter modul kao šablon, ili koristite komandu drush generate ept:module.
Kopirajte postojeći EPT Text modul ili EPT Kickstarter modul kao šablon, ili koristite komandu drush generate ept:module.
EPT Text modul sadrži sledeće fascikle:
/ept_text/config/install — sadrži konfiguracije za EPT Text tip paragrafa i instance polja. Drugi EPT moduli mogu sadržavati konfiguracije za tipove paragrafa i skladištenje polja.
/ept_text/templates — sadrži paragraph--ept-text--default.html.twig šablon za paragraf.
/ept_text/tests — sadrži testove za EPT module, trenutno samo jedan test instalacije.
i druge standardne Drupal datoteke modula: composer.json, ept_text.info.yml, readme.md. Više detalja o kreiranju prilagođenih Drupal modula možete pronaći u zvaničnoj dokumentaciji:
https://www.drupal.org/docs/develop/creating-modules
Kreiraću novi EPT Countdown modul koji će koristiti sledeći JavaScript dodatak — FlipDown:
https://github.com/PButcher/flipdown
Napravite fork repozitorijuma na GitHub-u i pošaljite ga na Packagist.
Napravite fork repozitorijuma na GitHub-u i pošaljite ga na Packagist.
Sve biblioteke trećih strana moraju biti forkovane i hostovane na Packagist-u, na primer:
https://packagist.org/packages/levmyshkin/flexslider
sa:
https://github.com/levmyshkin/flexslider
Onda Composer može da ih učitava kao regularne biblioteke sa Packagist-a. Ove biblioteke trećih strana moraju imati polje "type": "drupal-library" u composer.json, i tada će biti instalirane u /libraries folder po defaultu:
https://github.com/levmyshkin/flexslider/blob/master/composer.json
Napravimo fork FlipDown repozitorijuma na GitHub-u.
Generalno se ne preporučuje forkovati repozitorijume umesto korišćenja originalnih izvora. Međutim, verujem da ovo olakšava korišćenje EPT modula bez manuelnog uređivanja composer.json. Zamislite koliko je teško početniku da instalira Composer, ručno menja composer.json i ispravno navede URL spoljnog repozitorijuma. Imati sopstvenu biblioteku na Packagist-u pojednostavljuje instalaciju. Zato je bolje hostovati sve biblioteke trećih strana na Packagist-u.
Na stranici forka na GitHub-u možete preimenovati repozitorijum. Naziv treba da bude jednostavan, bez velikih slova i specijalnih znakova. Dozvoljeni su crtica (-) i donja crta (_).
Sada imamo novi repozitorijum:
https://github.com/levmyshkin/flipdown
Dodajmo composer.json fajl sa tipom "drupal-library":
git add composer.json
git commit -m 'Add Composer.json file'
git push origin master
composer.json fajl je dostupan na:
https://github.com/levmyshkin/flipdown/blob/master/composer.json
Ako proverite trenutne tagove u repozitorijumu, neće ih biti:
git tag
Obično pratim verziju originalne biblioteke. Ako je poslednja verzija bila 1.4.6, povećam sekundarnu verziju na 1.4.7. Pošto FlipDown nije imao tagove, kreirao sam verziju 1.0.0:
git tag 1.0.0
git push origin 1.0.0
Tag je potreban jer sadrži composer.json sa tipom "library".
Zašto ne kopirati JS biblioteku direktno u modul?
Možete kopirati biblioteke samo sa GPL licencom. JavaScript biblioteke obično koriste MIT licencu. Tehnički je moguće, ali Drupal.org pravila to zabranjuju:
https://www.drupal.org/about/licensing
Sada objavimo FlipDown biblioteku na Packagist-u:
https://packagist.org/packages/submit
Ako ste zaboravili da dodate composer.json sa "type": "drupal-library" pre objavljivanja — nije problem. Samo dodajte fajl i kreirajte novi tag, Packagist će automatski preuzeti ažuriranja.
Ovako izgleda stranica biblioteke na Packagist-u:
https://packagist.org/packages/levmyshkin/flipdown
Proverite da li stranica biblioteke prikazuje tip kao drupal-library.
Sada se vratimo našim Drupal fajlovima i kopirajmo fasciklu ept_text; novom modulu ću dati naziv ept_countdown:
Sledeće korake treba izvršiti:
- Obrišite konfiguracije u /config/install — nove ćemo izvesti kasnije.
- Zamenite sve pojave ept_text sa ept_countdown.
- Preimenujte fajlove, zamenjujući "text" sa "countdown".
- Ažurirajte opise modula u ept_countdown.info.yml i README.md.
Svaki korak ću zasebno komitovati u Gitu, tako da možete pratiti izmene korak po korak:
git clone https://git.drupalcode.org/project/ept_countdown.git
Sada imamo šablon za naš modul i možemo slati izmene na Drupal.org.
Napravite projekat modula na Drupal.org.
Napravite projekat modula na Drupal.org.
Idemo na sajt drupal.org na stranicu za kreiranje projekta:
https://www.drupal.org/node/add
Potrebno je dodati projekat tipa Modul:
https://www.drupal.org/node/add/project-module
Naslov: Extra Paragraph Types (EPT): Countdown
Tip projekta: Potpuni projekat
Kratki naziv: ept_countdown
Status održavanja: Aktivno održavan
Status razvoja: U aktivnom razvoju
Kategorije modula: Sadržaj, Prikaz sadržaja
Eko sistem: Extra Paragraph Types (EPT): Core
U polje Opis obično ubacujem kompletnu listu dostupnih EPT modula (pogledajte primer u Markdown-u gore).
Sada imamo stranicu projekta modula na Drupal.org:
https://www.drupal.org/project/ept_countdown
Na tabu Verziona kontrola (Version Control) možete pronaći uputstva kako da dodate udaljeni repozitorijum u vaš lokalni Git projekat:
https://www.drupal.org/project/ept_countdown/git-instructions
Nakon prvog commit-a, trebalo bi da napravite novu granu u skladu sa glavnom verzijom ostalih EPT modula — trenutno je to 1.4.x.
Sada možemo početi sa dodavanjem nove funkcionalnosti našem modulu. Proces je sličan razvoju prilagođenog modula: kreiraćemo tip paragrafa, dodati polja i uključiti CSS/JS resurse.
Početak razvoja funkcionalnosti EPT Countdown
Korak 1. Kreirajte EPT Countdown tip paragrafa. Jednostavno instalirajte modul ako ste ga generisali pomoću Drush-a.
Početak razvoja funkcionalnosti EPT Countdown
Korak 1. Kreirajte EPT Countdown tip paragrafa. Jednostavno instalirajte modul ako ste ga generisali pomoću Drush-a.
Jednostavno instalirajte modul ako ste ga generisali pomoću Drush-a.
Prvo, potrebno je da kreirate novi tip paragrafa EPT Countdown:
/admin/structure/paragraphs_type/add
Uverite se da naziv mašine počinje sa ept_. Obično naziv paragrafa započinjem sa EPT — na taj način će se naziv mašine automatski ispravno formirati. Da li naziv mašine treba da se poklapa sa imenom modula? Da, preporučuje se radi konzistentnosti i da se izbegnu konflikti sa drugim EPT modulima. Ovo je takođe važno za preklapanje šablona u modulima umesto u temama — pogledajte funkciju ept_core_theme_registry_alter() u modulu ept_core.
Sada dodajte polje EPT Settings: field_ept_settings — ovo polje je obavezno za sve EPT module:
EPT Settings je zajedničko polje iz EPT Core modula; pruža podešavanja DOM Box-a, pozadine, razmaka i širine.
Pošto treba da odbrojavamo do datuma, dodajte polje za datum/vreme:
Dodao sam ept_ prefiks u naziv mašine, ali to nije obavezno. Možete nazvati, na primer, field_countdown_date. Takođe imamo podrazumevana polja body i title — to je dovoljno za countdown paragraf.
Za EPT module obično koristimo horizontalne tabove u uređivačkom formi:
Ovo nije obavezno, ali je zgodno da se sadržaj i podešavanja odvoje, naročito kada ima mnogo podešavanja.
Roditeljska grupa treba biti podešena na Tabove sa Horizontalnim pravcem i parametrom Width Breakpoint postavljenim na 120 (ili bilo koju drugu malu vrednost):
Sada kada imamo tip paragrafa, omogućite EPT Countdown modul da bi se primenili šabloni:
/admin/modules
Omogućite EPT Countdown paragraf za željeni tip sadržaja koji ima polje za paragrafe:
Evo kako izgleda na stranici:
Korak 2. Povezivanje biblioteka trećih strana u EPT modulima
Korak 2. Povezivanje biblioteka trećih strana u EPT modulima
Sada možemo povezati biblioteku treće strane. Već imamo biblioteku levmyshkin/flipdown navedenu u composer.json
, ali pošto je ovo prilagođeni modul, potrebno je da biblioteku instaliramo ručno preko Composer-a:
composer require levmyshkin/flipdown
Biblioteka će biti automatski instalirana u /libraries
folder:
Sada kreirajte fajl ept_countdown.libraries.yml
i registrujte FlipDown CSS/JS biblioteke, kao i prilagođeni JS fajl ept_flipdown/js/ept_countdown.js
, gde će se kasnije inicijalizovati FlipDown plugin:
ept_countdown.libraries.yml:
ept_countdown:
css:
component:
/libraries/flipdown/dist/flipdown.min.css: { minified: true }
js:
/libraries/flipdown/dist/flipdown.min.js: { minified: true }
js/ept_countdown.js: {}
dependencies:
- core/once
- core/drupalSettings
Za fajlove u /libraries
folderu koristimo apsolutne putanje koje počinju kosom crtom.
js/ept_countdown.js:
(function ($, Drupal) {
/**
* EBT Countdown ponašanje.
*/
Drupal.behaviors.eptCountDown = {
attach: function (context, settings) {
}
};
})(jQuery, Drupal);
Takođe treba da prikačimo ept_countdown
biblioteku u šablone paragrafa. Ne zaboravite da imamo dva šablona:
{{ attach_library('ept_countdown/ept_countdown') }}
Očistite keš i proverite da li su JavaScript fajlovi učitani na stranici:
Datum ćemo proslediti iz PHP-a u JavaScript preko drupalSettings
. Zato smo u ept_countdown.libraries.yml
fajl dodali sledeće zavisnosti:
dependencies:
- core/once
- core/drupalSettings
Korak 3. Povezivanje prilagođenog widgeta polja za EPT podešavanja i prosleđivanje promenljivih u JavaScript
Korak 3. Povezivanje prilagođenog widgeta polja za EPT podešavanja i prosleđivanje promenljivih u JavaScript
U EPT modulima, podrazumevana podešavanja se ne prosleđuju u JavaScript. Da bismo to omogućili, potrebno je da preklopimo klasu widgeta polja EptSettingsDefaultWidget
:
Fajl: ept_countdown/src/Plugin/Field/FieldWidget/EptSettingsCountDownWidget.php
<?php
namespace Drupal\ept_countdown\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ept_core\Plugin\Field\FieldWidget\EptSettingsDefaultWidget;
/**
* Implementacija plugina za widget 'ept_settings_countdown'.
*
* @FieldWidget(
* id = "ept_settings_countdown",
* label = @Translation("EPT Countdown podešavanja"),
* field_types = {
* "ept_settings"
* }
* )
*/
class EptSettingsCountDownWidget extends EptSettingsDefaultWidget {
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
$element['ept_settings']['pass_options_to_javascript'] = [
'#type' => 'hidden',
'#value' => TRUE,
];
$element['ept_settings']['color_theme'] = [
'#title' => $this->t('Tema boje'),
'#type' => 'radios',
'#options' => [
'dark' => $this->t('Tamna'),
'light' => $this->t('Svetla'),
],
'#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
'#description' => $this->t('Izaberite temu boje za odbrojavanje'),
'#weight' => '3',
];
$element['ept_settings']['styles'] = [
'#title' => $this->t('Stilovi'),
'#type' => 'radios',
'#options' => [
'default' => $this->t('Podrazumevano'),
'new_year' => $this->t('Nova godina'),
],
'#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
'#description' => $this->t('Izaberite poseban stil za odbrojavanje'),
'#weight' => '4',
];
$element['ept_settings']['heading_days'] = [
'#title' => $this->t('Naslov za dane'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Dani'),
'#description' => $this->t('Naslov za brojilac dana'),
'#weight' => '5',
];
$element['ept_settings']['heading_hours'] = [
'#title' => $this->t('Naslov za sate'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Sati'),
'#description' => $this->t('Naslov za brojilac sati'),
'#weight' => '6',
];
$element['ept_settings']['heading_minutes'] = [
'#title' => $this->t('Naslov za minute'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minuti'),
'#description' => $this->t('Naslov za brojilac minuta'),
'#weight' => '7',
];
$element['ept_settings']['heading_seconds'] = [
'#title' => $this->t('Naslov za sekunde'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Sekunde'),
'#description' => $this->t('Naslov za brojilac sekundi'),
'#weight' => '8',
];
return $element;
}
public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
foreach ($values as &$value) {
$value += ['ept_settings' => []];
}
return $values;
}
}
Sada možemo izabrati naš widget za polje EPT Settings:
Putanja: /admin/structure/paragraphs_type/ept_countdown/form-display
Sačuvajte paragraf i proverite JavaScript promenljive preko drupalSettings
. Sada se svi parametri iz EPT Settings prosleđuju skripti:
Na kraju ključa paragraph-id-*
nalazi se jedinstveni ID paragrafa, koji pomaže da se identifikuje odgovarajući paragraf.
FlipDown plugin ima parametar teme (svetla/tamna). Mi ga prosleđujemo koristeći polje color_theme
u widgetu EptSettingsCountDownWidget
:
$element['ept_settings']['color_theme'] = [
'#title' => $this->t('Tema boje'),
'#type' => 'radios',
'#options' => [
'dark' => $this->t('Tamna'),
'light' => $this->t('Svetla'),
],
'#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
'#description' => $this->t('Izaberite temu boje za odbrojavanje'),
'#weight' => '3',
];
Sada se vrednost teme može preuzeti u JavaScript preko drupalSettings
i koristiti za primenu odgovarajućeg stila:
Korak 4. Inicijalizacija FlipDown plugina za EPT Countdown paragraf
Korak 4. Inicijalizacija FlipDown plugina za EPT Countdown paragraf
Već smo prosledili podešavanja paragrafa u JavaScript preko drupalSettings
. Sada treba da prosledimo i vrednost datuma iz polja Datum. Da bismo to uradili, kreirajte prazan <div>
u šablonu sa atributom data-date
koji čuva timestamp vrednost. Koristite paragraph.id()
da dodelite jedinstveni ID paragrafa:
Fajl: paragraph--ept-countdown--default.html.twig
<div
class="ept-countdown-date ept-countdown-inline-block flipdown"
id="paragraph-id-{{ paragraph.id() }}"
data-date="{{ content.field_ept_countdown_date[0]['#attributes']['datetime']|date('U') }}">
</div>
Ako niste sigurni gde se čuva vrednost datuma, koristite Twig Debugger modul i ubacite {{ dump(content.field_ept_countdown_date) }}
u šablon.
Filter date('U')
konvertuje datum u Unix timestamp format.
Sada uključite prilagođeni JavaScript i inicijalizujte FlipDown plugin:
Fajl: /ept_countdown/js/ept_countdown.js
(function ($, Drupal) {
/**
* Ponašanje EPT Countdown.
*/
Drupal.behaviors.eptCountDown = {
attach: function (context, settings) {
var countdowns = once('ept-countdown-paragraph', '.ept-countdown-date', context);
countdowns.forEach(function(countdown) {
var eptOptions = drupalSettings['eptCountdown'][countdown.getAttribute('id')];
var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
var countdownId = countdown.getAttribute('id');
new FlipDown(countdownTimestamp, countdownId, {
theme: eptOptions['options']['color_theme'],
}).start();
});
}
};
})(jQuery, Drupal);
Ne zaboravite da očistite keš da bi se izmene primenile. Nakon toga, FlipDown plugin bi trebalo da se pravilno prikazuje na stranici:
Korak 5. Stilizovanje novog EPT Countdown paragrafa. Za modul generisan putem Drush-a, Gulp.js fajl je već uključen.
Korak 5. Stilizovanje novog EPT Countdown paragrafa. Za modul generisan putem Drush-a, Gulp.js fajl je već uključen.
Kao što vidimo, čak ni podrazumevani FlipDown stilovi nisu savršeno prikazani — na primer, na desktopu se brojevi pojavljuju u dva reda. Ali ovo možemo lako popraviti prilagođenim stilovima. Jednostavno kopirajte fajlove gulpfile.js
i package.json
iz EPT Counter modula ili iz EPT Core Kickstarter modula.
gulpfile.js:
// Učitavanje plugina
var gulp = require('gulp'),
sass = require('gulp-dart-scss'),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano"),
notify = require('gulp-notify'),
sassUnicode = require('gulp-sass-unicode');
var config = {
scssSrc: 'scss/*.scss',
allScss: 'scss/**/*.scss',
cssDest: 'css/',
allJs: 'assets/js/**/*.js',
allImgs: 'assets/img/**/*'
};
function style() {
return gulp.src(config.allScss)
.pipe(sass())
.pipe(sassUnicode())
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(config.cssDest));
}
exports.style = style;
function watch(){
gulp.watch('scss/**/*.scss', style)
}
exports.watch = watch;
package.json:
{
"name": "ept_styles",
"version": "1.0.0",
"description": "Pokrenite npm install, zatim gulp watch",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Greška: nije definisan test\" && exit 1"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"cssnano": "^5.0.2",
"gulp": "^4.0.2",
"gulp-dart-scss": "^1.1.0",
"gulp-notify": "^4.0.0",
"gulp-postcss": "^9.0.0",
"gulp-sass-unicode": "^1.0.5",
"gulp-sourcemaps": "^3.0.0"
},
"dependencies": {
"cucumber": "*",
"postcss": "^8.2.13"
}
}
Fajl package-lock.json
biće automatski generisan nakon pokretanja:
npm install
Zatim možete pokrenuti Gulp zadatak sa:
gulp watch
Sada dodajte SCSS fajl:
/ept_countdown/scss/flipdown.scss
.flipdown {
width: 580px;
}
Fajl flipdown.css
biće automatski kompajliran iz flipdown.scss
. Uključite ga u ept_countdown.libraries.yml
:
ept_countdown:
css:
component:
/libraries/flipdown/dist/flipdown.min.css: { minified: true }
css/flipdown.css: {}
Očistite keš i proverite rezultat:
Prikaz je sada značajno poboljšan!
Da li mogu koristiti običan CSS umesto SCSS kompajlacije?
Da, možete. Ali većina programera više voli pisanje u SCSS jer je pogodnije i skalabilnije.
Korak 6. Proširenje forme podešavanja dodatnim parametrima FlipDown plugina
Korak 6. Proširenje forme podešavanja dodatnim parametrima FlipDown plugina
FlipDown plugin podržava parametre theme
i headings
, koje možemo koristiti za prilagođavanje prikaza. Već smo kreirali prilagođeni widget polja EptSettingsCountDownWidget, a sada ćemo mu dodati odgovarajuća polja.
Fajl: /ept_countdown/src/Plugin/Field/FieldWidget/EptSettingsCountDownWidget.php
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
$element['ept_settings']['pass_options_to_javascript'] = [
'#type' => 'hidden',
'#value' => TRUE,
];
$element['ept_settings']['color_theme'] = [
'#title' => $this->t('Tema boje'),
'#type' => 'radios',
'#options' => ['dark' => $this->t('Tamna'), 'light' => $this->t('Svetla')],
'#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
'#description' => $this->t('Izaberite temu boje za odbrojavanje'),
'#weight' => '3',
];
$element['ept_settings']['styles'] = [
'#title' => $this->t('Stilovi'),
'#type' => 'radios',
'#options' => ['default' => $this->t('Podrazumevano'), 'new_year' => $this->t('Nova godina')],
'#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
'#description' => $this->t('Izaberite poseban stil za odbrojavanje'),
'#weight' => '4',
];
$element['ept_settings']['heading_days'] = [
'#title' => $this->t('Naslov za dane'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Dani'),
'#description' => $this->t('Naslov za brojilac dana'),
'#weight' => '5',
];
$element['ept_settings']['heading_hours'] = [
'#title' => $this->t('Naslov za sate'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Sati'),
'#description' => $this->t('Naslov za brojilac sati'),
'#weight' => '6',
];
$element['ept_settings']['heading_minutes'] = [
'#title' => $this->t('Naslov za minute'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minuti'),
'#description' => $this->t('Naslov za brojilac minuta'),
'#weight' => '7',
];
$element['ept_settings']['heading_seconds'] = [
'#title' => $this->t('Naslov za sekunde'),
'#type' => 'textfield',
'#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Sekunde'),
'#description' => $this->t('Naslov za brojilac sekundi'),
'#weight' => '8',
];
return $element;
}
Sada možemo koristiti naslove i temu u šablonu. ID elementa prati obrazac paragraph-id-{{ paragraph.id() }}
, što nam omogućava da preuzmemo podatke iz drupalSettings
:
new FlipDown(countdownTimestamp, countdownId, {
theme: eptOptions['options']['color_theme'],
headings: [
eptOptions['options']['heading_days'],
eptOptions['options']['heading_hours'],
eptOptions['options']['heading_minutes'],
eptOptions['options']['heading_seconds'],
],
}).start();
Pored toga, koristimo vrednost styles
iz podešavanja za dinamičko dodeljivanje stilova u šablonu:
{%
set classes = [
'paragraph',
'ept-paragraph',
'ept-paragraph-countdown',
'paragraph--type--' ~ paragraph.bundle|clean_class,
'ept-paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished',
'paragraph-id-' ~ paragraph.id(),
content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles,
content.field_ept_settings['#object'].field_ept_settings.ept_settings.color_theme,
]
%}
Prikačite new_year
stilove uslovno ako je izabran odgovarajući stil:
{% if content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles == 'new_year' %}
{{ attach_library('ept_countdown/new_year') }}
{% endif %}
ept_countdown.libraries.yml:
new_year:
css:
component:
css/new-year.css: {}
/ept_countdown/scss/new-year.scss:
.ept-paragraph-countdown.new_year {
background: url(../img/snowflakes.webp) center center repeat;
}
Rezultat:
Možete dodati bilo koji broj prilagođenih stilova za nove ili postojeće EPT module. Takođe možete predložiti svoje stilove kreiranjem issue-a na Drupal.org:
Korak 7. Izvoz konfiguracija za EPT paragrafe i polja
Korak 7. Izvoz konfiguracija za EPT paragrafe i polja
Završili smo dodavanje funkcionalnosti u EPT Countdown. Sada je vreme da izvezemo konfiguracije i pripremimo modul za objavljivanje na Drupal.org.
Sve konfiguracije vezane za EPT Countdown paragraf treba da budu kopirane u fasciklu /ept_countdown/config/install
.
Ako je modul generisan korišćenjem Drush
-a, trebalo bi ponovo da izvezete konfiguracije da biste bili sigurni da su sva podešavanja polja i tipova paragrafa ažurirana.
Nakon toga, možete omogućiti modul na stranici Proširi — /admin/modules
. Sve konfiguracije paragrafa i polja za EPT Countdown biće automatski instalirane iz /config/install
:
Nije potrebno uključivati konfiguracione fajlove language.*
, jer modul Jezici može biti onemogućen na nekim sajtovima.
Obično kopiram sve potrebne YAML fajlove i proveravam da li su smešteni u config/install
:
Pre nego što izvršite commit, obavezno uklonite uuid i hash iz YAML fajlova:
Ako vaš modul zavisi od drugih Drupal modula (na primer, datetime
), obavezno ih navedite kao zavisnosti u .info.yml
fajlu:
/ept_countdown/ept_countdown.info.yml:
dependencies:
- drupal:datetime
Vaš modul je sada spreman za postavljanje i objavljivanje na Drupal.org.
Korak 8. Postavljanje na Drupal.org i testiranje
Korak 8. Postavljanje na Drupal.org i testiranje
Već smo kreirali novi projekat na Drupal.org:
https://www.drupal.org/project/ept_countdown
Glavna grana koja je izabrana je 1.4.x, kako bi se ostalo u skladu sa ostalim modulima u EPT ekosistemu:
Sva izdavanja sada počinju verzijom 1.4.0:
git tag 1.4.0
git push origin 1.4.0
Takođe možete kreirati predizdanje (pre-release) verzije kao što su -alpha
ili -beta
pre objavljivanja stabilne verzije 1.4.0
.
Potrebno je da sačekate 10 dana nakon kreiranja projekta pre nego što modul može biti uključen u program Security Advisory Coverage:
Sada možete testirati novi modul na različitim tipovima sadržaja, proveriti ponašanje FlipDown plugina, podešavanja teme i naslove. Po potrebi, prijaviti greške i objaviti zakrpe.
Korak 9. Dodavanje README.md fajla
Korak 9. Dodavanje README.md fajla
Ako ste generisali EPT modul pomoću Drush-a, README.md
fajl bi već trebalo da bude automatski kreiran.
U svakom slučaju, ne zaboravite da uključite README.md
fajl u svoj modul. Ovo je važan fajl koji sadrži opis modula, zahteve, korake instalacije i smernice za korišćenje. Primer možete pogledati u drugom EPT modulu:
https://www.drupal.org/project/ept_slideshow
Hvala što koristite EPT module! Uvek možete postaviti pitanja ili podeliti ideje: