Video lesson sa Paglikha ng HTML template sa 1C Bitrix, ito ang ikaapat na video sa serye ng mga aralin na "Pagsasama ng template sa 1C Bitrix system".

Sa video tatalakayin namin sa iyo:

• Paano ilipat ang isang tapos na layout ng template ng HTML sa Bitrix
• Ikonekta natin ang mga script at ilipat ang istraktura ng site sa Bitrix
• Ikonekta natin ang mga file ng wika at tingnan kung paano ito gumagana
• Tingnan natin ang mga karaniwang pagkakamali

Lumikha ng isang template sa pamamagitan ng seksyong administratibo

Hindi namin gagamitin ang kasalukuyang naka-install na template mula sa marketplace, ngunit gagawa kami ng sarili namin mula sa simula gamit ang halimbawa ng kung ano ang mayroon kami ngayon. Upang gawin ito, pumunta sa administratibong bahagi ng site, Mga Setting, Mga Setting ng Produkto, piliin ang Mga Template ng Site. Magdagdag ng bagong template.

Itinakda namin ang mga pangunahing setting ng template, ipasok ang ID na "lendtv", ipasok ang pangalan na "Landing" sa patlang, ipasok ang "Aming landing template" sa paglalarawan, tukuyin ang order na "1", iwanan ang Uri bilang default na "Site Template”. Pababa na tayo.

Sa field na ito, kailangan naming ipasok ang code ng aming HTML page, na paghihiwalayin ng macro #WORK_AREA# , ang itaas na bahagi ay mapupunta sa header.php , at ang ibabang bahagi pagkatapos ng macro ay mapupunta sa file footer. php .

Buksan ang aming HTML template layout page sa editor, piliin ang code, kopyahin at i-paste ito sa aming form. Napagkasunduan namin na ilalagay namin ang lahat ng gumaganang bloke sa header. Upang gawin ito, bumaba hanggang sa magsara ang seksyon. Ilagay ang cursor sa pagitan ng seksyon at footer, i-click ang #WORK_AREA#, may naidagdag na marker.

Sa pamamagitan ng pagpasok ng marker na ito, awtomatikong gagawin ng Bitrix system ang mga file na header.php at footer.php kasama ang aming code na nakalagay sa mga ito. Hinahayaan naming walang laman ang tab na "Mga Estilo ng Site", kopyahin ang aming pangunahing code ng istilo mula sa style.css file sa "Mga Estilo ng Template", at i-save.

Buksan ang PhpShtorm, pumunta sa folder kasama ang aming mga template at magsagawa ng pag-synchronize upang ang mga bagong likhang file ay maipakita sa aming editor. Binuksan namin ang folder gamit ang aming template at sa loob nito nakikita namin ang isang bilang ng mga nilikha na file ng system mismo, kasama ang code na naipamahagi at napunan na. Ang kailangan lang nating gawin ay maglipat ng mga karagdagang file at script para sa kinakailangang gawain ng template. Upang gawin ito, kopyahin lang namin ang mga ito sa aming direktoryo ng template.

Isulat natin ang verification code

Halimbawa, buksan natin ang aming naka-install na template mula sa marketplace at kopyahin ang code upang suriin ang pare-parehong "B_PROLOG_INCLUDED", ipinagbabawal ng pare-parehong ito ang paglulunsad ng file na ito nang hindi ikinokonekta ang Bitrix core.

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); // pagsusuri

Pag-uugnay ng pagsasalin

Ikinonekta namin ang mga file na Lang na responsable sa pagsasalin ng aming template. Idikit ang code na ito.

Isama angTemplateLangFile(__FILE__); //

pagsasalin ng file

Halimbawa:

Pagkonekta ng mga script

Pagkatapos, upang maipakita ang aming meta data, ginagamit namin ang pamamaraang "ShowHead", ipapakita nito ang meta data ng aming page at ikinokonekta rin ang mga script mula sa template. Palitan ito ng method call. $APPLICATION->ShowHead();

//

pagkonekta ng mga script mula sa pahina ng template

Pamagat ng koneksyon Ang susunod na hakbang ay ikonekta ang pamagat gamit ang paraan ng "ShowTitle".

$APPLICATION->ShowTitle();

//

output ng pamagat

2017 .

Pagkonekta ng mga direktoryo ng file

Pagkatapos ay ipinapahiwatig namin ang landas sa aming mga file gamit ang pare-parehong "SITE_TEMPLATE_PATH", makakatulong ito upang matukoy ang direktoryo kung saan matatagpuan ang mga ito.

// path sa direktoryo ng template (siguraduhing maglagay ng flash sa dulo).

