Tartalom
- Szükség van tudásra: HTML, CSS, PHP
- Igényel: A Drupal 7 működő telepítése
- Projekt idő: 1 óra +
Töltse le a forrásfájlokat innen
Ez a cikk először a .net magazin 221. számában jelent meg - ez a világ legkeresettebb webes tervezői és fejlesztői magazinja.
Szóval hiányzott a DrupalCon London és a Denver? Vagy ment, és nem igazán értette, mi ez a tematikus dolog, amiről mindenki beszélt? Nos, ez a bemutató a helyes úton halad.
Először szeretném kitérni arra a tényre, hogy nem vagyok tervező vagy CSS-szakértő, és nem is érdekelt az. Nagyon jól ismerem a Drupalt, és szeretném megmutatni, hogyan lehet a legjobban kezdeni a Drupal témát, és hogyan lehet kihasználni a témán belüli média lekérdezéseket. A Drupal közösségben sok szó esik arról, hogy miként lehet a legjobban integrálni az olyan technológiákat, mint a HTML5, a CSS3 és a média lekérdezések. Jake Strawn és John Albin Wilkins egyaránt megvitatták az adaptív tervezés alkalmazását a DrupalCon London ülésén.
A média lekérdezések nem mindig a legjobb módja a webhelyek mobileszközökhöz való létrehozásának, de jó módot kínálnak arra, hogy webhelyét különböző nézetablakokkal működtesse. Jól játszanak a külső gyorsítótárakkal is, mint például a Lakk. Sok olyan megoldás, amely az eszközt szimatolja, majd megjeleníti a webhely helyes verzióját vagy egy másik témát, végül gyorsítótárba kerül, és nem a megfelelő verziót jeleníti meg a felhasználó számára.
A Drupal témakörének megkezdéséhez csak egy információs fájlra van szükség, amely felvázolja és leírja a témát, valamint a CSS-t. A többit Drupal fogja kezelni. Ha azonban a HTML valamelyikét, vagy akár magát a tartalmat is szerkeszteni szeretné, akkor ezt szabadon megteheti - és ez a cikk megmutatja, hogyan.
Információs fájlok
Az első lépés egy információs fájl írása. Ez a fájl tárolja az összes olyan információt, amelyre a Drupalnak szüksége van ahhoz, hogy megtudja, mi a témája és hogyan kell használni. Kevés a kötelező és sok választható elem.
- név = érzékeny
- description = Példa a Media Queries használatára a Drupal7-ben
- mag = 7.x
- stíluslapok [összes] [] = css / reset.css
- stíluslapok [összes] [] = css / main.css
- stíluslapok [(min-width: 480px)] [] = css / 480.css
- stíluslapok [(min-width: 768px)] [] = css / 768.css
- stíluslapok [(min-szélesség: 1024px)] [] = css / 1024.css
- stíluslapok [(min-szélesség: 1280px)] [] = css / 1280.css
A fenti kód hozzáadható egy nevű fájlhoz responsive.info. Ennek a fájlnak egy nevű mappába kell kerülnie fogékony, amely aztán bemehet sites / all / themes a Drupal 7 telepítésének.
A fájl első néhány sorának könnyen érthetőnek kell lennie: név a témád neve; leírás a témád leírása; és mag a Drupal verziója, amelyhez a témája íródott - ebben az esetben ezért a Drupal 7-et használjuk mag van 7.x. Mindkét név és leírás a Drupal felület Témák oldalán jelenik meg.
A következő néhány sor az összes stíluslap, amelyet a Drupalnak a témája részeként szeretne betölteni. Ezen stíluslapok deklarálása ál-PHP tömbben történik. A tömb első kulcsa a Drupal által létrehozandó stíluscímke médiaelemei.Ez a kulcs tartalmazhat bármilyen média lekérdezést vagy HTML stílusú címke média elemet, amelyet használni szeretne a témához, például nyomtatást vagy képernyőt. A tömb második kulcsa üresen marad, így több stíluslap alkalmazható egyetlen médiatípusra. Ezekhez a stíluslapokhoz Andy Clarke „320 és feljebb” megközelítését választottam, kezdve a mobilral és a teljes asztali méretig.
Ez a gondolkodásmód lehetővé teszi, hogy a funkcionalitás és a szolgáltatások hozzáadására összpontosítson, amikor a képernyő nagyobb lesz, ahelyett, hogy elvenné őket. Az első két stíluslap minden médiatípusra vonatkozik. Reset.css tartalmaz egy CSS-visszaállítást - esetemben (és a példafájlokban) ez Eric Meyeré, de nyugodtan használja a sajátját.
Main.css az „igazi” CSS kezdete. Ehhez tartozik az összes alapértelmezett CSS, amelyet minden nézetablak méreténél használnak, valamint a webhely formázása, ha 480 képpontnál kisebb nézetablakban látható. Ez az ideális hely portré okostelefon stílusok hozzáadásához.
Az információs fájl utolsó négy sora négy CSS fájlt határoz meg média lekérdezések segítségével. Ezek a média lekérdezések úgy vannak beállítva, hogy a CSS-t 480 képpontos felbontáson állítsák át, akkora méretűek, mint egy fekvő iPhone:
768 képpont, álló iPad méretű:
1024 képpont, a fekvő iPad mérete ...
... és 1280 képpont méretű, egy nagy méretű asztali böngésző mérete:
Most folytathatja az információs fájlban definiált CSS-fájlok létrehozását. A példában használt fájlok elérési útja CSS mappát használ az OCD érdekében. Tehát létre kell hoznia egy nevű mappát css belül sites / all / themes / responsive majd generálja az ott található CSS fájlokat az információs fájlban megadott fájlnevek felhasználásával.
Fogja meg Eric Meyer (vagy kedvenc) CSS-visszaállításának egy példányát, és tegye be reset.css. Aztán be main.css kezdje el hozzáadni a CSS-t a webhely tervezéséhez. A Drupal már létrehozta a HTML-t az Ön számára, és most már engedélyezheti az ‘Reagáló’ témát is, hogy megnézhesse, mit hozott létre a HTML Drupal, és megnézhesse, hogyan néz ki webhelye meztelen formában.
Nem elégedett a Drupal HTML-jével? Nos, ez rendben van - ezen változtathat. Nézze meg a „HTML-kód egyszerűsítése és fejlesztése” című oktatóanyagot a 219. számban, ahol Jen Simmons megvitatta, hogyan lehet megváltoztatni a Drupal által létrehozott HTML-kódot, hogy elősegítse a HTML5 hozzáadását webhelyéhez.
Sablon fájlok
A Drupal-on belül sok sablonfájl található. Ezek a Drupal központi telepítésével és a legtöbb hozzáadott modullal együtt vannak. Itt határozható meg a HTML nagy része, és könnyen észrevehetőek, mert mind a kiterjesztéssel végződnek tpl.php. Mindezek a sablonfájlok felülírhatók a témában, csak egy azonos nevű fájl hozzáadásával - például ha felül kívánja írni a webhely csomópontjainak HTML-jét, akkor másolhatja node.tpl.php a csomópont modulból, és adja hozzá sites / all / themes / responsive.
Az oldal felépítéséhez több sablonfájl szükséges. Az első az html.tpl.php. Ez a testen kívül mindent tartalmaz a HTML-ben. Aztán jön page.tpl.php, ami minden a test belsejében található a HTML-ben. Ez a kettő minden oldalra be van töltve. Az összes többi sablonfájl a webhely felépítésétől függ. Ha vannak blokkjai, akkor betöltődik block.tpl.php azoknak. Ha csomópontokat jelenít meg, teljes vagy előzetes formátumban, akkor ez betöltődik node.tpl.php. Ezután, ha olyan modulokat adott hozzá, mint nézetek vagy panelek, akkor minden egyes elemhez külön sablonfájlok egész sora lesz, amelyeket ezek a modulok létrehoznak.
A sablonfájlok a bennük használt PHP-változók alapján tudják, milyen tartalmat jelenítsenek meg. Ezek a változók a Drupal core és a közreműködő modulok témafüggvényein keresztül kerülnek feltöltésre. A témafunkciók ugyanolyan egyszerűen felülírhatók, mint a sablonfájlok. Az első lépés egy fájl nevű fájl létrehozása template.php belül sites / all / themes / responsive. Ezen a PHP sablonon belül tetszőleges témafüggvényt felvehet, de a függvény nevében az első szót megváltoztathatja a téma nevére, ebben az esetben az 'adaptív' szóra.
Példaként megvizsgáljuk a témafunkció felülbírálását, amelyet a személyhívó létrehozására használunk. A személyhívó számos oldalon és nézetben található meg a Drupal webhelyén, ha sok tartalma van. Tegyük fel, hogy azt akartuk, hogy a személyhívó csak nagyon egyszerű legyen, csak az előző és a következő linkekkel, nincsenek oldalszámok. Használnánk:
- ? php
- function responsive_pager ($ változók) {
- $ tags = $ változók [’tags’];
- $ elem = $ változók [’elem’];
- $ paraméterek = $ változók [’paraméterek’];
- globális $ pager_total;
- $ li_previous = theme (’pager_previous’, tömb (’text’ => (isset ($ tags [1])?
- $ tagek [1]: t (’‹ előző ’)),’ elem ’=> $ elem,’ intervallum ’=> 1,’ paraméterek ’=> $ paraméterek));
- $ li_next = theme ('pager_next', tömb ('text' => (isset ($ tags [3])? $ tags [3]: t ('next ›')), 'element' => $ element, ' intervallum '=> 1,' paraméterek '=> $ paraméterek));
- if ($ pager_total [$ element]> 1) {
- if ($ li_previous) {
- $ items [] = tömb (
- ’Class’ => tömb (’pager-előző’),
- ’Adatok’ => $ li_previous,
- );
- }
- if ($ li_next) {
- $ items [] = tömb (
- ’Class’ => tömb (’pager-next’),
- ’Adatok’ => $ li_next,
- );
- }
- visszatérés ’h2>’. t (’Oldalak’). ’/ H2>’. téma (’item_ list’, tömb (
- ’Tételek’ => $ tételek,
- ’Attribútumok’ => tömb (’osztály’ => tömb (’személyhívó’)),
- ));
- }
- }
Ez hozzáadható a template.php fájl a téma. Ez felül fogja írni a theme_pager belül működik pager.inc a Drupal mag. Ezt a függvényt hívják responsive_pager. Ez azt mutatja, hogy a Drupal azt a mintát választja, amikor a témafüggvényben a „téma” szót a template.php. Az eredeti témafunkciók másolhatók, majd szükség szerint módosíthatók. Ez a példa megváltoztatja az alapértelmezett személyhívót „első, előző, 1, 2, 3, 4, 5, következő, utolsó” helyett egy „előző, következő” értékre. Az összes alapértelmezett Drupal kódot használja ezeknek a személyhívó gomboknak az előállításához, de a többi logikát éppen eltávolította. Ez megváltoztatható, hogy a személyhívó a kívánt módon viselkedjen.
JavaScript és jQuery
Gyakran egy webhelynek szüksége van egy kis csillogásra a JavaScript-től, pontosabban a jQuery-től. A Drupal a jQuery szoftverrel szállítja, így az egész témában használható. JavaScript-fájlokat hozzá lehet adni a témához az információfájlon keresztül, csakúgy, mint a CSS-t.
- szkriptek [] = sparkle.js
A fenti sor hozzáadható responsive.info hogy belefoglalja a fájlt sparkle.js amikor a téma betöltődik. A JavaScript-hez a Drupal ’Behaviors’ rendszert használ, amelyet egyetlen mechanizmus létrehozására használnak a JavaScript csatolásához, és ezért következetesen alkalmazzák, amikor egy oldalt betöltenek és új tartalmat adnak hozzá. Például ennek működésére adjunk hozzá egy kis mennyiségű jQuery animációt a webhely címéhez.
- (függvény ($) {
- Drupal.behaviors.responsiveAnimation = {
- csatol: függvény (kontextus, beállítások) {
- $ (’H1 # site-name’, kontextus)
- .hover (function () {
- $ (ez)
- .élő({
- ’Margin-left’: ’10px’
- },
- 'lassú');
- });
- }
- }
- } (jQuery));
A fenti kód hozzáadható a sparkle.js fájlt az adaptív témában, és animációs hatást ad a webhely nevéhez, amikor az egérrel lebeg. Egy dolgot érdemes megjegyezni, hogy amikor a téma információs fájlján változtatásokat hajtanak végre, az csak a téma újbóli engedélyezésével lép érvénybe, ezért a megjelenési oldalra kell lépnie, és ezt meg kell tennie korábban sparkle.js működni fog. A kód a jQuery és a $: a konfliktusok elkerülése érdekében ez alapértelmezés szerint nem történik meg. A függvény ezután a Drupal.viselkedések és megadta a témához és annak funkcionalitásához kapcsolódó nevet. A többit megtalálja a szokásos jQuery-ben.
Ha h1 # site-name az egér fölé viszi, lassú animációt ad hozzá, hogy 10 pixeles margót adjon a webhely nevétől balra. Remek dokumentáció található a JavaScript és a jQuery használatáról a Drupal webhelyén, a drupal.org/node/171213 címen. Ez több betekintést nyújt a működésébe és felhasználhatóságába.
Magas szinten ismertettük a Drupal témáját; a dokumentáció mélyebbre megy. Ha képet szeretne kapni az itt tárgyaltak kontextusáról, töltse le a példafájlokat. A cikk adaptív témáját a millwoodonline.com webhelyre is telepítettem. Ez lehetővé teszi, hogy lássa, hogyan néz ki és hogyan működik a valódi webhelytartalom.
Szavak: Tim Millwood
Tim az Acquia ügyféltanácsadója és szabadúszó webfejlesztő, a Drupal közösség aktív tagja.
