Am început prin a folosi o interogare grep regresivă a temei pentru a afla cum sunt luate în considerare platformele suportate de baza de cod existentă.
jenkins@efc9c26-01112:~/sites/my_client/web/themes/contrib/drupal8_parallax_theme$ grep linkedin -R .
Se potrivește fișierul binar ./includes/fontawesome/fonts/FontAwesome.otf
Se potrivește fișierul binar ./includes/fontawesome/fonts/fontawesome-webfont.ttf
./includes/fontawesome/css/font-awesome.css:.fa-linkedin-square:before {
./includes/fontawesome/css/font-awesome.css:.fa-linkedin:before {
./templates/layout/page.html.twig: {% if linkedin_url %}
./templates/layout/page.html.twig: <a href="{{ linkedin_url }}" class="linkedin" target="_blank"><i class="fa fa-linkedin"></i>< /a>
./drupal8_parallax_theme.theme: $variables['linkedin_url'] = theme_get_setting('linkedin_url');
./drupal8_parallax_theme.theme: $form['drupal8_parallax_theme_settings']['social_icon']['linkedin_url'] = array(
./drupal8_parallax_theme.theme: '#default_value' => theme_get_setting('linkedin_url'),
./config/install/drupal8_parallax_theme.settings.yml:linkedin_url: „http://www.linkedin.com/company/zymphonies”
Asta a oferit indicii necesare pentru a face inginerie inversă a ceea ce există, astfel încât să pot replica ceea ce trebuie să adaug. De asemenea, dezvăluie ce fișiere trebuie să ating pentru a finaliza treaba.
Mi-am îndreptat atenția către subtema mea în care personalizările mele sunt stocate într-un depozit git, așa că nu trebuie să reproduc aceste modificări la fiecare reconstrucție. Încă nu am stabilit cum să fac ca personalizările mele să înlocuiască tema de bază și am recurs la copierea lor în tema de bază la fiecare upgrade, dar sper destul de curând să obțin o înțelegere mai bună a unui mijloc mai grațios de a obține această lucrare Terminat.
Această lucrare se face pe această cale:
~/sites/my_client/web/themes/contrib/drupal8_parallax_theme_my_client
Suportul pentru youtube a fost ușor:
În dosar: drupal8_parallax_theme_my_client.theme, am adăugat această linie: $variables['youtube_url'] = theme_get_setting('youtube_url');
Apoi adăugați această strofă, adaptată după tema de bază, pentru a fi copiată în fișierul corespunzător din tema de bază, ca parte a drupal8_parallax_theme_form_system_theme_settings_alter() funcţie:
$form['drupal8_parallax_theme_settings']['social_icon']['youtube_url'] = array(
'#type' => 'câmp text',
'#title' => t('Adresa URL YouTube'),
'#default_value' => theme_get_setting('youtube_url'),
);
Aceasta ar trebui să expună o opțiune de configurare la:
admin/appearance/settings/drupal8_parallax_theme_my_client.
În templates/layout/page.html.twig fisier, imediat dupa strofa facebook.
{% if youtube_url %}
<a href="{{ youtube_url }}" class="youtube" target="_blank" ><i class="fa fa-youtube"></i></a>
{% endif %}
Aceasta ar trebui să dezvăluie pictograma configurată în blocul de social media expus în subsol.
Următorul drush cr, configurați adresa URL în interfața cu utilizatorul la calea menționată mai sus și alta drush cr, ar trebui să expună modificările unui utilizator anonim.
Acest lucru funcționează deoarece pictograma youtube este deja acceptată în versiunea implicită a fontAwesome pachet cu tema. Pictograme suplimentare sunt aparent adăugate la pachetul fontAwsome în mod obișnuit. Dar așteptarea ciclului de lansare al echipei fa a fost un neîncepător pentru un client care are nevoie de această funcționalitate acum. Actualizarea pachetului fa în acest moment se pare că implică o taxă de licență plus cheltuielile generale de sortare a modului de automatizare a upgrade-ului în procesul meu de construire.
Așa că l-am sunat pe Adam Muehlhausen, din Indiana, cu care colaboram la cererile de front-end pentru site-ul în curs de dezvoltare. Speram la o conversație telefonică cu el pentru a mă informa cu privire la integrarea acestor modificări în subtema controlată de versiune, pentru a extinde ./includes/fontawesome/css/font-awesome.css fișier inclus ca parte a temei de bază. Ceea ce am primit în schimb a fost un e-mail în care îmi cerea să inspectez rezultatele muncii lui.
Folosim deja un modul care permite stocarea css și js în configurația bazei de date, pentru a fi integrat în construirea paginii după cum era necesar. ( compozitorul necesită „drupal/asset_injector:^2.10” ). Fără acces la backend, Adam a continuat să folosească accesul său interfață existent, instrumentul firebug/inspect-element din browserul său și aproximativ o oră de experimentare pentru a adăuga acest lucru la .css, susținut de pictograme pe care le-a recoltat de pe fiecare site și le-a încărcat. într-un nod publicat, dar deconectat, creat în acest scop.
/* pictogramele sociale nu au font-awesome */
.footer-meniu .fa-gettr {
fundal: url('/sites/default/files/inline-images/gettr.png') center no-repeat;
}
.footer-meniu .fa-gettr {
background-size: conține;
latime: 12px;
înălțime: 12px;
vertical-align: mijloc;
}
.footer-menu .gettr:hover{
-webkit-filtru: inversare (100%) tonuri de gri (100%) luminozitate (50%) sepia (60%) nuanță-rotire (250deg) saturate (700%);
-moz-filter: inversare (100%) tonuri de gri (100%) luminozitate (50%) sepia (60%) nuanță-rotire (250deg) saturate (700%);
filtru: inversare (100%) tonuri de gri (100%) luminozitate (50%) sepia (60%) nuanță-rotire (250deg) saturate (700%);
}
Replicând acest lucru, am reușit să expunem pictograme legate pentru un total de opt platforme de social media, trei acceptate de tema implicită, alta nu, dar totuși susținute de proiectul fontAwesome și alte patru atât de noi încât nu sunt susținute de niciuna.
