18 оны арванхоёрдугаар сарын 2014-ны Пүрэв гарагийн 23:00 цаг

Front-end хөгжүүлэгчийн хувьд Joomla загвар үүсгэх

зохиогч 


Суахили хэлээр Жумла гэдэг үг нь "бүгд хамтдаа", "нэг" гэсэн утгатай. Ерөнхий санааны хувьд энэхүү CMS-ийн үндсэн ойлголтууд:
Загвар – вэбсайтын хуудасны зохион байгуулалт, дизайныг тодорхойлдог хавтас/файлуудын багц. Та нэг сайт дээр олон суулгасан загвартай байж болно. Тиймээс та сайтын дизайныг хэдхэн секундын дотор өөрчилж, нэг загвараас нөгөөд шилжих боломжтой.


HTML загвар нь тодорхой контентыг харуулах хуудасны хэсгүүдийг (ихэвчлэн div блокууд) тодорхойлдог. Жишээлбэл, ихэвчлэн төвийн хэсэг нь хуудасны агуулгыг харуулдаг. Сайтын эзэн/зохиогч энэ хэсэгт харагдах WYSIWYG засварлагчийг ашиглан нийтлэлийн нийтлэл үүсгэх боломжтой.
Мөн HTML загварт янз бүрийн объектыг харуулах талбаруудыг тодорхойлж болно.
Дүрмээр бол эдгээр нь: баримт бичгийн толгой (дээд талд нь үргэлж харагдана), хөл хэсэг (доод талд нь харагддаг), цэсийн хэсэг, хажуугийн зарим хэсэг. Энд бүх зүйл загвар зохиогчийн хүслээс хамаарна. Эдгээр газруудыг албан тушаал гэж нэрлэдэг.
Загвар нь бусад функцтэй бөгөөд тэдгээрийг доор тайлбарлах болно.
Модуль – HTML/PHP/CSS/JavaScript код бүхий объектыг хуудасны тодорхой газруудад харуулах боломжтой. Ердийн загваруудын жишээ: сайтын хэл солих, сайтын зөвшөөрлийн блок, сайтын хайлтын талбар, санал өгөх гэх мэт.
Залгахнь HTML/PHP/CSS/JavaScript кодтой, хуудасны контент дотор суулгаж болох объект юм. Модулийн ялгаа нь зөвхөн хуудсан дээрх дэлгэцийн байршилд л байна. Өгүүллийн зохиогч WYSIWYG редактороор ажиллахдаа тодорхой код (HTML кодтой төстэй) оруулах боломжтой болно. Сайт дээр энэ кодыг модультай төстэй объектоор солих болно.
Бүрэлдэхүүн хэсэг – олон тохиргоотой глобал объект. Дүрмээр бол бүрэлдэхүүн хэсгээс гадна модулиуд болон залгаасууд байдаг. Жишээлбэл, бүрэлдэхүүн хэсэг нь зочны ном, онлайн дэлгүүр эсвэл форум байж болно. Эдгээр бүх объектууд олон тохиргоотой бөгөөд тэдгээрийг тусдаа хуудсан дээр харуулах боломжтой.
WYSIWYG редактор – онлайн текст засварлагч (таны харж байгаа зүйл бол авах болно). Microsoft Word эсвэл WordPad програмтай төстэй хялбаршуулсан самбар ашиглан засварлагч автоматаар HTML код болгон хөрвүүлдэг нийтлэлүүдийг үүсгэж болно.

