Editor X: Sitenize Özel Öge Ekleme
4 dakikalık okuma
Editor X platformu, ajanslara ve serbest çalışanlara yönelik yeni platformumuz Wix Studio'ya geçiş yapıyor.Wix Studio hakkında daha fazla bilgi edinin (Yalnızca İngilizce)
Özel Ögeleri kullanarak kendi tasarım özellikleriniz ve CSS yeteneklerinizle sitenizi geliştirin. Bir özel ögeyi bir sunucu URL'sine veya bir Velo dosyasına bağlayarak herhangi bir Javascript bileşenini ekleyebilirsiniz. Gerekirse, doğrudan Editor X'ten daha fazla özellik ayarlayabilirsiniz.
Bu makalede bilgi edinebileceğiniz konular:
Başlamadan önce:
Sitenizin bir Premium Paketi olduğundan ve Editor X reklamı içermeyecek şekilde bir domaine bağlı olduğundan emin olun. Daha Fazla Bilgi
Özel Ögeler Nedir?
Özel ögeler, Editor X sitenizde kendi HTML etiketlerinizi kullanabilmenizi sağlar. Desteklenen tüm tarayıcılarda çalışan bu özel ögeler ayrıca HTML 5 uyumlu JavaScript ES6 kitaplıklarıyla veya çerçeveleriyle birlikte kullanılabilirler.
Kullanışlı özel ögelere örnekler
Kod gereksinimleri
İpuçları:
- Üçüncü taraf kaynaklardan özel ögeleri de kullanabilirsiniz, ama özel ögeyi sayfanıza eklerken Özellikler'den Etiket Adı'nı güncellediğinizden emin olun.
- Özel ögenizin performansı, nasıl uygulandığına bağlıdır.
Özel Öge Ekleme ve Ayarlama
Sitenize ihtiyaç duyduğunuz kadar özel öge ekleyin. Özel ögeyi sayfanıza sürükledikten sonra, kaynağını (bir sunucu URL'si veya bir Velo dosyası) tanımlayın ve sayfa kayıt defterinde görünmesi için bir etiket adı verin.
Nasıl yapılacağını göster
panelini açın.Özel ögenizin tüm kesme noktalarında harika göründüğünden emin olmak için Denetçi paneli 
kullanın, boyutlandırmasını, yerleştirmesini, hizalamasını ve daha fazlasını ayarlayabilirsiniz.
kullanın, boyutlandırmasını, yerleştirmesini, hizalamasını ve daha fazlasını ayarlayabilirsiniz. Not:
Varsayılan olarak, özel ögeler sayfanızın customElements kayıt defterinde görünür. Özel ögeniz için girdiğiniz etiket adı, adını bu kayıt defterinde tanımlar.
Özel Ögenin Özniteliklerini Belirleme
HTML özniteliklerini ayarlayarak ögenizin özelliklerinde ve davranışında daha fazla ayarlama yapın. Öge Öznitelikleri paneli, Editor X üzerinden doğrudan öznitelik ekleme, düzenleme ve kaldırma işlemleri yapabilmenizi sağlar, böylece asıl koda erişmenize gerek kalmaz.
Nasıl yapılacağını göster
Önemli:
Özel ögenizin kodu, tanımlanan öznitelikleri onaylamalı ve işlemelidir. Aksi takdirde düzgün çalışmaz.
Özel Öge Örneği
Aşağıda sitenize nasıl temel bir özel öge ekleyebileceğiniz gösterilmiştir. Talimatlar sitenize nasıl "Hello World" metnini ekleyeceğinizi açıklar.
Önce bir ögeyi oluşturup ögeyi ve davranışını bir JavaScript dosyasında kodlamanız gerekiyor.
Nasıl yapılacağını göster
Ardından, özel öge sınıfını tanımlayın.
Biz bu örnekte sınıfı HelloWorld olarak tanımladık ve özel ögeyi kaydederken aynı adı kullanacağız. Aşağıdaki connectedCallback() işlevi, öge DOM'a eklentilendiğinde otomatik tetiklenen bir yaşam döngüsü geri çağırma işlevidir.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);Özel öge sınıfını tanımladıktan sonra
customElements.define(name, class) yöntemiyle özel öge sınıfını kaydediyoruz. Özel ögeyi sitenize eklerken kayıtlı adı Etiket Adı olarak girin. Özel öge kaydedildikten sonra sitenizde kullanılabilir.
1CustomElementRegistry.define('hello-world', HelloWorld);Daha detaylı bilgilere mi ihtiyacınız var?
Bu ögeyi Velo by Wix ile nasıl kullanacağınızı öğrenmek için buraya tıklayın
Bu içerik yardımcı oldu mu?
|