Joomla 3.x šablonas panaudojant Twitter Bootstrap frameworką

PDFSpausdintiEl. paštas

Sekmadienis, 19 Sausis 2014 23:06 Parašė Rimvydas Peržiūrų: 5195

( 6 Balsai )
Joomla 3.x šablonas panaudojant Twitter Bootstrap frameworką - 4.8 out of 5, based on 6 votes

  Mūsų tinklalapyje jau buvo straipsnelių ciklas kaip susikurt Joomla 1.5 ver. skirtą šabloną nuo nulio ir nors iš principo struktūra ir principai visose Joomla versijose nesikeičia nusprendžiau parašyt dar vieną ta tema apie naujos kartos šablono kūrimą kuriame naudosime "frameworką".

 Dabar kodėl būtent Bootstrap naudosime, o ne kitą "frameworką" juk jų yra ne vienas ir ne du . Na pirmiausiai tai, kad mano ir ne tik mano nuomone jis yra vienas iš labiausiai pažengusių CSS "frameworkų", nemokamas, be to, manau gana lengvas sistemai, paprastas ir aiškus. Šis "frameworkas" jau yra įdiegtas į Joomla 3 .x versiją pagal nutylėjimą, todėl Joomlai 3 nebereikia jokių papildomų failų pakanka jį pajungt iš branduolio. Kaip minėjau pati šablono struktūra nepasikeitusi, todėl apie ją  daug nekalbėsime.

  Iš atsiradusių skirtumų tai, kad pradedant Joomla 1.6 pasikeitė templateDetails.xml  failo sandara, tačiau ten nėra ką  aiškinti atsidarius viskas matoma ir manau aišku ir sekantis skirtumas tai kad pats šablonas jį diegiant registruojamas duomenų bazėje. Todėl šiame straipsnelyje pasiaiškinsime smulkiau tik  patį index.php failą ir jo sandarą.

 Nemažai tinklalapių kūrėjų, kad darbai vyktų greičiau ir kaskart nereikėtų visko pradėt nuo "a"  naudoja taip vadinamą blank_template - šablono ruošinį. Tai yra šablonas kuriame viskas sudėliota tik trūksta šablono stiliaus failo ir jis daromas atskirai konkrečiai pagal koduojamą dizainą. Taigi čia irgi bus  toks blank template su standartiniais Joomlos bootsrap stiliais ir kam jis tiks ir patiks galite pilnai prisitaikyt saviems poreikiams. O dabar apie patį šabloną.
Kokias savybes kuriamas šablonas turės:

  • Turės 12 stulpelių „tinklelį“ kuris manau paprastina dizaino kūrimą .
  • CSS 3 ir HTML 5 palaikymą.
  • Suderinamumą su visomis naršyklėmis.
  • „Kintanti“ (responsive) dizainą kuris prisiderina prie įvairių ekrano dydžių.

 Tačiau prieš pradedant darbus būtinai  susipažįstame su pačiu Twitter bootstrap  įdėmiai pastudijuojame, kad vėliau galėtume panaudot esamas jo galimybes.

Mūsų kuriamo šablono struktūra:

CSS katalogas kuriame laikomi stilių failai
Html katalogas jame perkelti (perskirstyti) mums reikalingi joomlos plėtiniai kuriems buvo daryti kažkokie stiliaus ar kodo pakeitimai . Perkelti tokius plėtinius rekomenduojama, nes atnaujinus versiją visi atlikti keitimai bus panaikinti.
JS katalogas skirtas šablono js skriptams.
Images kataloge saugomi šablono paveikslėliai.
Index.php pagrindinis šablono failas.
templateDetails.xml failas aprašantis šablono struktūrą, parametrus, modulių pozicijas ir t.t yra pagrindinis šablono įdiegimo failas.
Favicon.ico- tinklalapio fav ikona
Index.html tuščias failas reikalingas kiekviename kataloge kaip papildomas apsaugos failas.
Susipažinkime su busimo šablono  modulių-pozicijų išdėstymu:


Dabar parsisiunčiame šabloną kurį nagrinėsime

(galime įdiegti) arba išskleidžiame archyvą , atsidarome šablono index.php failą ir žiūrime.
Šablono failas prasideda kaip ir visi joomlos failai kodu:

1
2
3
<?php
defined('_JEXEC') or die('Restricted access');
?>