Kumuha kami ng mga parirala sa wika

Ngayon ay kunin natin ang mga file ng wika, na ikokonekta natin nang walang mga bahagi, iyon ay, direkta sa pamamagitan ng template. Upang gawin ito, gagawa kami ng naaangkop na direktoryo kung saan sila iimbak. Lumikha ng isang folder lang, naglalaman ito ng mga subdirectory ru at en.

Buksan ang direktoryo ng ru at lumikha ng isang file dito kung saan kami ay kukuha ng mga parirala ng wika, sumulat ng header.php. Sa pangunahing template, tinitingnan namin kung ano ang kailangan naming ilagay sa mga file na Lang. Kunin natin ang mga header ng ating mga block mula sa header.php ng ​​template, open leng , bumuo ng array gamit ang ating unang pariralang "Kasalukuyan kaming gumagawa ng isang kamangha-manghang proyekto" na may key na "WORKING_PROJECT", at sa header.php ay isusulat namin ang function na “GetMessage” gamit ang aming key sa halip na ang pariralang "WORKING_PROJECT" .

Pagkatapos ay papalitan namin ang pamagat na "Contact", lumikha ng isang array na may key na "CONTACT", at baguhin ang pamagat sa isang function gamit ang aming key.

Pagdaragdag ng mga parirala sa footer.php

Pumunta tayo sa footer, dito maaari mong ipakita ang block na ito bilang ay sa pamamagitan ng kasama na lugar, ngunit para sa kapakanan ng halimbawa, ilagay natin ang mga pariralang ito sa Leng. Pumunta tayo sa direktoryo ng ru at lumikha ng isang bagong file na may pangalan kung saan kukuha tayo ng mga parirala, sumulat ng footer.php. Sa loob nito, lumikha kami ng isang array gamit ang aming pariralang "DALVEBSTROY" na may key na "COPY_DWS" at ipasok ang function na "GetMessage" sa pangunahing file kasama ang aming key parameter.

Kinokopya namin ang array mula sa header file, pumunta sa aming en directory, gumawa ng file header.php, i-paste ang array at i-paste ang mga isinaling parirala.

Gawin din natin ang parehong sa footer, kopyahin ang array, pumunta sa en directory, at lumikha ng isang file footer.php kung saan ilalagay natin ang ating array at isinasalin ang mga parirala.

Paganahin natin ang template sa mga setting ng site

Pumunta tayo sa seksyong administratibo, Mga Setting ng Produkto, Mga Site, Listahan ng mga Site, buksan ang kasalukuyang site, bumaba sa pinakailalim at sa Mga Template ay ipahiwatig ang aming nilikha na template na "Landing", i-save.

Lumipat tayo sa visual na bahagi at tingnan kung ano ang nakuha natin.

Na-load ang template, ngunit nawawala ang pangunahing larawan. Malamang na ito ay dahil sa ang katunayan na ang styles file ay dating matatagpuan sa styles folder, ngunit inilipat namin ito sa isang mas mataas na direktoryo sa template_styles.css file, at sa gayon ay binabago namin ang landas patungo dito, at para sa imahe na magpakita ng normal, kami kailangang ayusin ang file na ito.

Bumaba tayo at tingnan na ang copyright ay hindi ipinapakita sa footer, at sinadya ko ito upang magpakita ng isang karaniwang error.

Ayusin natin ito, pumunta sa aming template, buksan ang template_styles.css , hanapin ang code upang ipakita ang larawan, alisin [../] , dahil ang kasalukuyang file ay matatagpuan sa pangunahing direktoryo ng template. Mag-save tayo, pumunta sa site at tingnan ang display. Nakita namin na lumitaw ang isang icon ng pag-load at isang slider na imahe.

Nire-refresh namin ang pangunahing pahina, nag-scroll pababa, at lalabas na maayos ang lahat. Suriin natin ang Ingles na bersyon ng aming mga heading upang gawin ito, baguhin ang wika sa Ingles sa mga setting ng template at i-save. Pumunta kami sa visual na bahagi at lahat ng mga header na inilagay namin nang hiwalay sa mga mahabang file ay nagbago.

Upang ibuod:

Kapag gumagawa ng footer, kung kailangan mong i-extract ang mga parirala mula dito sa haba, huwag kalimutang suriin ang kernel connection at ikonekta ang mga file ng wika.

Kung babaguhin namin ang path ng style.css file mula sa pangunahing template, babaguhin namin ang path na ito sa mismong code, dahil ang mga larawan ay matatagpuan sa ibang direktoryo na nauugnay sa file na ito.

