Mon Oct 26 2020
...

VanillaJS Tek Sayfa Uygulamalarında FastComments Kullanma

! Bu Makale Teknik Jargon İçermektedir

Hedef Kitle

Bu makale geliştiricilere yöneliktir.

Giriş

FastComments VanillaJS widget’ının en yaygın örnek kullanımı, mevcut sayfa URL'si için yorum dizisini yükleyen çok basit bir kod parçasıdır. Bunun nedeni, bu kullanım durumunun müşterilerimizin büyük çoğunluğu için geçerli olmasıdır, ancak son zamanlarda FastComments kullanan SPA'lar geliştiren geliştiricilerin artışını gördük.

Öncelikle, FastComments'ın özel React ve Vue bileşenleri olduğunu unutmayın, bu yüzden bu kütüphaneleri kullanıyorsanız, FastComments etrafında kendi sarmanızı oluşturmanıza gerek kalmaması için bunlara göz atın.

Ancak eğer uygulamanızı VanillaJS kullanarak geliştiriyorsanız, yorum widget’ını dinamik olarak başlatabilir ve güncelleyebilirsiniz.

Öncelikle URL ve URL ID

FastComments, yorum dizisinin bağlı olduğu sayfa veya makale için iki tanımlayıcıya sahiptir. Konfigürasyon nesnesinde, bunlar "url" ve "urlId" özellikleridir.

URL, yorum widget'ının URL'sidir. İdeal olarak, bu URL'ye uygulamanızın dışından erişebilmelisiniz. Bu, bildirim e-postalarında ve yönetici araçlarında bir bağlantı olarak gösterilecektir.

URL ID, bir URL veya bir ID olan bir dizedir - mevcut sayfayı temsil ettiği sürece herhangi bir değer olabilir. Bir gönderi, makale veya sayfa ID'sine sahipseniz, bu değeri sayfa URL'si yerine kullanabilirsiniz. URL ID'sinin ayrı olmasının nedeni, URL'de sayfaya özgü olmayan ekstra bilgileri depolamak isteyebileceğinizdir.

Widget'ın desteklediği tam yapılandırmayı TypeScript'te GitHub'da belgelerle sağlamış olduğumuzu unutmayın.

Özellikler ve Gerçek Bir Demo

Widget başlatıldığında, normalde çağırdığınız FastCommentsUI fonksiyonunun sonucunu yakalayın:

const config = {tenantId: 'demo'}; const widgetInstance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);

Ardından, yapılandırmayı güncellemek için örnek nesnesinde bir "update" metodunu çağırabilirsiniz. Bu, bileşeni yenileyecektir:

const config = {tenantId: 'demo'}; const widgetInstance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config); widgetInstance.update({ ...config, urlId: getUrlId(), url: getUrl() });

Çalışan bir örneği bu fiddle ile görebilirsiniz.

Bu örnekte document.getElementById kullandığımızı unutmayın, ancak hedef elementi almak için istediğiniz herhangi bir mekanizmayı kullanabilirsiniz.

Dikkat Edilmesi Gerekenler

Sadece "urlId" güncellemek işe yarasa da, hem "urlId" hem de "url" değerlerini güncellemelisiniz, bu değerler aynı olsa bile, böylece bildirim e-postalarındaki ve moderasyon araçlarındaki bağlantılar çalışır. Sadece "url" değerini güncellemek işe yaramaz - yorumlar "urlId" ile bağlıdır.

Sonuç

Bu kılavuzu yararlı bulduğunuzu umuyoruz. Herhangi bir sorunuz varsa aşağıda yorum yapmaktan çekinmeyin.

Sağlıklı günler!

Mon Oct 26 2020...