JekCMS v1.6.0 Önizleme: Blok Editör ve Yapay Zeka Araçları

Neden Blok Editör

Geçtiğimiz bir yıl boyunca JekCMS standart bir TinyMCE zengin metin editörü kullandı. Çalışıyor, ancak içeriği yapısal farkındalığı olmayan tek bir HTML yığınına zorluyor. Bölümleri kes-yapıştır olmadan yeniden sıralayamazsınız. Bir ürün karşılaştırma tablosunu yeniden kullanılabilir bir bileşen olarak kaydedemezsiniz. Bir galeriyi bir metin bölümünün üzerine HTML'i elle düzenlemeden sürükleyemezsiniz.

WordPress bunu Gutenberg ile çözdü, ama muazzam bir maliyetle — 400KB JavaScript, React bağımlılığı, kod tabanı karmaşıklığını üçe katlayan bir REST API yüzey alanı ve teknik olmayan kullanıcıları çok fazla seçenekle kafa karıştıran bir düzenleme deneyimi. Biz blokların yapısal faydalarını bu yük olmadan istedik.

Tasarım Kısıtlamaları

Herhangi bir kod yazmadan önce üç katı limit belirledik:

• 60KB altı JavaScript (minified + gzipped). Gutenberg 400KB+ gönderir. Hedefimiz %85 daha küçük.
• Framework bağımlılığı yok. İnce bir reaktif katmanla vanilla JS. React, Vue veya Svelte yok.
• Geriye uyumlu. Mevcut TinyMCE içeriği doğru render etmeli. Bloklar bir seçenek, zorunluluk değil.

Blok Mimarisi

Her blok, bir tür, nitelikler ve iç içerik içeren bir JSON nesnesidir. Editör bu nesnelerin bir dizisini saklar. Frontend'de bir renderer her bloğu HTML'e dönüştürür.

// Blok veri yapısı
{
  "blocks": [
    {
      "type": "heading",
      "attrs": { "level": 2 },
      "content": "JekCMS ile Başlangıç"
    },
    {
      "type": "paragraph",
      "attrs": {},
      "content": "JekCMS hafif bir içerik yönetim sistemidir..."
    },
    {
      "type": "image",
      "attrs": {
        "src": "images/2026/04/kurulum-rehberi.avif",
        "alt": "JekCMS kurulum ekranı",
        "width": 800,
        "height": 500,
        "caption": "Kurulum sihirbazı"
      }
    },
    {
      "type": "code",
      "attrs": { "language": "php" },
      "content": "<?php
echo 'Merhaba Dünya';
?>"
    }
  ]
}

Depolama basit: blok JSON'u mevcut content sütununun yanında bir content_blocks sütununa gider (geriye uyumluluk ve hızlı frontend sunumu için render edilmiş HTML'i tutar). Bir yazı kaydedildiğinde, renderer blokları HTML'e dönüştürür ve her iki sütunu da yazar.

Blok Türleri (Lansman Seti)

Sürüm 1.6.0 on blok türüyle gelecek:

• Paragraf — Satır içi biçimlendirmeli standart metin (kalın, italik, bağlantı, kod)
• Başlık — İçindekiler tablosu için otomatik anchor ID oluşturmalı H2'den H4'e
• Görsel — Altyazı, alt metin ve hizalama seçenekleriyle tek görsel
• Galeri — Lightbox'lu görsel ızgarası, yapılandırılabilir sütunlar (2-4)
• Kod — Dil seçicili sözdizimi vurgulamalı kod bloğu
• Alıntı — İsteğe bağlı atıfla blockquote
• Tablo — Başlık satırı açma/kapama ile düzenlenebilir satır ve sütunlar
• Sütunlar — 2 veya 3 sütunlu düzen, her sütun iç içe blokları kabul eder
• Liste — İç içe geçebilen sıralı ve sırasız listeler
• Ayırıcı — Stil varyantlarıyla yatay çizgi

Sürükle-Bırak ile Yeniden Sıralama

Her blok, sol kenarında bir sürükleme tutamağı olan bir DOM elemanı olarak render edilir. Native HTML5 Drag and Drop API kullanıyoruz — kütüphane yok. Uygulama 180 satır JavaScript.

// block-editor.js - Sürükleme işleyici (basitleştirilmiş)
class BlockEditor {
    constructor(container) {
        this.container = container;
        this.blocks = [];
        this.dragIndex = null;
    }