Kapag tinukoy ang landas gamit ang pare-parehong "SITE_TEMPLATE_PATH", huwag kalimutang maglagay ng flush sa dulo nito.

Iyon lang para sa aralin Tinatapos ko na ang pag-install ng HTML, sa mga sumusunod na video ay magpapakita kami ng ilang mga bloke sa magkakahiwalay na mga lugar na kasama. Nagprograma kami ng mga bahagi, hugis, at iba pa.

Sa pangalawang artikulo sa mga template ng Bitrix, pag-uusapan natin ang tungkol sa pamamahala ng mga template, ilarawan ang proseso ng pag-install ng bagong template, at sasabihin din sa iyo kung paano i-configure ang pagpapakita ng iba't ibang mga template para sa iba't ibang mga pahina at seksyon.

Ang template ng Bitrix ay isang set ng PHP file, style file, larawan, at component template. Ang lahat ng mga template ay matatagpuan sa /bitrix/templates/ folder at maaaring ilapat bilang isang template sa ilang mga site, o ilang mga template sa isang site. Sa pahina ng Mga Setting → Mga Setting ng Produkto → Mga Template ng Website sa administrative panel, ang isang listahan ng mga template na magagamit sa system ay ipinapakita.

Pag-install ng bagong template

Ang template ng Bitrix ay isang .tar.gz archive na naglalaman ng lahat ng kinakailangang PHP file, style file, script at larawan. Maaari kang mag-install ng bagong template sa pamamagitan lamang ng pag-unpack ng archive sa /bitrix/templates/ folder, o sa pamamagitan ng paggamit ng form sa Settings → Product Settings → Site Templates page sa Bitrix administrative panel. Sa pahinang ito kailangan mong i-click ang button na Mag-upload ng template, piliin ang archive na may template sa iyong lokal na disk at ilagay ang simbolikong code ng template.

Ipinapakita ng Figure 1 ang listahan ng mga template sa administrative panel, ang Figure 2 ay nagpapakita ng form para sa pagdaragdag ng bagong template.

Pagkatapos i-download ang archive, awtomatiko itong i-unpack sa /bitrix/templates/ folder at ipapakita sa listahan ng mga template sa admin panel.

Kapag nagda-download ng template, maaari mong piliin ang site kung saan ilalapat ang template bilang default.

Paglalapat ng template sa kasalukuyang site

Kapag na-download at naidagdag ang template sa system, maaari itong mailapat sa isa sa mga site. Upang gawin ito, kailangan mong piliin ang site kung saan dapat ilapat ang template sa administrative panel sa pahina ng Mga Setting / Mga Setting ng Produkto / Listahan ng mga Site (Ipinapakita ng Figure 3 ang listahan ng mga site sa admin panel).

Magbubukas ang form ng pag-setup ng site. Ang mga huling parameter ng form na ito ay ang mga setting ng template ng site. Dito maaari kang pumili ng isa o higit pang mga template na gagamitin para sa site na ito.

Mga kundisyon para sa paggamit ng mga template

Upang magamit ang iba't ibang template sa loob ng parehong site sa ilalim ng magkakaibang kundisyon, maaari mong tukuyin ang mga kundisyon para sa paggamit ng template sa form ng pag-setup ng site. Ang system ay nagbibigay ng mga sumusunod na uri ng mga kundisyon: Para sa folder o file, Para sa mga pangkat ng user, Panahon ng oras, Parameter sa URL, PHP expression. Tingnan natin ang bawat isa sa kanila nang mas detalyado:

Para sa isang folder o file— ang kundisyong ito ay dapat ilapat kapag iba't ibang mga template ang dapat gamitin para sa iba't ibang mga pahina at seksyon. Upang magamit lamang ang template para sa seksyon ng personal na account ng user, ang halaga ng kundisyong ito ay dapat na "/personal/" - ang path patungo sa seksyon mula sa root folder kung saan matatagpuan ang seksyong "Personal na Account". Kung ang template ay dapat na iba lamang para sa pahinang may 404 error, dapat mong tukuyin ang "/404.php" bilang ang halaga ng kundisyon.

Para sa mga pangkat ng gumagamit- isang karaniwang gawain kapag ang hitsura ng site ay dapat na naiiba para sa mga tagapamahala at ang mga ordinaryong bisita ay nalutas gamit ang ganitong uri ng kundisyon. Dapat itakda ang value ng property sa isang pangkat ng user, halimbawa, "Mga Editor ng Nilalaman." Ang isang bisitang pinahintulutan bilang isang user mula sa pangkat ng Mga Editor ng Nilalaman ay makakakita ng ibang hitsura ng site kaysa sa lahat ng iba pang mga bisita.

