Saturs
- Nepieciešamas zināšanas: HTML, CSS, PHP
- Nepieciešams: Drupal 7 darba instalēšana
- Projekta laiks: 1 stunda +
Lejupielādējiet avota failus šeit
Šis raksts pirmo reizi parādījās žurnāla .net 221. numurā - pasaulē visvairāk pārdotajā tīmekļa dizaineru un izstrādātāju žurnālā.
Tātad, jūs nokavējāt DrupalCon London un Denver? Vai arī gāja līdzi un īsti nesaprata, kas ir šī tematiskā lieta, par kuru visi runāja? Nu, šī apmācība palīdzēs jums iet pa pareizo ceļu.
Vispirms es vēlos apskatīt faktu, ka es neesmu dizainers vai CSS eksperts, un man nav intereses arī par to būt. Es diezgan labi pazīstu Drupal un vēlos jums parādīt labāko veidu, kā sākt darbu ar Drupal tēmu, kā arī to, kā tēmā izmantot multivides vaicājumus. Drupal kopienā šobrīd ir daudz runāts par to, kā vislabāk integrēt tādas tehnoloģijas kā HTML5, CSS3 un multivides vaicājumus. Gan Džeiks Strawns, gan Džons Albins Vilkinss savās DrupalCon London sesijās apsprieda adaptīvā dizaina izmantošanu.
Plašsaziņas līdzekļu vaicājumi ne vienmēr ir labākais veids, kā izveidot vietnes mobilajām ierīcēm, taču tie piedāvā labu veidu, kā panākt, lai jūsu vietne darbotos ar dažādiem skatu logiem. Viņi arī spēlē jauki ar ārējo kešatmiņu, piemēram, laku. Daudzi no risinājumiem, kas šņauc ierīci, pēc tam parāda pareizo vietnes versiju vai citu tēmu, galu galā tiek saglabāti kešatmiņā un neparāda lietotājam pareizo versiju.
Lai sāktu Drupal tēmu, viss, kas jums nepieciešams, ir informācijas fails, kas izklāsta un apraksta jūsu tēmu, un CSS. Pārējais Drupals tiks galā ar jums. Tomēr, ja vēlaties rediģēt kādu no HTML vai pat pašu saturu, varat to darīt brīvi - un šis raksts jums parādīs, kā to izdarīt.
Info faili
Pirmais solis ir informācijas faila uzrakstīšana. Šajā failā tiek glabāta visa informācija, kas Drupal nepieciešama, lai uzzinātu, kāda ir jūsu tēma un kā to izmantot. Nepieciešamo elementu ir maz un daudz izvēles.
- nosaukums = atsaucīgs
- description = Mediju vaicājumu izmantošanas piemērs Drupal7
- kodols = 7.x
- stila lapas [visas] [] = css / reset.css
- stila lapas [visas] [] = css / main.css
- stila lapas [(min-width: 480px)] [] = css / 480.css
- stila lapas [(min-width: 768px)] [] = css / 768.css
- stila lapas [(min-width: 1024px)] [] = css / 1024.css
- stila lapas [(min-width: 1280px)] [] = css / 1280.css
Iepriekš minēto kodu var pievienot failam ar nosaukumu responsive.info. Šim failam būs jāiet mapē ar nosaukumu atsaucīgs, kurā pēc tam var iedziļināties vietnes / visas / tēmas jūsu Drupal 7 instalācijas.
Pirmām šī faila rindām jābūt viegli saprotamām: nosaukums ir jūsu tēmas nosaukums; apraksts ir jūsu tēmas apraksts; un kodols ir Drupal versija, kurai jūsu motīvs ir rakstīts - tāpēc šajā gadījumā mēs izmantojam Drupal 7 kodols ir 7.x. Abi nosaukums un apraksts tiks parādīti Drupal saskarnes lapā Motīvi.
Nākamās pāris rindas ir visas stila lapas, kuras Drupal vēlaties ielādēt kā daļu no jūsu motīva. Šo stila lapu deklarācija ir pseido-PHP masīvā. Masīva pirmā atslēga ir Drupal ģenerētā stila taga multivides elementi.Šajā atslēgā var būt jebkurš multivides vaicājums vai HTML stila tagu multivides elements, kuru vēlaties izmantot savai tēmai, piemēram, druka vai ekrāns. Masīva otrais taustiņš tiek atstāts tukšs, lai atļautu vairākām stila lapām piemērot vienu multivides tipu. Šīm stila lapām es izmantoju Endija Klārka pieeju “320 un vairāk”, sākot ar mobilo un pilnā darbvirsmas lielumā.
Šis domāšanas veids ļauj koncentrēties uz funkcionalitātes un funkciju pievienošanu, kad ekrāns kļūst lielāks, nevis atņemt tos. Pirmās divas stila lapas ir paredzētas visiem apdrukājamo materiālu veidiem. Reset.css ietver CSS atiestatīšanu - manā gadījumā (un piemēru failos) tas ir Ērika Meijera, taču droši izmantojiet savu.
Main.css ir “īstās” CSS sākums. Tam ir visa noklusējuma CSS, kas tiks izmantota visos skata loga izmēros, kā arī vietnes formatējums, ja to redz skata portā, kura platums ir mazāks par 480 pikseļiem. Šī ir ideāla vieta viedtālruņu stilu pievienošanai.
Informācijas faila pēdējās četrās rindiņās ir noteikti četri CSS faili, izmantojot multivides vaicājumus. Šie multivides vaicājumi ir iestatīti, lai pārslēgtu CSS 480 pikseļos, kas ir iPhone ainavas lielums:
768 pikseļi, portreta iPad izmērs:
1024 pikseļi, ainavas iPad izmērs ...
... un 1280 pikseļi, labi izmērītas darbvirsmas pārlūkprogrammas lielumā:
Tagad varat turpināt un izveidot CSS failus, kas noteikti informācijas failā. Piemērā izmantoto failu ceļš OCD labad izmanto CSS mapi. Tāpēc jums būs jāizveido mape ar nosaukumu css ietvaros vietnes / visas / tēmas / atsaucīgi tad ģenerējiet tur esošos CSS failus, izmantojot informācijas failā iestatītos failu nosaukumus.
Paņemiet Ērika Meijera (vai iecienītākās) CSS atiestatīšanas kopiju un ievietojiet to reset.css. Tad iekšā main.css sāciet pievienot savu CSS vietnes noformēšanai. Drupal jau ir izveidojis HTML kodu jums, un jūs pat tagad varat iespējot tēmu ‘Responsive’, lai apskatītu, ko HTML Drupal ir izveidojis, un lai redzētu, kā jūsu vietne izskatās kailajā formā.
Vai neesat apmierināts ar Drupal HTML? Nu, tas ir labi - jūs to varat mainīt. Apskatiet 219. izdevuma “Vienkāršojiet un uzlabojiet savu HTML” apmācību, kurā Jens Simmons apsprieda, kā mainīt Drupal ģenerēto HTML, lai palīdzētu jūsu vietnei pievienot HTML5.
Veidņu faili
Drupal ir daudz veidņu failu. Tie ir komplektā ar galveno Drupal instalāciju un lielāko daļu pievienoto moduļu. Šeit ir definēta lielākā daļa HTML, un tos ir viegli pamanīt, jo tie visi beidzas ar paplašinājumu tpl.php. Visus šos veidņu failus jūsu motīvā var ignorēt, vienkārši pievienojot tāda paša nosaukuma failu - piemēram, ja vēlaties ignorēt vietnes mezglu HTML, varat kopēt node.tpl.php no mezgla moduļa un pievienojiet to vietnes / visas / tēmas / atsaucīgi.
Lai izveidotu lapu, nepieciešami vairāki veidņu faili. Pirmais ir html.tpl.php. Šajā HTML satur visu, kas atrodas ārpus ķermeņa. Tad nāk page.tpl.php, kas ir viss ķermeņa iekšpusē HTML. Šie divi tiek ielādēti visām lapām. Visi pārējie veidņu faili ir atkarīgi no tā, kā jūsu vietne tiek veidota. Ja jums ir bloki, tas tiks ielādēts block.tpl.php Priekš tiem. Ja jūs parādīsit mezglus pilnā vai teaser formātā, tas tiks ielādēts node.tpl.php. Tad, ja esat pievienojis tādus moduļus kā skati vai paneļi, katram elementam, kuru ģenerē šie moduļi, būs vesels dažādu veidņu failu komplekts.
Veidņu faili zina, kādu saturu parādīt, pamatojoties uz tajos izmantotajiem PHP mainīgajiem. Šie mainīgie tiek aizpildīti, izmantojot tēmas funkcijas Drupal kodolā un veicinātajos moduļos. Tēmas funkcijas ir tikpat viegli ignorēt kā veidņu faili. Pirmais solis ir ģenerēt failu ar nosaukumu template.php ietvaros vietnes / visas / tēmas / atsaucīgi. Šajā veidnes PHP failā varat pievienot jebkuru motīva funkciju, bet mainiet pirmo vārdu funkcijas nosaukumā uz motīva nosaukumu, šajā gadījumā ‘reaģējošu’.
Kā piemēru aplūkosim motīvu funkcijas ignorēšanu, kas tiek izmantota peidžera ģenerēšanai. Peidžeris ir atrodams daudzās jūsu Drupal vietnes lapās un skatījumos, kad jums ir daudz satura. Pieņemsim, ka mēs vēlējāmies, lai peidžeris būtu ļoti vienkāršs tikai ar iepriekšējām un nākamajām saitēm, bez lapu numuriem. Mēs izmantotu:
- ? php
- funkcija responsive_pager (mainīgie $) {
- $ tags = $ mainīgie [’tags’];
- $ elements = $ mainīgie [’elements’];
- $ parametri = $ mainīgie [’parametri’];
- globālā $ pager_total;
- $ li_previous = theme (’pager_previous’, masīvs (’text’ => (isset ($ tags [1]))?
- $ tags [1]: t (’‹ iepriekšējais ’)),’ elements ’=> $ elements,’ intervāls ’=> 1,’ parametri ’=> $ parametri));
- $ li_next = theme ('pager_next', masīvs ('text' => (isset ($ tags [3])? $ tags [3]: t ('next ›')), 'element' => $ element, ' intervāls '=> 1,' parametri '=> $ parametri));
- if ($ pager_total [$ element]> 1) {
- ja ($ li_previous) {
- $ vienumi [] = masīvs (
- ’Class’ => masīvs (’pager-previous’),
- ’Dati’ => $ li_previous,
- );
- }
- ja ($ li_next) {
- $ vienumi [] = masīvs (
- ’Class’ => masīvs (’pager-next’),
- ’Dati’ => $ li_next,
- );
- }
- atgriešanās ’h2>’. t (‘Lapas’). ’/ H2>’. motīvs (‘item_ list’, masīvs (
- ’Preces’ => $ preces,
- ’Atribūti’ => masīvs (’klase’ => masīvs (’peidžeris’)),
- ));
- }
- }
To var pievienot template.php tēmas fails. Tas ignorēs theme_pager funkcijas ietvaros peidžeris.inc no Drupal kodola. Šo funkciju sauc responsive_pager. Tas parāda Drupal modeli, kā tēmas funkcijā vārds “tēma” tiek mainīts uz tēmas nosaukumu, kad to aizstāj ar template.php. Sākotnējās motīva funkcijas var nokopēt, pēc tam mainīt pēc nepieciešamības. Šis piemērs maina noklusējuma peidžeri no “pirmais, iepriekšējais, 1, 2, 3, 4, 5, nākamais, pēdējais” uz pamata “iepriekšējais, nākamais”. Lai izmantotu šīs peidžera pogas, tas izmanto visu noklusējuma Drupal kodu, taču tikko ir noņemta visa pārējā loģika. To var mainīt, lai peidžeris darbotos jebkurā nepieciešamajā veidā.
JavaScript un jQuery
Bieži vien vietnei ir nepieciešama neliela dzirkstele no JavaScript un, konkrētāk, no jQuery. Drupal piegādā ar jQuery, tāpēc to var izmantot visā jūsu tēmā. JavaScript failus var pievienot jūsu motīvam, izmantojot informācijas failu, tāpat kā CSS.
- skripti [] = sparkle.js
Iepriekš redzamo rindu var pievienot responsive.info lai iekļautu failu sparkle.js kad tēma ir ielādēta. JavaScript lietošanai Drupal izmanto ‘Behaviors’ sistēmu, kas tiek izmantota, lai izveidotu vienotu mehānismu JavaScript pievienošanai, un tāpēc to konsekventi lieto, kad tiek ielādēta lapa un pievienots jauns saturs. Kā piemēru tam, kā tas darbojas, vietnes nosaukumam pievienosim nelielu daudzumu jQuery animācijas.
- (funkcija ($) {
- Drupal.behaviors.responsiveAnimation = {
- pievienot: funkcija (konteksts, iestatījumi) {
- $ (’H1 # site-name’, konteksts)
- .hover (funkcija () {
- $ (šī)
- . dzīvs ({
- “Margin-left”: “10 pikseļi”
- },
- 'lēns');
- });
- }
- }
- } (jQuery));
Iepriekš minēto kodu var pievienot sparkle.js failu adaptīvajā motīvā un vietnes nosaukumam pievieno animācijas efektu, kad tas ir novietots virs kursora. Šeit jāatzīmē, ka, veicot izmaiņas motīva informācijas failā, tās stāsies spēkā tikai tad, kad motīvs būs atkārtoti iespējots, tāpēc jums būs jādodas uz izskata lapu un jādara tas pirms sparkle.js strādās. Kods sākas, kartējot jQuery uz $: lai izvairītos no konfliktiem, tas netiek darīts pēc noklusējuma. Pēc tam funkcija tiek saglabāta kā Drupal.uzvedība un dots nosaukums, kas attiecas uz tēmu un tās funkcionalitāti. Pārējais ir tas, ko jūs atradīsit standarta jQuery.
Ja h1 # vietnes nosaukums ir novietots virs kursora, tiek pievienota lēna animācija, lai vietnes nosaukuma kreisajā pusē pievienotu 10 pikseļu rezervi. Drupal vietnē drupal.org/node/171213 ir pieejama lieliska dokumentācija par JavaScript un jQuery lietošanu. Tas ļaus jums vairāk ieskatīties, kā tas darbojas un kā to var izmantot.
Mēs esam izskatījuši Drupal tēmu augstā līmenī; dokumentācija iedziļinās dziļāk. Lai gūtu priekšstatu par šeit apspriestā kontekstu, lejupielādējiet piemēru failus. Es arī esmu instalējis atsaucīgo motīvu no šī raksta vietnē millwoodonline.com. Tas ļaus jums redzēt, kā tas izskatās un darbojas ar reālu vietnes saturu.
Vārdi: Tims Millvuds
Tims, kurš ir Acquia klientu konsultants un ārštata tīmekļa izstrādātājs, ir aktīvs Drupal kopienas loceklis.