Модулиуд болон залгаасууд болон бүрэлдэхүүн хэсгүүд нь хоёулаа өргөтгөлүүд юм. Өргөтгөлүүдийн тусламжтайгаар CMS-ийг өөрөө суулгаснаар та вэбсайтаа онлайн дэлгүүр, блог, форум болон таны хүссэн бүх зүйл болгон хувиргах боломжтой.
Бүх өргөтгөлүүдийг зип архив хэлбэрээр өгсөн бөгөөд үүнийг админ самбараар дамжуулан сайт дээр татаж авах/суулгах боломжтой.
Өргөтгөлүүдийн үндсэн лавлах нь албан ёсны Joomla вэб сайтын лавлах юм http://extensions.joomla.org/
Үүнээс татан авснаар өргөтгөл нь хортой эсвэл сурталчилгааны код агуулаагүй гэдэгт тодорхой итгэлтэй байж болно. Наад зах нь ийм бүх өргөтгөлүүдийг каталогоос яаралтай, хайр найргүй устгадаг гэдэгт би итгэхийг хүсч байна. Хөгжүүлэгчид нь тэдний нэр хүндийг үнэлдэг тул би олон хүмүүсийн нэгэн адил алдартай, батлагдсан өргөтгөлүүдийг илүүд үздэг.
CMS нь өөрөө хөгжиж байгаа бөгөөд түүний хөгжлийн явцад дэлхийн өөрчлөлтийн үе шатуудыг туулсан бөгөөд үүний үр дүнд одоогоор системийн хэд хэдэн хувилбар бий болсон. Энэ нь 1,5 хувилбар, 2,5 хувилбар ба 3.x хувилбар (3.x нь 3-р мөрийн хувилбарууд хоорондоо нийцтэй байна гэсэн үг - 3.1 3.2 ба 3.3)
Хэрэв танд Joomla 2.5 дээр суурилсан вэбсайт байгаа бол зөвхөн энэ хувилбарын өргөтгөлүүд танд тохиромжтой, өөрөөр хэлбэл өөр өөр хувилбарын өргөтгөлүүд таарахгүй байна.

Би өргөтгөлүүдийг хэрхэн суулгах, тохиргоо хийх талаар бодохгүй. Ухаалаг оюутан ч, IT-ээс хол хүн ч үүнийг ойлгож чадна. Би өөрийн загвар болон өргөтгөлийг боловсруулж, засварлах, мөн гуравдагч талын өргөтгөлүүдийн дизайныг өөрчлөх сонирхолтой байна.
Та бэлэн загвар бүхий хэдэн зуун, бүр хэдэн мянган төлбөртэй, үнэ төлбөргүй загваруудыг олж, тэдгээрийг өөрийн үзэмжээр тохируулах боломжтой боловч ихэнхдээ тэдгээр нь танд огт хэрэггүй олон функцийг агуулдаг. Илүү мэргэжлийн арга бол өөрийн загварыг бий болгох явдал юм.
Та хоосон загварыг онлайнаар хялбархан олох боломжтой, эсвэл эхнээс нь үүсгэж болно.
Загвар нь зип архивт хадгалагдсан хавтас юм.

Фолдерт шаардлагатай файлууд нь:
index.php – хуудасны бүтэц, дизайныг тайлбарлах үндсэн файл
component.php – хэвлэгчийн хувьд зөвшөөрөгдсөн хэлбэрээр хуудсыг харуулна
алдаа.php – 404 хуудсыг үзэх
favicon.ico – манай вэбсайтын дүрс тэмдэг
template_preview.png и template_thumbnail.png - загварыг урьдчилан харах
templateDetails.xml – загварын тайлбарыг агуулсан файл.
Бүтэц хийхэд хялбар болгох үүднээс хавтас дотор тодорхой нэр бүхий дэд хавтаснууд байдаг:
CSS - хэв маягийн хувьд
зургууд - зургийн хувьд
js - скриптүүдийн хувьд
хэл – текстийг янз бүрийн хэл рүү орчуулах ini файлуудад зориулагдсан.
Аюулгүй байдлын үүднээс хавтас бүр хоосон index.html файл агуулсан байх ёстойг анхаарна уу
Загварын хавтас нь html хавтас агуулж болно. Энэ хавтас нь зарим Joomla бүрэлдэхүүн хэсгүүдийн гадаад үзэмжийн өөрчлөлтийг агуулсан байдаг.
Ерөнхийдөө Joomla-н 1.5, 2.5, 3.x хувилбаруудын хувьд загварын бүтэц өөрчлөгдөөгүй хэвээр байна.

