Welcome to XENTR - Think Different and Make it...

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Kullanım tekniği Şablonlarda harici (Jquery) ve less kullanımı nasıl yapılır?

XenMake

XenTR Yönetici
Admin
XenTR Mod
Lisanslı Üye
XenTR Üyesi
Katılım
3 Şub 2019
Mesajlar
139
Tepki puanı
120
Merhaba

Bu dersimizde şablonlara harici jquery ve xxx.less dosyalarımızı nasıl ekleyebiliriz hep birlikte görelim. XenForo 2.x yapısı ile zaten tümleşik olarak gelen bir jquery kütüphanesi mevcuttur. Ama bazı durumlar için harici js dosyalarına ihtiyaç duyarız. Bu durumda harici bir js dosyasını nereye ne şekilde eklememiz gerekir?

Harici JS kütüphaneleri

Genel olarak XenForo 2.x yapısında şöyle bir şablon mevcuttur.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!
Bu dosya içerisine harici js dosyalarımızı ekleyebiliriz.

Web sitenizi bir alt klasöre kurmamışsanız dosya yolu genellikle bu şekildedir.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Şablon üzerinde ekleyeceğimiz kod bu şekilde olmalıdır.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Alternatif olarak
Basit bir şekilde aşağıda gösterildiği gibi herhangi bir klasör içerisinde de js yolunu verebilirsiniz.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Ayrıca yeni oluşturulan bir şablon içerisine js kodlarınızı yazarak istenilen template içerisine çağırabilirsiniz.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Burada bulunan js_url sunucunuzda bulunan şu yolu göstermektedir. Bu yol zaten xenforo'nun js dosyalarının yoludur. parantez içinde belirtilmiş olan ('dosya_yolu/custom.js') ise sizin public_html/js içerisine oluşturmuş olduğunuz bir klasörü ve bu klasörün içindeki custom.js dosyanızı gösterir.

Biz deneme diye bir klasör oluşturduğumuzu düşünürsek dosyamızın yolu tarayıcımızda açıldığında şu şekilde olmalıdır.

Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Her iki yolu da deneyebilirsiniz. Tavsiyem base_url yolunu denemiz olacaktır.

Bu şekilde artık harici js kütüphanelerini ekleyebiliriz.

Harici .less uzantılı şablonlar

extra.less

Aslında bunun için XenForo'nun kendi yapısı gereği extra.less şablonu mevcuttur. Bu şablon güncelleme ve yükseltme işlemlerinde etkilenmez. Dolayısı ile bu şablon içerisine yazılmış kodlar herhangi bir değişiklik göstermezler taaki siz yeniden düzenleyene kadar.

Gelelim kendi oluşturmuş olduğumuz xxx.less uzantılı şablonları nasıl ekleyeceğimiz konusuna. Aslında bunun için iki pratik yöntem mevcuttur.

1' inci Yol
Bir adet xxx.less şablonu oluşturulur ve bunu direk olarak aşağıdaki verdiğim kodu extra.less şablonu içerisine yapıştırabilirsiniz.

Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

2'inci yol
Diğer bir yolu ise Sistem üzerinde kullanılan şablonlar genellikle değişik yerlerde görünebilirler. Bu şablonların nerede nasıl kullanıldıklarını ilerleyen derslerimizde göreceğiz. Ama her sayfada bu .less biçimlendirmemizin görünmesini istiyorsak eğer direkt olarak PAGE_CONTAINER ana şablonuna ekleyebiliriz.
Şu şekilde </head> tagından hemen önce ekleyebilirsiniz.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!
Bu biçimlendirmeniz her sayfada tıpkı extra.less gibi görünecektir.

Bir diğer örnek olarak editor şablonu üzerinde bir düzenleme yapmak istiyorsak kendi oluşturmuş olduğumuz xxx.less şablonunu editor template üzerine aşağıda verdiğim kodu bu şablonu açarak en üste ekleyebilirsiniz.

Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!
Bu kadar basit. Bu olay sadece eklemiş olduğunuz şablon, sistem üzerinde nerede aktif ise xxx.less yapısını içerisine alarak görünür.

Umarım sizler için faydalı bir anlatım olmuştur. Lütfen kafanıza takılan soruları sormaktan çekinmeyiniz.
 

Ovunc Dinc

XenTR Yönetici
Admin
XenTR Mod
Lisanslı Üye
Müşteri
SMS Confirmed
XenTR Üyesi
Katılım
3 Şub 2019
Mesajlar
1,561
Çözümler
4
Tepki puanı
3,430
Web Sitesi
xentr.net
Osman Bey vermiş olduğunuz bilgiler için teşekkürler.
XenForo kullanıcılarının arzuladığı arayüz ve uygulamalar için js ve less kullanımları yapı için olmazsa olmazlar arasındadır.

Bir çok sitede olmayan bu bilgilere erişme şansını sağlamanız üyelerimizin ayrıcalıkları olacaktır.
 

Hasip

Lisanslı Üye
Lisanslı Üye
Müşteri
XenTR Üyesi
Katılım
26 Şub 2019
Mesajlar
117
Tepki puanı
101
Özellikle benim gibi sayfalarda istatistik gösterecekler için mükemmel bir ders olmuş teşekkürler. Ben kara düzen kodların arasına ekliyordum biliyorsun Övünç hocam :)
 

mkucuksari

Kayıtlı Kullanıcı
XenTR Üyesi
Katılım
19 Şub 2019
Mesajlar
15
Tepki puanı
14
Kendi less dosyasını oluşturup, çağırmayı duymuş ama nasıl yapıldığını tam öğrenmemiştim. Bu konu çoğu şeye cevap oldu. Emeklerinize sağlık, bu tür konuların devamını merakla bekliyoruz :)
 

XenMake

XenTR Yönetici
Admin
XenTR Mod
Lisanslı Üye
XenTR Üyesi
Katılım
3 Şub 2019
Mesajlar
139
Tepki puanı
120
Burada daha anlatılmayan yada anlatılamayan çok şey anlatılacak gibi duruyor... ;)
 
shape1
shape2
shape3
shape4
shape7
shape8
Üst