Мазмұны
- Қажетті білімHTML, CSS, PHP
- Талап етеді: Drupal 7 жұмыс қондырғысы
- Жоба уақыты: 1 сағат +
Бастапқы файлдарды мына жерден жүктеп алыңыз
Бұл мақала веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал .net журналының 221 санында алғаш пайда болды.
Сонымен, сіз DrupalCon Лондон мен Денверді сағындыңыз ба? Немесе барды және шын мәнінде бұл тақырыптық нәрсе бәрінің айтқанын түсінбеді ме? Бұл оқулық сізді дұрыс жолға бастайды.
Алдымен мен дизайнер емеспін немесе CSS маманы емеспін, сонымен қатар ондай қызығушылық жоқ екенімді жасырғым келеді. Мен Drupal-ды жақсы білемін және сізге Drupal тақырыбын бастаудың ең жақсы әдісін және тақырып аясында медиа-сұраныстарды қалай пайдалану керектігін көрсеткім келеді. Drupal қауымдастығында дәл қазір HTML5, CSS3 және медиа-сұраулар сияқты технологияларды қалай жақсы интеграциялау туралы көп айтылады. Джейк Страун да, Джон Альбин Уилкинс те Лондондағы DrupalCon сессияларында жауап беретін дизайнды қолдануды талқылады.
Медиа сұраулар әрдайым мобильді құрылғыларға арналған сайттар құрудың ең жақсы тәсілі бола бермейді, бірақ олар сіздің сайтыңыздың әртүрлі көріністермен жұмыс істеуінің жақсы әдісін ұсынады. Олар сондай-ақ лак сияқты сыртқы кэшпен жақсы ойнайды. Құрылғыны иіскейтін көптеген шешімдер сайттың дұрыс нұсқасын немесе басқа тақырыпты көрсетеді, нәтижесінде кэштеліп, пайдаланушыға дұрыс нұсқасын көрсетпейді.
Drupal тақырыбын бастау үшін сізге тек тақырыпты және CSS-ті сипаттауға арналған сипаттағы ақпараттық файл қажет. Қалғанын Drupal өзіңіз шешеді. Алайда, егер сіз кез-келген HTML-ді немесе тіпті мазмұнды өңдегіңіз келсе, сіз мұны жасай аласыз - және бұл мақала сізге қалай көрсететінін көрсетеді.
Ақпараттық файлдар
Бірінші қадам - ақпараттық файл жазу. Бұл файл сіздің тақырыбыңыз не екенін және оны қалай пайдалану керектігін білу үшін Drupal-қа қажет барлық ақпаратты сақтайды. Қажетті элементтер аз және көптеген қосымша.
- аты = жауап береді
- сипаттама = Drupal7-де медиа сұрауларды қолдану мысалы
- ядро = 7.х
- стильдер кестесі [барлығы] [] = css / reset.css
- стильдер кестесі [барлығы] [] = css / main.css
- стильдер кестесі [(мин-ені: 480px)] [] = css / 480.css
- стильдер кестесі [(мин-ені: 768px)] [] = css / 768.css
- стильдер кестесі [(мин-ені: 1024px)] [] = css / 1024.css
- стильдер кестесі [(мин-ені: 1280px)] [] = css / 1280.css
Жоғарыда аталған кодты файлға қосуға болады responsive.info. Бұл файлға қалтаға кіру керек болады жауап береді, содан кейін кіруге болады сайттар / барлық / тақырыптар сіздің Drupal 7 қондырғыңыз.
Осы файлдың алғашқы бірнеше жолын түсіну оңай болуы керек: аты бұл сіздің тақырыбыңыздың атауы; сипаттама бұл сіздің тақырыбыңыздың сипаттамасы; және өзек бұл сіздің тақырыбыңыз жазылған Drupal нұсқасы - бұл жағдайда біз Drupal 7 қолданамыз өзек болып табылады 7.х. Екеуі де аты және сипаттама Drupal интерфейсіндегі Тақырыптар бетінде көрсетіледі.
Келесі бірнеше жолдар Drupal-ға сіздің тақырыпыңыз ретінде жүктеуді қалайтын барлық стильдер кестесі. Осы стильдер кестесінің декларациясы PHS псевдо-массивінде орналасқан. Массивтің бірінші кілті - Drupal стилі тегінің медиа элементтері жасайды.Бұл кілт кез-келген медиа сұранысты немесе тақырып үшін пайдаланғыңыз келетін HTML стилінің медиа элементін, мысалы, баспа немесе экранды қамтуы мүмкін. Массивтің екінші кілті бірнеше стиль парағын бір медиа түріне қолдануға мүмкіндік беру үшін бос қалдырылады. Осы стильдер үшін мен Энди Кларктың мобильді телефоннан бастайтын және жұмыс үстелінің толық өлшеміне дейін жұмыс жасайтын ‘320 және одан жоғары’ тәсілін қолдандым.
Ойлаудың бұл тәсілі экранды ұлғайтуға емес, керісінше функционалдылық пен мүмкіндіктерді қосуға назар аударуға мүмкіндік береді. Алғашқы екі стиль кестесі барлық медиа типтерге арналған. Reset.css CSS қалпына келтіруді қосады - менің жағдайымда (және мысал файлдарында) бұл Эрик Мейердікі, бірақ өзіңіздікін пайдалануға қымсынбаңыз.
Main.css «нақты» CSS-тің бастамасы. Мұнда барлық көрнекі терезелер өлшемінде қолданылатын барлық әдепкі CSS бар, сонымен қатар ені 480 пиксельден аз көріністе сайтты пішімдеу. Бұл смартфонның портреттік стильдерін қосуға өте ыңғайлы орын.
Ақпараттық файлдың соңғы төрт жолында медиа сұраныстардың көмегімен төрт CSS файл анықталады. Бұл медиа-сұраулар CSS-ті ландшафтты iPhone өлшеміндегі 480px деңгейіне ауыстыру үшін орнатылған:
768px, портреттік iPad өлшемі:
1,024px, ландшафты iPad өлшемі ...
... және 1,280px, өлшемі жақсы жұмыс үстелінің шолушысы:
Сіз әрі қарай жүріп, ақпараттық файлда анықталған CSS файлдарын жасай аласыз. Мысалда пайдаланылған файлдарға арналған жол OCD үшін CSS қалтасын қолданады. Сондықтан сізге қалта жасау керек болады CSS ішінде сайттар / барлық / тақырыптар / жауап береді содан кейін ақпарат файлында орнатылған файл атауларын пайдаланып, CSS файлдарын жасаңыз.
Эрик Мейердің (немесе сіздің сүйікті) CSS қалпына келтірудің көшірмесін алып, оны салыңыз reset.css. Содан кейін main.css сайтты жобалау үшін CSS қосуды бастаңыз. Drupal сіз үшін HTML-ді әлдеқашан жасап қойыпты, және сіз «жауап беретін» тақырыпты қазір HTML Drupal не құрғанын және сіздің сайтыңыздың ашық түрінде қалай көрінетінін көруге қосуға болады.
Drupal-дің HTML-іне риза емессіз бе? Жақсы, сіз оны өзгерте аласыз. Джен Симмонс сіздің сайтыңызға HTML5 қосуға көмектесу үшін Drupal жасаған HTML-ді қалай өзгерту керектігін талқылайтын 219 шығарылымдағы ‘HTML-ді жеңілдету және жақсарту’ оқулығын тексеріп көр.
Үлгі файлдары
Drupal ішінде көптеген шаблон файлдары бар. Бұлар Drupal негізгі қондырғысымен және ең көп модульдермен жинақталған. Бұл жерде HTML-нің көп бөлігі анықталған және оларды табу оңай, өйткені олардың барлығы кеңейтумен аяқталады tpl.php. Осы шаблон файлдарының барлығын тақырыпта тек сол аттас файлды қосу арқылы жоққа шығаруға болады - мысалы, егер сіз өзіңіздің сайтыңыздағы түйіндер үшін HTML-ді жоққа шығарғыңыз келсе, сіз оны көшіре аласыз node.tpl.php түйін модулінен қосыңыз сайттар / барлық / тақырыптар / жауап береді.
Бетті құру үшін бірнеше шаблондық файлдар қажет. Біріншісі html.tpl.php. Бұл HTML-де денеден тыс барлық нәрсені ұсынады. Содан кейін келеді page.tpl.php, бұл HTML-де дененің ішіндегі барлық нәрсе. Бұл екеуі барлық беттерге жүктелген. Барлық басқа шаблон файлдары сіздің сайтыңыздың қалай жасалатынына байланысты. Егер сізде блоктар болса, ол жүктеледі block.tpl.php солар үшін. Егер сіз түйіндерді толық немесе тизер түрінде көрсетсеңіз, бұл жүктеледі node.tpl.php. Егер сізде көріністер немесе панельдер сияқты модульдер болса, онда осы модульдер жасайтын әр элемент үшін әр түрлі шаблон файлдарының жиынтығы болады.
Үлгі файлдары олардың ішінде қолданылатын PHP айнымалыларына сүйене отырып, қандай мазмұнды көрсету керектігін біледі. Бұл айнымалылар Drupal ядросындағы тақырыптық функциялар мен толықтырылған модульдер арқылы толтырылады. Тақырып функцияларын шаблон файлдары сияқты жою оңай. Бірінші қадам - деп аталатын файлды құру template.php ішінде сайттар / барлық / тақырыптар / жауап береді. Осы PHP шаблонының ішінде сіз кез-келген тақырыптық функцияны қоса аласыз, бірақ функция атауындағы бірінші сөзді тақырып атауына өзгертіңіз, бұл жағдайда ‘жауап береді’.
Мысал ретінде біз пейджер жасау үшін қолданылатын тақырыптық функцияны жоққа шығаруды қарастырамыз. Пейджер сіздің Drupal сайтыңыздың көптеген беттерінде және көріністерінде көп болған кезде кездеседі. Пейджер тек алдыңғы және келесі сілтемелермен өте қарапайым болғанын қалаймыз делік, парақ нөмірлері жоқ. Біз қолданамыз:
- ? php
- responseive_pager функциясы ($ айнымалы) {
- $ tags = $ айнымалылар [’tags’];
- $ element = $ айнымалылар [’element’];
- $ параметрлері = $ айнымалылар [’параметрлер’];
- жаһандық $ pager_total;
- $ li_previous = theme (’pager_previous’, array (’text’ => (isset ($ tags [1))?
- $ тегтер [1]: t (’‹ алдыңғы ’)),’ элемент ’=> $ элемент,’ интервал ’=> 1,’ параметрлер ’=> $ параметрлер));
- $ li_next = theme ('pager_next', array ('text' => (isset ($ tags [3])? $ tags [3]: t ('next ›')), 'element' => $ element, ' интервал '=> 1,' параметрлер '=> $ параметрлер));
- егер ($ pager_total [$ element]> 1) {
- егер ($ li_previous) {
- $ items [] = жиым (
- ’Класс’ => массив (’пейджер-алдыңғы’),
- ’Деректер’ => $ li_previous,
- );
- }
- егер ($ li_next) {
- $ items [] = жиым (
- ’Класс’ => массив (’пейджер-келесі’),
- ’Деректер’ => $ li_next,
- );
- }
- қайтару 'h2>'. t ('Беттер'). ’/ H2>’. тақырып ('item_ list', массив (
- ’Items’ => $ items,
- ’Атрибуттар’ => массив (’класс’ => массив (’пейджер’)),
- ));
- }
- }
Мұны. Қосуға болады template.php тақырыптың файлы. Бұл анықтаманы жоққа шығарады тақырып_пейджері ішіндегі функция пейджер.inc Drupal ядросы. Бұл функция деп аталады жауап беретін_пейджер. Бұл Drupal-да тақырып функциясындағы ‘тақырып’ сөзін тақырып атауына ауыстыру кезінде оны ауыстыру үлгісін көрсетеді template.php. Түпнұсқа функцияларды көшіруге болады, содан кейін қажет болған жағдайда өзгертуге болады. Бұл мысал әдепкі пейджерді ‘бірінші, алдыңғы, 1, 2, 3, 4, 5, келесі, соңғы’ дегеннен ‘алдыңғы, келесі’ деп өзгертеді. Бұл пейджер батырмаларын құру үшін барлық стандартты Drupal кодын пайдаланады, бірақ барлық басқа логикалар жойылды. Пейджерді кез-келген жолмен ұстау үшін оны өзгертуге болады.
JavaScript және jQuery
Көбінесе сайт JavaScript-тен және, нақтырақ айтқанда, jQuery-ден аздап жарқыратуды қажет етеді. Drupal jQuery-мен жеткізіледі, сондықтан оны бүкіл тақырыпта қолдануға болады. JavaScript файлдарын CSS сияқты тақырыпқа ақпараттық файл арқылы қосуға болады.
- сценарийлер [] = sparkle.js
Жоғарыдағы жолды қосуға болады responsive.info файлды қосу үшін sparkle.js тақырып жүктелген кезде. JavaScript үшін Drupal ‘мінез-құлық’ жүйесін пайдаланады, ол JavaScript-ті қосудың бірыңғай механизмін жасау үшін қолданылады, сондықтан парақ жүктелгенде және жаңа мазмұн қосылғанда үнемі қолданылады. Мұның қалай жұмыс істейтініне мысал ретінде сайттың тақырыбына аз мөлшерде jQuery анимациясын қосайық.
- (функция ($) {
- Drupal.behaviors.responsiveAnimation = {
- тіркеу: функция (мәнмәтін, параметрлер) {
- $ (’H1 # сайттың аты’, контекст)
- .hover (function () {
- $ (бұл)
- .animate ({
- 'Margin-left': '10px'
- },
- 'баяу');
- });
- }
- }
- } (jQuery));
Жоғарыда аталған кодты sparkle.js файлға жауап береді және сайт атауына анимациялық эффект қосады. Бұл жерде айта кететін бір жайт, тақырыптың ақпараттық файлына өзгеріс енгізілгенде, ол тақырып қайта қосылмайынша күшіне енбейді, сондықтан сыртқы көрініс бетіне өтіп, оны жасау керек sparkle.js жұмыс істейді. Код jQuery-ді картадан бастайды $: қақтығыстарды болдырмау үшін бұл әдепкі бойынша жасалмайды. Содан кейін функция -ның қасиеті ретінде сақталады Мінез-құлық тақырыпқа және оның функционалдығына қатысты атау берілді. Қалғанын стандартты jQuery-ден таба аласыз.
Егер h1 # сайттың аты үстіне апарылады, сайт атауының сол жағына 10 пиксельді шекара қосу үшін баяу анимация қосылады. Drupal веб-сайтында JavaScript және jQuery пайдалану туралы бірнеше тамаша құжат бар, drupal.org/node/171213. Бұл сізге оның қалай жұмыс істейтіндігі және оны қалай қолдануға болатындығы туралы көбірек түсінік береді.
Біз Drupal тақырыбын жоғары деңгейде қарастырдық; құжаттама тереңірек енеді. Мұнда талқыланған контекст туралы түсінік алу үшін мысалдар файлдарын жүктеп алыңыз. Мен осы мақаланың жауап тақырыбын millwoodonline.com сайтына да орнаттым. Бұл сізге оның қалай көрінетінін және сайттың нақты мазмұнымен жұмыс істеуге мүмкіндік береді.
Сөздер: Тим Миллвуд
Acquia компаниясының клиент кеңесшісі және штаттан тыс веб-әзірлеуші Тим Drupal қауымдастығының белсенді мүшесі.