templateDetails.xml-ийн хялбаршуулсан хувилбарын агуулгыг харцгаая
Малгайны дараа

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">


үндсэн шошгыг дагадаг:

<extension version="2.5" type="template" client="site">


Дараа нь загварын тайлбар бүхий толгой хэсэг байна:

<name>blanktemplate</name><!--имя вашего шаблона -->
    <creationDate>2014-12-20</creationDate><!--дата шаблона -->
    <author>your name</author><!--имя разработчика-->
    <copyright>Copyright © 2014 alexalex.ru</copyright><!--автор шаблона-->
    <authorEmail>admin@alexalex.ru</authorEmail><!-- ваш e-mail -->
    <authorUrl>http://www.alexalex.ru</authorUrl><!-- ваш сайт -->
    <version>1.0.0</version><!--номер версии шаблона -->


Дараа нь, дүрмээр бол HTML ашиглан форматлаж болох загварын тайлбар гарч ирдэг.

<description><![CDATA[ 
        <h1> Мой шаблон </h1>
        <p>Создано <a href="http://www.alexalex.ru" target="_blank">Это самый простой из шаблонов!</a>.</p>
    ]]></description>


Загварт шаардагдах бүх файлыг templateDetails.xml дээр тайлбарласан байх ёстой

<files>
        <folder>css</folder>
        <folder>images</folder>
        <folder>js</folder>
        <folder>language</folder>
        <filename>component.php</filename>
        <filename>error.php</filename>
        <filename>index.php</filename>
        <filename>index.html</filename>
        <filename>template_preview.png</filename>
        <filename>template_thumbnail.png</filename>
        <filename>favicon.ico</filename>
        <filename>templateDetails.xml</filename>
    </files>


Хэрэв та мартаагүй бол манай вэбсайтын хуудсыг хэсэг болгон хуваах болно - албан тушаал.
Байршил нь ихэвчлэн div блок дотор байрладаг. Joomla.org сайтаас албан тушаалыг хэрхэн яаж зохион байгуулж болох жишээ:

Загварын тайлбарт эдгээр байр суурийг мөн зааж өгөх ёстой. Таны хүссэнээр албан тушаалын тоо. Та өөрийнхөө нэрийг гаргаж болно, эсвэл стандарт нэрийг дагаж болно.

   <positions>
    <position>top</position>
    <position>footer</position>
    <position>debug</position>
    </positions>


Хэрэв та олон хэлээр ярьдаг сайттай бол ашигладаг хэлээ тайлбарлах хэрэгтэй

<languages folder="language">
        <language tag="en-GB">en-GB/en-GB.tpl_blanktemplate.ini</language>
        <language tag="ru-RU">ru-RU/ru-RU.tpl_blanktemplate.ini</language>
    </languages>


Энэхүү тайлбар нь хэлний хавтас дотор орчуулгатай файлуудыг агуулсан en-GB болон ru-RU гэсэн 2 дэд хавтастай гэж үздэг. Эдгээр файлууд нь "KEY=value" хэлбэрийн текстийг агуулна. Түүнчлэн, түлхүүрийн нэрийг том үсгээр бичих ёстой.
Жишээ нь:
DEMOTEXT="Жишээ текст"

Мөн загварт та энгийн хэрэглэгч эсвэл сайтын администратор (програмист биш) өөрчлөх боломжтой загварын тохиргоог өөрчлөх янз бүрийн шилжүүлэгчийг дүрсэлж болно. Вэбсайт дээр шилжүүлэгч нь дараах байдалтай байна.

Жишээлбэл, өнгө тохируулах боломжийг авч үзье. Шилжүүлэгчийн аль нэгийг бүтээцгээе. Үүнийг хийхийн тулд дараах кодын хэсгийг нэмнэ үү.