tagal ng panahon- Ang isang magandang halimbawa ng paggamit ng kundisyong ito ay isang tema ng Bagong Taon para sa site. Kung gagamitin ang template ng Bagong Taon sa site sa yugto ng panahon mula Disyembre 25 hanggang Enero 10, kailangan mong tukuyin ang hanay na ito bilang isang halaga para sa kondisyon ng uri ng panahon. Pagkatapos ng panahon, ang template ay awtomatikong magbabago sa default na template.

Parameter sa URL- Ang uri ng kundisyong ito ay kadalasang ginagamit upang lumikha ng napi-print na bersyon o upang subukan ang isang template. Upang lumikha ng paggamit ng template ng pag-print, dapat mong tukuyin ang "print=Y" bilang halaga ng kundisyon ng ganitong uri. Upang subukan ang isang bagong template, maaari mong tukuyin ang "test=Y" bilang isang kundisyon - at sa anumang page, kung ang test parameter na katumbas ng Y ay naipasa, ang test template ay gagamitin.

PHP expression— ang halaga ng kundisyong ito ay maaaring anumang PHP expression o Bitrix API function.

Inilapat ang mga template ng site ayon sa halaga ng index ng pag-uuri. Kung higit sa isang template ang maaaring gamitin para sa isang pahina, ang isa na may mas mataas na index ng pag-uuri ay pipiliin. Samakatuwid, maingat na tukuyin ang pag-uuri ng mga template - ang hindi tamang paglalagay ng mga index ng pag-uuri ay maaaring humantong sa mga hindi kasiya-siyang error.

Huwag kalimutan na "hindi dapat dumami ang mga umiiral na bagay nang hindi kinakailangan," ibig sabihin, kung ang ilang problema ay malulutas nang hindi lumilikha ng karagdagang template, mas mahusay na huwag lumikha ng karagdagang template. Ito ay dahil sa ang katunayan na sa pamamagitan ng pagkopya ng isang template upang gumawa ng mga menor de edad na pagbabago, pinipilit mo ang iyong sarili na mapanatili ang ilang magkaparehong mga file at gumawa ng mga pagbabago sa ilang mga template sa parehong oras.

Kaya, tiningnan namin ang proseso ng pamamahala ng mga template: pag-load ng bagong template sa system, paglalapat ng template sa isang site, mga kondisyon para sa paggamit ng iba't ibang template sa isang page. Sa mga sumusunod na artikulo, direktang lilipat kami sa paglikha ng iyong sariling template.

Muli, sinusubukan kong maghanap ng isang programmer na nagtrabaho sa CMS 1C-Bitrix sa aking lungsod, nagkaroon ako ng problema...

Mayroong mga programmer na nagtrabaho sa iba't ibang mga libreng framework tulad ng Joomla, WordPress, atbp., ngunit pagdating sa Bitrix, lahat ay nagsasabi: "Oh, ito ay binabayaran, bakit kailangan ko ito kung mayroong isang grupo ng iba pang mga libre." At ayaw nilang mag-aral ng bago.

Ganyan ako nagsimula, maliban sa isang bagay, ipinakita agad nila sa akin kung paano, ano at bakit. Ngunit natagpuan ko ang materyal sa online at sa Habré. Samakatuwid, magsisimula ako sa isang bagay na simple, tulad ng isang ordinaryong programmer na may kaalaman sa PHP at hindi bababa sa pangunahing HTML, CSS, JS, magsimulang magtrabaho kasama ang Bitrix.

Hindi ako magsasalita tungkol sa istraktura ng direktoryo ng template, maaari mong basahin ang tungkol doon. Ang unang bagay na kailangan mong harapin ay ang pagsasama ng isang HTML template sa isang CMS.

Sabihin nating mayroon kang yari na HTML na template at kailangan mong isama ito sa system. Magsimula tayo sa pag-install sa server:

Pumunta sa website ng Bitrix at i-download ang installer;

Mag-upload ng bitrixsetup.php sa server at simulan ang pag-install.
Ang unang bagay na inaalok sa iyo ng installer ay ang pumili ng isang edisyon:

Piliin ang pamamahagi na kailangan mo (karaniwan ay "Pamamahala ng Site"), kung mayroon kang isang susi, ipasok ito at i-click ang "I-download". Nagsimula na ang proseso...

Kung matagumpay ang pag-unpack, makikita mo ang welcome installation window

Ang susunod na bagay na nakatagpo ng mga baguhang programmer ay "Mga kinakailangang parameter ng system", ibig sabihin:

Upang malutas ang problemang ito, pumunta sa server, buksan ang .htaccess file at hanapin ang mga sumusunod na linya doon

