Intlayer Görsel Düzenleyici Dokümantasyonu

www.youtube.com

Open embedded page in fullscreen

Intlayer Görsel Düzenleyici, web sitenizi bir iframe içine sararak içerik bildirim dosyalarınızla görsel düzenleyici kullanarak etkileşim kurmanıza olanak tanıyan bir araçtır.

intlayer-editor paketi Intlayer'a dayanır ve JavaScript uygulamaları için kullanılabilir, örneğin React (Create React App), Vite + React ve Next.js.

Görsel düzenleyici vs CMS

Intlayer Görsel düzenleyici, yerel sözlüklerinizde içeriğinizi görsel düzenleyici ile yönetmenizi sağlayan bir araçtır. Bir değişiklik yapıldıktan sonra, içerik kod tabanında değiştirilecektir. Bu, uygulamanın yeniden oluşturulacağı ve yeni içeriği görüntülemek için sayfanın yeniden yükleneceği anlamına gelir.

Buna karşılık, Intlayer CMS, uzak sözlüklerinizde içeriğinizi görsel düzenleyici ile yönetmenizi sağlayan bir araçtır. Bir değişiklik yapıldıktan sonra, içerik kod tabanınızı etkilemeyecektir. Ve web sitesi otomatik olarak değiştirilen içeriği görüntüleyecektir.

Intlayer'ı uygulamanıza entegre edin

Intlayer'ı entegre etme hakkında daha fazla detay için aşağıdaki ilgili bölüme bakın:

Next.js ile entegrasyon

Next.js ile entegrasyon için kurulum kılavuzuna bakın.

Create React App ile entegrasyon

Create React App ile entegrasyon için kurulum kılavuzuna bakın.

Vite + React ile entegrasyon

Vite + React ile entegrasyon için kurulum kılavuzuna bakın.

Intlayer Düzenleyici Nasıl Çalışır

Görsel düzenleyici, iki şeyi içeren bir uygulamadır:

• Web sitenizi bir iframe içinde görüntüleyecek bir ön uç uygulaması. Web siteniz Intlayer kullanıyorsa, görsel düzenleyici içeriğinizi otomatik olarak algılayacak ve onunla etkileşim kurmanıza izin verecektir. Bir değişiklik yapıldıktan sonra, değişikliklerinizi indirebileceksiniz.

• İndirme düğmesine tıkladığınızda, görsel düzenleyici sunucuya bir istek göndererek içerik bildirim dosyalarınızı yeni içerikle değiştirecektir (bu dosyalar projenizde nerede bildirilmiş olursa olsun).

Şimdilik, Intlayer Düzenleyici içerik bildirim dosyalarınızı JSON dosyaları olarak yazacaktır.

Kurulum

Intlayer projenizde yapılandırıldıktan sonra, intlayer-editor'ı geliştirme bağımlılığı olarak yükleyin:

npm install intlayer-editor --save-dev

--with bayrağı ile editörü başka bir komutla paralel olarak başlatabilirsiniz:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

Yapılandırma

Intlayer yapılandırma dosyanızda düzenleyici ayarlarını özelleştirebilirsiniz:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... diğer yapılandırma ayarları
  editor: {
    /**
     * Gerekli
     * Uygulamanın URL'si.
     * Bu, görsel düzenleyici tarafından hedeflenen URL'dir.
     * Örnek: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * İsteğe bağlı
     * Varsayılan olarak `true`. Eğer `false` ise, düzenleyici etkin değildir ve erişilemez.
     * Güvenlik nedeniyle üretim gibi belirli ortamlar için düzenleyiciyi devre dışı bırakmak için kullanılabilir.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * İsteğe bağlı
     * Varsayılan olarak `8000`.
     * Düzenleyici sunucusunun portu.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * İsteğe bağlı
     * Varsayılan olarak "http://localhost:8000"
     * Düzenleyici sunucusunun URL'si.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Kullanılabilir tüm parametreleri görmek için yapılandırma dokümantasyonuna bakın.

Düzenleyiciyi Kullanma

1. Düzenleyici yüklendiğinde, düzenleyiciyi aşağıdaki komutla başlatabilirsiniz:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npx intlayer-editor start
   

   Uygulamanızı paralel olarak çalıştırmanız gerektiğini unutmayın. Uygulama URL'si düzenleyici yapılandırmasında ayarladığınızla eşleşmelidir (applicationURL).

Komutun intlayer paketi tarafından yeniden ihraç edildiğini unutmayın. Bunun yerine npx intlayer editor start komutunu kullanabilirsiniz.

2. Ardından, sağlanan URL'yi açın. Varsayılan olarak http://localhost:8000.

   İmlecinizi içeriğinizin üzerine getirerek Intlayer tarafından indekslenen her alanı görüntüleyebilirsiniz.

   

3. İçeriğinizin ana hatları varsa, düzenleme çekmecesini görüntülemek için uzun basın.

Ortam yapılandırması

Düzenleyici belirli bir ortam dosyasını kullanacak şekilde yapılandırılabilir. Bu, geliştirme ve üretim için aynı yapılandırma dosyasını kullanmak istediğinizde yararlıdır.

Düzenleyiciyi başlatırken belirli bir ortam dosyası kullanmak için --env-file veya -f bayrağını kullanabilirsiniz:

npx intlayer-editor start -f .env.development

Ortam dosyasının projenizin kök dizininde bulunması gerektiğini unutmayın.

Veya ortamı belirtmek için --env veya -e bayrağını kullanabilirsiniz:

npx intlayer-editor start -e development

Hata ayıklama

Görsel düzenleyici ile herhangi bir sorunla karşılaşırsanız, aşağıdakileri kontrol edin:

• Görsel düzenleyici ve uygulama çalışıyor.

• Intlayer yapılandırma dosyanızda editor yapılandırması doğru şekilde ayarlandı.

  • Gerekli alanlar:
    • Uygulama URL'si düzenleyici yapılandırmasında ayarladığınızla eşleşmelidir (applicationURL).

• Görsel düzenleyici web sitenizi görüntülemek için bir iframe kullanır. Web sitenizin İçerik Güvenlik Politikası'nın (CSP) CMS URL'sini frame-ancestors olarak izin verdiğinden emin olun (varsayılan olarak http://localhost:8000). Herhangi bir hata için düzenleyici konsolunu kontrol edin.

Sıkça Sorulan Sorular