    initDrag(blockEl, index) {
        blockEl.setAttribute('draggable', 'true');

        blockEl.addEventListener('dragstart', (e) => {
            this.dragIndex = index;
            blockEl.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
        });

        blockEl.addEventListener('dragover', (e) => {
            e.preventDefault();
            const target = this.getBlockFromPoint(e.clientY);
            if (target !== null && target !== this.dragIndex) {
                this.moveBlock(this.dragIndex, target);
                this.dragIndex = target;
            }
        });

        blockEl.addEventListener('dragend', () => {
            blockEl.classList.remove('dragging');
            this.save();
        });
    }
}

Kilit karar, bloklar arasındaki drop bölgeleri yerine dikey konum hesaplamasıyla dragover kullanmaktı. Bu, sürüklerken gerçek zamanlı görsel geri bildirim verir — bloklar fiziksel olarak kenara kayar, tıpkı bir mobil uygulamada öğeleri yeniden sıralar gibi.

Yapay Zeka İçerik Önerileri

1.6.0'ın ilgi çekici hale geldiği yer burası. Üç yapay zeka özelliğini doğrudan editöre entegre ediyoruz, tümü Gemini API ile destekleniyor (hıza duyarlı işlemler için planlanan Groq yedekleme ile).

Özellik 1: Başlık Oluşturma

İçerik yazdıktan sonra araç çubuğundaki "Başlık Öner" düğmesine tıklayın. Sistem içeriğinizin ilk 500 kelimesini Gemini'ye gönderir ve CTR ve SEO için optimize edilmiş beş başlık varyasyonu ister. Her öneri tahmini karakter sayısını gösterir (Google ~60 karakterde kırpar) ve bir hedef anahtar kelime belirlenmişse onu vurgular.

// Yapay zeka başlık önerisi promptu (dahili)
$prompt = "SEO başlık yazarısın. Bu makale içeriğine göre 5 başlık öner.
Kurallar:
- Her biri 60 karakterin altında
- Anahtar kelimeyi dahil et: {$keyword}
- Doğal olduğunda sayılar veya güçlü kelimeler kullan
- Clickbait yok, gerçekten faydalı değilse soru yok
- Yapıları çeşitlendir (nasıl yapılır, liste, ifade, karşılaştırma)

İçerik (ilk 500 kelime):
{$excerpt}";

Özellik 2: Meta Açıklama Oluşturma

Aynı konsept, ama meta description alanı için. Yapay zeka tam yazı içeriğini okur ve her biri 155 karakterin altında üç meta açıklama seçeneği üretir. Anahtar kelimeyi vurgular ve karakter sayısını gerçek zamanlı gösterir.

Özellik 3: Alt Metin Oluşturma

Bir bloğa görsel yüklediğinizde, sistem görseli otomatik alt metin oluşturma için Gemini'nin görsel modeline gönderebilir. Bu isteğe bağlı — görsel bloğundaki "Otomatik Alt" düğmesine tıklayarak tetiklenir. Oluşturulan alt metin her zaman düzenlenebilir.

Bunu yükleme sırasında otomatik yapmamayı kasıtlı olarak tercih ettik. Geliştiriciler ve içerik oluşturucular alt metni incelemeli, yapay zeka çıktısına körü körüne güvenmemeli. Düğme bunu bilinçli bir seçim yapar.

Yapay Zeka Görsel Üretimi

Beta test kullanıcılarımızdan en çok talep edilen özellik: doğrudan editörden öne çıkan görseller ve satır içi illüstrasyonlar üretmek.

Nasıl Çalışır

Yeni bir "Görsel Üret" blok türü, metin prompt alanıyla bir modal açar. Sistem promptu Gemini'nin görsel üretim modeline gönderir ve 1200x630 görsel döndürür (Open Graph paylaşımı için optimize edilmiş). Üretilen görsel otomatik olarak AVIF'e dönüştürülür, thumbnail'ler oluşturulur ve görsel medya kütüphanesine eklenir.

// Görsel üretim akışı
1. Kullanıcı prompt yazar: "PHP kod editörü gösteren laptop profesyonel fotoğrafı"
2. Sistem stil kısıtlamaları ekler: "editöryal fotoğrafçılık, metin katmanı yok, 1200x630"
3. Gemini görsel üretir → base64 PNG döndürür
4. PHP işler:
   a. Base64 decode → geçici PNG kaydet
   b. AVIF'e dönüştür (kalite 80)
   c. WebP fallback üret
   d. Thumbnail oluştur (400x400, 800x500, 1600x1000)
   e. Otomatik oluşturulmuş alt metinle media tablosuna ekle
5. Tüm metadata ile görsel bloğu ekle

Maliyet Yönetimi