#php_value mbstring.func_overload 2 #php_value mbstring.internal_encoding UTF-8

I-uncomment natin sila. Pindutin ang F5 at gumagana ang lahat... Kung hindi pa rin ito gumagana (at kung minsan ay nangyayari ito), pagkatapos ay sumulat ng isang kahilingan sa teknikal na suporta. suporta sa pagho-host.

Ang susunod na hakbang ay ang pag-install ng database. Sa palagay ko ay hindi na kailangang ilarawan ito dito. Kaya't magpatuloy tayo. Kung maayos ang lahat, makikita mo ang proseso ng pag-install ng Bitrix:

Nakarating kami sa pagpili ng mga solusyon na inaalok ng Bitrix. Dahil kailangan namin ng malinis na sistema nang walang anumang mga add-on, pipiliin namin ang "Demo site para sa mga developer"

Susunod na binabati tayo ng karaniwang "Master"

Gamit ito maaari kang mag-install ng demo data. Hindi namin ito kailangan, i-click ang "Kanselahin".

Kinukumpleto nito ang yugto ng pag-install; direkta kaming magpatuloy sa pagsasama ng template. Pumunta sa panel ng administrasyon sa seksyong "Mga Setting". Susunod, bumaba tayo sa puno ng mga setting: Mga setting ng produkto - Mga template ng website, mag-click sa pindutang "Magdagdag ng template".

Ang karaniwang form ng paglikha ng template ay bubukas.

Gumawa ng isang ID (karaniwang ginagamit ko ang pangunahing), ilagay ang pangalan ng template. Ang field na "Paglalarawan" ay hindi kinakailangan; ito ay ginawa para sa mga developer upang hindi malito ang mga template kung marami sa kanila.

Dito nagsimula ang saya. Karaniwang ganito ang hitsura ng template ng HTML page:

... ... ... ... ...

Ang pangunahing bagay dito ay upang maunawaan kung ano ang nabibilang sa template at kung ano ang bahagi ng nilalaman. Sa halimbawang ito, nagsisimula ang bahagi ng nilalaman sa pagitan ng tag ng seksyon. Samakatuwid, kopyahin ang template sa field na “Website template appearance”. Sa pagitan ng tag ay inilalagay namin ang direktiba ng serbisyo #WORK_AREA# . Bilang resulta, magiging ganito ang hitsura ng iyong template:

... ... ... #WORK_LUGAR# ...

Kung mayroon kang CSS, pagkatapos ay pumunta sa tab na "Mga Estilo ng Template" at i-paste ito doon.

Susunod, karaniwan kong ine-edit ang mga file sa pamamagitan ng FTP. Buksan ang iyong text editor (ginagamit ko ang Notepad++, kaya hindi ko isusulat ang kanyang halimbawa) at pumunta sa server. Ang buong template ng Bitrix ay matatagpuan sa /bitrix/templates/template_name/, kung mayroon kang mga larawan o karagdagang style file, JS script, atbp., pagkatapos ay kopyahin ang lahat sa folder na ito.

Lumipat tayo sa huling bahagi at irehistro ang lahat ng kinakailangang mga variable ng Bitrix. Buksan ang header.php file at simulan ang pag-edit. Ang unang bagay na kailangan mong gawin ay ikonekta ang output ng header ng site:

… …

Gusto rin naming makita ang admin panel ng site sa pampublikong bahagi ng site:

… … …

Upang ipakita ang pamagat ng page, magdagdag ng function sa kaukulang tag. Bilang resulta, nakukuha namin ang sumusunod na file:

... ... ...

Sa pamamagitan ng paraan, nakalimutan kong sabihin na kung mayroong karagdagang mga file, maging ito JS, CSS, favicon, at iba pa, pagkatapos ay upang hindi maisulat ang buong mahabang landas /bitrix/…/ mayroong isang espesyal na pare-pareho SITE_TEMPLATE_PATH . Inilalagay namin ito sa mga tamang lugar:

…
Gusto rin naming makita ang admin panel ng site sa pampublikong bahagi ng site:

… … …
Upang ipakita ang pamagat ng page, magdagdag ng function sa kaukulang tag. Bilang resulta, nakukuha namin ang sumusunod na file:

... ... ...
Sa pamamagitan ng paraan, nakalimutan kong sabihin na kung mayroong karagdagang mga file, maging ito JS, CSS, favicon, at iba pa, pagkatapos ay upang hindi maisulat ang buong mahabang landas /bitrix/…/ mayroong isang espesyal na pare-pareho SITE_TEMPLATE_PATH . Inilalagay namin ito sa mga tamang lugar: