it-swarm-tr.com

3.3'te yeni şablon oluşturma

İlk yeni şablonumu oluşturuyorum - çok yeni başlayanlar.

Kendimi sıfırdan oluşturduğum ve bunu bir Joomla 3.3 şablonuna dönüştürdüğüm statik bir HTML5 ve CSS3 web sitem var.

Temel bir şablonun nasıl yapılacağı hakkında bazı eğiticiler okudum ama gerçekten her şeye elimi koyacak zamanım yok, bu yüzden hızlı bir çözüme ihtiyacım var, sadece tüm CSS stilimi kullanıyorum ve herhangi bir şeyi görmezden gelebilirim Joomla'dan.

Biraz tarz koymaya çalıştım <div> dizinime veya (özel html) altında bir modül olarak etiketleri ama benim css kuralları geçersiz kılan bazı css stilleri vardır, bu yüzden ben sadece joomla her şeyi kurtulmak ve yeni şablon temiz tutmak istiyorum.

Bunu index.php içinde aldım

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

ama bence benimkini geçersiz kılan ana tarz bu çizgiden geliyor

<jdoc:include type="head" />

ne getirdiğini bilmiyorum.

4
Elhamy

Bir şablon yaparken genel kural kendi CSS dosyalarınızı yüklemektir after<jdoc:include type="head" />. Bu önemlidir, çünkü bu şekilde CSS kuralları üzerinde son sözünüz olur. Ancak bu, şablonunuzda $doc->addStyleSheet() kullanmadığınız anlamına gelir. Bunun yerine, jdoc ifadesinden sonra kafanıza düz HTML olarak yazmanız yeterlidir.

Şablonunuza JavaScript veya CSS dosyaları eklemek için API'yı kullanmaya devam etmenin bir nedeni vardır. Diğer bir deyişle, uzantılar tarafından da yüklenebilecek varlıkları yüklerseniz. Sonra Joomla sadece bir kez yüklenmesine dikkat eder, aksi takdirde iki kez yüklemiş olabilirsiniz.

Bu nedenle, bootstrap dosyasını API kullanarak yüklemek mantıklı olabilir, ancak kendi şablon stiliniz (style.css) ve JavaScript'iniz (main.js) jdoc etiketinden sonra sabit kodla yüklenmelidir.

Bir yerinde: Bootstrap CSS'yi JHtmlBootstrap::loadCSS() ( http://api.joomla.org/cms-3/classes/JHtmlBootstrap) öğesini kullanarak yükleyebilirsiniz. html # method_loadCss ) .Bir şablon içinde yapıldığında bu gayet iyi. Ancak bu çağrıyı hiçbir zaman bir uzantı içinde kullanmayın.

Ancak Bootstrap DAHA AZ dosyalardan çalışmak ve ondan kendi CSS dosyanızı derlemek daha mantıklı olabilir. O zaman bile ihtiyacınız olan şeyleri karıştırabilir ve eşleştirebilir ve zaten sağlanan karışımları ve değişkenleri kullanabilirsiniz Bootstrap tarafından.

6
Bakual

Ne yazık ki Joomla böyle çalışmıyor. Bir Joomla şablonu oluşturmak için, bileşeni içe aktaran jdoc etiketi gibi bazı dinamik öğelere sahip olmanız gerekir.

<jdoc:include type="head" /> Aynı zamanda bir gereklilik ve çok kullanışlı bir gerekliliktir. Temel olarak, bir komut dosyasından <head> İçine enjekte edilmesi gereken tüm komut dosyası, bağlantı ve diğer her şeyi alır ve sizin için oraya enjekte eder. Örneğin, graph.js gerektiren bir modülünüz olduğunu varsayalım. Bunu içe aktarmak için şöyle bir şey kullanırsınız:

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

Şimdi <jdoc:include type="head" /> Yukarıdaki kodu alır ve sizin için <head> İçine enjekte eder, böylece manuel olarak yapmanız gerekmez. Bu nedenle, orada tutun reklam kaldırmayın. Ayrıca Joomla ile birlikte gönderilen bazı temel komut dosyaları için de gerekli olacak.

Sitenizde modüller kullanmak istiyorsanız, HTML kodunu index.php dosyasına ekleyemez ve düzgün çalışmasını ve dinamik olmasını bekleyemezsiniz. Bu yüzden kullanıyoruz:

<jdoc:include type="modules" name="position-7" />

kodlayan modülü ve HTML yapısını içe aktarır. Bununla birlikte, can Ancak modülün etrafına sarmak için özel HTML ekleyin:

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

Çok karmaşık değil ve aynı zamanda hayatı çok daha basit hale getiriyor. Joomla statik bir yaklaşıma dayanmaz, bu nedenle çalışma şekline bağlı kalmalısınız.

4
Lodder

İlk başladığımda, kullanıma hazır Joomla şablonları o kadar temiz değildi ve bu yeni başlayanlar için iyi oldu.

Şöyle bir kafa bölümüm var ...

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

Özellikle, stil sayfaları addStyleSheet ile "Güzel" şekilde dahil edilmez ve sonuç olarak, koydukları yerde kalır, son! Dinamik olarak eklenen stil sayfaları <jdoc:include type="head" /> nokta.

Şablonunuzda olabilecekler önce stil sayfalarınızın yüklenmekte, ardından dinamik olarak eklenen Joomla olanların son olarak eklenmesidir. Her şey addStyleSheet işlevlerinin nerede çağrıldığına bağlıdır.

Şablonda ihtiyacınız olan her şeye sahip olduğunuzdan eminseniz ve ek dinamik bitlere (örneğin, ön uç düzenleyicisi için) veya eklediğiniz herhangi bir uzantıya ihtiyacınız olmadığından eminseniz, <jdoc:include type="head" />, en azından başlangıç ​​şablonu için.

Veya ... stil sayfalarınızı, verilen kafanın dışında sabit bir noktaya ekleyin.

Yeni başlayanların ötesine geçtiğinizde, muhtemelen baş bölümünü eklemek istersiniz. Yeni başlayanlar için olmasa da, dinamik içeriği manipüle etmenin yolları vardır. Örneğin, hata ayıklama için, oturum açmış kullanıcı olduğumda, özel bir uzantı kullanarak dinamik olarak eklediğim bir stil sayfam var.

1
Peter Wiseman

Stilleri geçersiz kılıyorsanız, bazı yüksek spesifiklik seçicileri kullandığından şüphesiz Bootstrap'ın css'si nedeniyle olur.

Statik siteniz Bootstrap kullanıyor mu? Değilse, Joomla şablonunuzda onsuz kesinlikle daha iyisiniz. Sonunda sadece onunla kavga edeceksin. Sanırım zaten bunu gördün.

Statik siteniz Bootstrap) kullanmadıysanız, daha sonra LESS'in tüm konuşmasını daha iyi unutabilir ve yaptığınız gibi kendi CSS ve JS'nizi ekleyebilirsiniz. Joomla şablonunuzda Bootstrap kullanmanız gerekir.

1
Seth Warburton