Görsel üretimi ücretsiz değil. Bir token bucket sistemi uyguluyoruz: her site yapılandırılabilir bir aylık kota alır (Pro lisans için varsayılan 50 üretim/ay, Agency için 200). Admin ayarlar sayfası mevcut kullanımı, kalan kotayı ve tahmini maliyeti gösterir.

Şablon Blokları

Şablon bloğu, grup olarak eklenebilen kaydedilmiş bir blok kombinasyonudur. Örneğin, bir "Ürün İncelemesi" şablonu şunları içerebilir:

• H2 başlık bloğu (ürün adı)
• Görsel bloğu (ürün fotoğrafı)
• İki sütunlu sütunlar bloğu: Artılar listesi + Eksiler listesi
• Tablo bloğu (teknik özellikler)
• Paragraf bloğu (sonuç)

Şablonlar bir block_templates tablosunda saklanır ve yeni blok eklerken bir açılır menüde görünür. Site bazlıdır, böylece her kurulum kendi şablonlarına sahip olabilir.

Dışa/İçe Aktarma

Şablonlar JSON dosyaları olarak dışa aktarılabilir ve diğer JekCMS kurulumlarına içe aktarılabilir. Bu, ajansların bir içerik şablonu kütüphanesi oluşturmasına ve müşteri sitelerine dağıtmasına olanak tanır.

// Şablon dışa aktarma formatı
{
  "name": "Ürün İncelemesi",
  "description": "Artılar/eksilerle standart ürün inceleme düzeni",
  "blocks": [
    { "type": "heading", "attrs": { "level": 2 }, "content": "{{urun_adi}}" },
    { "type": "image", "attrs": { "placeholder": true, "alt": "{{urun_adi}} fotoğrafı" } },
    { "type": "columns", "attrs": { "count": 2 }, "children": [
      { "type": "list", "attrs": { "style": "ul", "title": "Artılar" }, "content": "" },
      { "type": "list", "attrs": { "style": "ul", "title": "Eksiler" }, "content": "" }
    ]},
    { "type": "table", "attrs": { "header": true, "cols": 2 }, "content": [["Özellik", "Değer"]] },
    { "type": "paragraph", "content": "" }
  ],
  "variables": ["urun_adi"]
}

Şablonlardaki {{değişken}} sözdizimi, şablon eklendiğinde gerçek değerlerle değiştirilir. Küçük bir modal her değişken için sorar.

Teknik Mimari

Veritabanı Değişiklikleri

ALTER TABLE posts ADD COLUMN content_blocks JSON DEFAULT NULL AFTER content;
ALTER TABLE posts ADD COLUMN editor_type ENUM('classic','blocks') DEFAULT 'classic';

CREATE TABLE block_templates (
    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    blocks JSON NOT NULL,
    variables JSON DEFAULT NULL,
    author_id INT UNSIGNED,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

Editör Yükleme

Editör JavaScript dosyası sadece yazı editörü sayfasında yüklenir — her admin sayfasında değil. Tek dosya, chunk veya lazy loading karmaşıklığı yok. Sayfa yüklendiğinde, gizli bir textarea'dan content_blocks JSON'unu okur ve her bloğu düzenlenebilir bir DOM yapısına render eder. Kaydetme sırasında DOM'u tekrar JSON'a serileştirir ve aynı anda HTML önizlemesini oluşturur.

Frontend Rendering

Frontend hiçbir zaman blok JSON'una dokunmaz. Bugünkü gibi content sütunundan önceden render edilmiş HTML'i okur. Bu şu anlama gelir:

• Blok içeriği için frontend'de sıfır JavaScript gerekli
• Mevcut temalar değişiklik olmadan çalışır
• RSS feed'ler, API yanıtları ve arama indekslemesi değişmeden çalışır
• Sayfa yükleme performansı klasik editör yazılarıyla aynı

Zaman Çizelgesi

Sürüm 1.6.0 şu anda dahili testte. Blok editör çekirdeği ve on blok türünün tümü işlevsel. Yapay zeka özellikleri alfa aşamasında — başlık ve meta açıklama oluşturma çalışıyor, alt metin ve görsel üretimi hâlâ ayarlanıyor.

2026 Q2'de yayınlamayı hedefliyoruz. Güncelleme standart JekCMS güncelleme sistemi aracılığıyla mevcut olacak. Mevcut içerik etkilenmeyecek — klasik editör, bir yazıyı açıkça blok moduna geçirene kadar varsayılan olarak kalır.

Blok editörü test etmek için erken erişim istiyorsanız, admin panelinin destek kanalından ulaşın. Aktif Pro ve Agency lisans sahiplerinden on beta test kullanıcısı kabul ediyoruz.