<config>
    <fields name="params">
    <fieldset name="basic">
    <field name="templateBGColor" class="" type="color" default="#FFFFFF"
    label="Цвет фона темы" description="Это цвет фона страницы" />
    </fieldset>
    </fields>
</config>


Энэ өнгөний утгыг хуудсан дээр харуулах боломжтой. Үүнийг хэрхэн хийх талаар уншина уу.

Одоо index.php файлыг хараад layout хийж үзэцгээе.
Файлын хамгийн эхэнд php кодыг нэмнэ үү:

<?php defined( '_JEXEC' ) or die; // эта строка из соображений безопасности запрещает прямой доступ

$doc = JFactory::getDocument(); // переменная, которая хранит ссылку на документ
$tpath = $this->baseurl.'/templates/'.$this->template; // переменная с относительным адресом шаблона

// добавляем стиль css с помощью такой вот конструкции
$doc->addStyleSheet($tpath.'/css/template.css.php');

// добавляем javasript
$doc->addScript($tpath."/js/custom.js");

?>


Дараа нь стандарт хуудасны гарчиг байна:

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">

<head>
    <jdoc:include type="head" />
</head>


Энд гарчигт ердийн толгой шошгуудыг нэмнэ. Жишээ нь: тайлбар бүхий мета шошго, түлхүүр үг, өргөтгөл, скрипт, хэв маягаар холбогдсон бусад файлууд гэх мэт.

Манай биеийн шошгон дээр бид шилжүүлэгчийнхээ өнгөний гаралтыг загварын утгад нэмэх бөгөөд ингэснээр CSS-ийг мэдэхгүй сайтын админууд админ самбараас хуудасны дэвсгэр өнгийг өөрчлөх боломжтой болно.

<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">


Дараа нь бид загвараа div дээр байрлуулж болно.
HTML5 div эсвэл семантик блок доторх байрлалын гаралт дараах байдалтай байна.

<div>								
        <?php if ($this->countModules( 'footer' )) : ?>
        <jdoc:include type="modules" name="footer" /> 
        <?php endif; ?>
</div>


Энэ код нь аль нэг модулийг өгөгдсөн хөлийн байрлалд харуулах эсэхийг шалгадаг бөгөөд хэрэв шаардлагатай бол модулийн агуулгыг харуулна. Мэдээжийн хэрэг та чекийг алгасаад зүгээр л харуулах боломжтой:

<jdoc:include type="modules" name="footer" /> 


Өөр байрлалыг харуулахын тулд та зөвхөн хөлийн хэсгийг нөгөө байрлалын нэрээр солих хэрэгтэй.

Шошгуудыг хуудасны үндсэн агуулгыг харуулахад ашигладаг:

<jdoc:include type="message" />
<jdoc:include type="component" />


Мөн бид тэдгээрийг хүссэн div дотор байрлуулна.

Загварын дизайны жишээ болгон би хэд хэдэн жишээ өгөх болно.
Хэрэв та мартаагүй бол (хэрэв байгаа бол хэд хэдэн догол мөрийг дахин уншина уу) - бидэнд орчуулгын файл бүхий en-GB ба ru-RU хоёр хавтас бий. Бид жишээ болгон хоёр хэл дээрх текстийг оруулсан. Энэ текстийг DEMOTEXT код үгээр тодорхойлно. Бид php кодыг ашиглан энэ текстийг харуулах боломжтой:

<?php echo JText::_( 'DEMOTEXT' ) ?>


Нэмж дурдахад энэ текстийг параметрийн утгууд (жишээлбэл гарчиг эсвэл alt) болон догол мөрний агуулга, тэр ч байтугай холбоосын URL руу оруулах боломжтой.

Загвар дээрх зургууд нь ихэвчлэн зургийн санд байрладаг. Зургийг харуулахын тулд бид жижиг php кодыг ашиглах бөгөөд энэ нь бидний загвар байрладаг хавтсанд хүрэх замыг харуулах болно.