kuris patikrina ar failas tikrai priklauso Joomlai ir nesikreipia tiesiai apeidamos Joomlos sistemą.

1
<!DOCTYPE html> 
dokumento tipas informuoja, kad bus naudojama HTML5.

Toliau standartinis Joomlos kalbos pajungimas:

1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

Šablonas naudoja 12 stulpelių tinklelį ir sekančioje kodo dalyje užduodame koks pagrindinės šablono dalies plotis bus priklausomai naudojame ar ne kairį ir dešnį bloką:

1
2
3
4
5
<?php
if($this->countModules('left and right') == 0) {$cwidth = "12";}
if($this->countModules('left or right') == 1) {$cwidth = "9";}
if($this->countModules('left and right') == 1) {$cwidth = "6";}
?>

Sekantis įrašas:

1
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" /> 

Priverstinai atjungia Skype įskiepį (jei jis yra įdiegtas naršyklėje) . Kas tai yra jei kam įdomu galite pažiūrėt info internete.

1
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Gairė „viewport“ naudojama „pradinio“ tinklalapio pločio nustatymo mobiliuose įrenginiuose. Net nežinau kaip teisingai išsireikšt, o paprastai sakant reikalinga, kad būtų priderinamas tinklapio plotis pagal naudojamą mobilų įrenginį.
Toliau pajungiame bootsrap‘ą :

1
2
3
4
5
6
7
8
<?php
// prijungiame bootstrap Frameworks
JHtml::_('bootstrap.framework');
 
// pridedam Bootstrap stilius
JHtmlBootstrap::loadCss();
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>
Žemiau esantis kodas manau aiškus tai paleidžiami individualūs stilių  failai .
1
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" type="text/css" />

Java skriptas:

1
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/modernizr.js"></script>
Tai pajungiame HTML5 ir CSS3 biblioteką.

Patį skripto failiuką patalpiname į js katalogą.
Sekantis skriptas ir stilių failas reikalingi dėl IE. Failas PIE.htc padeda IE naršyklėms suprast CSS3 standartą.

1
2
3
4
<!--[if IE]>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/js/PIE.htc"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style_ie.css" type="text/css" />
<![endif]-->  

 

Tuo head  blokas ir užbaigiamas. Toliau viskas kas  matoma lankytojui naršyklės ekrane.

Pagrindinis blokas "container" ir jame atskiri blokai.

1
<div class="span<?php echo $cwidth; ?>">............

 Kode pateikiami komentarai ir manau daugiau nėra ką aiškinti. Norėdami kažką keist panaudojant bootsrap stilius žiūrime Twitter bootstrap dokumentaciją ir naudojame atitinkamą „class“ "id" ir t.t.

„Content“ bloke panaudojame $cwidth kintamąjį kurį aprašėme pačioje pradžioje.

Failo pabaigoje įdėjau skriptą kuris reikalingas jei norime, kad veiktų „drop down“ meniu.
1
2
3
4
5
6
7
8
9
jQuery(document).ready(function(){
 
        jQuery('.parent').addClass('dropdown');
        jQuery('.parent > a').addClass('dropdown-toggle');
        jQuery('.parent > a').attr('data-toggle', 'dropdown');
        jQuery('.parent > a').attr('href','#');
        jQuery('.parent > a').append('<span class="caret"></span>');
        jQuery('.parent > ul').addClass('dropdown-menu');
    });


Aš be jo kažkodėl nesugebėjau Joomloje bootstrape paleist išskleidžiamo menių. Html'e viskas veikia puikiai. Galbūt kažkas pasidalins mintimis kodėl taip ir kas yra, o man teko pasiieškot informacijos ir vienas iš paprastų sprendimo būdų panaudot  šį skriptą.
Tai trumpai būtų tiek apie Joomla 3 ir bootstrap naudojimą šablone. Šį frameworką sėkmingai galima panaudoti ir Joomla 2.5 šablonuose, tačiau vis tik reik pripažint, kad Joomla 2.5 jau nueinanti nuo „scenos“ versija, todėl nemanau, kad verta apie tai atskirai rašyt. Jei kam įdomu ir aktualu  kaip tai padaryt galim apie tai pakalbėt forume.


Aptarkite šį straipsnį forume
Norėdami dalyvauti diskusijoje turite prisijungti arba užsiregistruoti .

Joomla123.lt is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.