<?php echo $tpath; ?>


Бид хуудасны хамгийн эхэнд $tpath хувьсагчийг зарласан бөгөөд тухайн зураг загварын аль дэд хавтсанд байрлаж байгааг бид мэднэ.
Логоны зургийг харуулах жишээ:

<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="sayHelloHabr()">


Энд onclick="sayHelloHabr()" нь бидний скрипт бүхий гадаад файл болгон оруулсан custom.js файлаас функцийг эхлүүлэх болно.

Манай энгийн загварын бүрэн код:

<?php defined( '_JEXEC' ) or die; // эта строка из соображений безопасности запрещает прямой доступ

$doc = JFactory::getDocument(); // переменная, которая хранит ссылку на документ
$tpath = $this->baseurl.'/templates/'.$this->template; // переменная с относительным адресом шаблона

// добавляем стиль css
$doc->addStyleSheet($tpath.'/css/template.css.php');

// добавляем javasript
$doc->addScript($tpath."/js/custom.js");

?>

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">

<head>
    <jdoc:include type="head" />
</head>
  
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">
    
<p><?php echo JText::_( 'DEMOTEXT' ) ?></p>
    
    <header class="header">
                    
    <img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="sayHelloHabr()">
        
        <nav class="navtop" role="navigation">		
            <?php if ($this->countModules( 'top' )) : ?>
            <div class="top">
            <jdoc:include type="modules" name="top" /> 
            </div>
            <?php endif; ?>			
        </nav>
        
    </header>

            <main class="content">		
        <jdoc:include type="message" />
           	 <jdoc:include type="component" />	
            </main>

        <footer class="footer">								
            <?php if ($this->countModules( 'footer' )) : ?>
            <jdoc:include type="modules" name="footer" /> 
            <?php endif; ?>
        </footer>

<jdoc:include type="modules" name="debug" />

</body>
</html>


Эцсийн үр дүнг холбоосоос татаж авах боломжтой - энгийн загвар.
Үзэсгэлэнтэй дизайн хийх нь загвар зохион бүтээгчийн хувьд ч асуудал биш, тэр байтугай урд талын хөгжүүлэгчийн хувьд ч асуудал биш юм.

Вэбсайт загвар нь үндсэндээ юм танилцуулга MVC загвараас (загвар харах-хянагч = загвар харах-хянагч). Энэ нь мэдээллийн гаралт, дизайныг хариуцдаг хэсэг юм. Ихэнх модулиуд болон бүрэлдэхүүн хэсгүүд нь ижил зарчмаар ажилладаг.
Хэрэв та модулийн гадаад төрхийг өөрчлөх шаардлагатай бол түүний дүрслэлийг авч HTML кодыг өөрийн хэрэгцээнд тохируулан өөрчилж болно.
Ихэнхдээ модулийн код шинэчлэгддэг. Зарим алдааг засч байна. Модуль шинэчлэлт бүрийн дараа харагдацын төрлийг өөрчлөхгүйн тулд та хүчингүй болгож болно. Энэ нь загвар хавтсанд байрлах файл эсвэл файл бөгөөд модулийн харагдах байдлыг тодорхойлох болно.
Үүнийг удирдлагын самбарт дараах замаар хийж болно.
Өргөтгөлүүд - Загвар менежер - Загварууд
- манай загвар дээр дарж (бид загварынхаа онлайн засварлагч руу ордог) "Дараах тэмдэг үүсгэх" таб руу очно уу.
Хүчингүй болгосноор бид html фолдерт файлууд эсвэл бүр хавтаснууд нэмэгдэх болно гэдгийг харж болно. Та эдгээр файлтай html хавтсыг шууд манай zip загварт байрлуулж, зарим модулиудын гадаад төрхийг өөрчилсөн бэлэн загварыг сайт дээр суулгаж болно.

http://habrahabr.ru/post/246061/

Сэтгэгдэл бичихийн тулд нэвтэрнэ үү