Dizgem CMS Dokümantasyonu

Dizgem CMS'i kurmak, kullanmak ve temalar geliştirmek için ihtiyacınız olan her şey burada.

Bölüm 1: Genel Bakış

Dizgem Nedir?

Dizgem, açık kaynak kodlu bir CMS otomasyonudur. Kullanmak veya ek özellikler geliştirerek GitHub üzerinden yayınlanabilir; yalnızca orijinalindeki emeğe saygıdan credit verilmesi yeterlidir. Projeye katkıda bulunmak isteyen kişiler heyecanla beklenmektedir. .NET 8 mimarisi ile esnek ve geliştirici dostu yapısı ile hem Windows hem de Linux sistemlerde çalışması hedeflenmiştir.

Ana Özellikler

  • Blog yazısı oluşturma, yeni web sayfası oluşturma ve yayınlama.
  • Oluşturulan yazıları ve sayfaları kategorize ederek hem erişimi kolaylaştırmak hem de SEO dostu bir yapı oluşturmak.
  • HTML bilgisi olan kişiler için özel tema oluşturmaya imkan tanıyarak sıfırdan bir CMS projesi oluşturma sürecinden kurtarmak.

Hedef Kitle

  • WordPress gibi global CMS platformlarının nasıl çalıştığını merak eden fakat gerekli PHP bilgisine sahip olmayan geliştiriciler için C# tabanlı esnek bir CMS platformu sağlamak.
  • Basit ve sade bir yapı ile sadece HTML bilen kişiler için tema yapma imkanı ile kendini test etmek isteyen kişiler.

Bölüm 2: Kurulum Rehberi

Sunucu Gereksinimleri

  • Windows: .NET 8 destekli IIS Sunucu
  • Linux: .NET 8 destekli Nginx sunucu
  • Veritabanı: MSSQL Server (Bu versiyon için, ileride PostgreSQL ve MongoDB eklenecek)

Kurulum Adımları

  1. Proje dosyalarını sunucunuza yükledikten sonra siteyi tarayıcıda açtığınızda otomatik olarak /Install ekranına yönlendirilirsiniz.
  2. Bu aşamada sizden istenen bilgiler:
    • Veritabanı Bilgileri: Sunucu adresi (Örn: localhost), veritabanı adı, kullanıcı adı ve şifre.
    • Site Ayarları: Sayfa başlığı ve açıklaması.
    • Yönetici Bilgileri: Yönetim paneline giriş için kullanıcı adı, e-posta adresi ve şifre.
  3. Gerekli bilgileri girdikten sonra kurulum otomatik olarak tamamlanır ve yönetici paneline giriş yapabilirsiniz.
  4. Kurulum sonrası CMS içerisinde bulunan "Default" isimli tema otomatik olarak aktif olur. Artık direkt olarak Blog Yazısı (Post) veya Sayfa (Page) oluşturmaya başlayabilirsiniz.

Bölüm 3: Tema Geliştirme

Temel Tema Yapısı

Her tema, projenin ana dizinindeki /Themes klasörü altında kendi adını taşıyan bir klasörde bulunur. Standart bir tema klasör yapısı aşağıdaki gibi olmalıdır:

/Themes/
└── /TemaAdi/
    ├── /assets/
    │   ├── style.css
    │   └── script.js
    ├── /Home/
    │   └── Index.cshtml
    ├── /Page/
    │   └── Detail.cshtml
    ├── /Post/
    │   ├── Index.cshtml
    │   └── Detail.cshtml
    ├── /Shared/
    │   └── _Layout.cshtml
    ├── theme.json
    └── screenshot.png

theme.json Dosyası

Bu dosya, temanızın kök dizininde bulunmalı ve CMS'e temanız hakkında bilgi vermelidir. Menü konumları gibi kritik ayarlar buradan okunur.

{
  "name": "Dizgem Varsayılan Tema",
  "version": "1.0.0",
  "author": "Dizgem Geliştirici Ekibi",
  "description": "Dizgem için resmi, temiz ve modern varsayılan tema.",
  "screenshotUrl": "",
  "menuLocations": {
    "primary_navigation": "Ana Menü (Header)",
    "footer_navigation": "Alt Bilgi Menüsü (Footer)",
    "social_links_menu": "Sosyal Medya Linkleri Menüsü"
  }
}

Verilere Erişim

Tema dosyalarınızda (View'lar) Dizgem'in servislerine ve yardımcı sınıflarına erişmek için, temanızın kök dizininde bulunan /Themes/_ViewImports.cshtml dosyasına gerekli tanımlamaları yapmanız gerekir. Bu dosya kesinlikle silinmemelidir!

@* Themes/_ViewImports.cshtml *@
@using Dizgem
@using Dizgem.Models
@using Dizgem.ViewModels
@using Dizgem.Helpers
@using Microsoft.AspNetCore.Html

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@inject Dizgem.Services.IPostService postService
@inject Dizgem.Services.IPageService pageService
@inject Dizgem.Services.IThemeService SettingsService
@inject Dizgem.Services.IMenuService MenuService

Menüleri Gösterme

theme.json dosyasında tanımladığınız bir menü konumunu render etmek için _Layout.cshtml dosyanızda aşağıdaki kodu kullanabilirsiniz. "primary_navigation" alanı, theme.json dosyanızdaki anahtar ile eşleşmelidir.

@await MenuService.RenderMenuAsync("primary_navigation")

SEO Meta Etiketlerini Oluşturma

Dizgem, sayfanın içeriğine göre (yazı, sayfa veya ana sayfa) SEO ve sosyal medya paylaşım etiketlerini otomatik olarak oluşturur. Bu etiketleri <head> bölümüne eklemek için _Layout.cshtml dosyanızda şu kodu kullanmanız yeterlidir:

@DizgemHelper.CreateMetaTags(SettingsService, Context.Request, Model as Post ?? Model as Page)

Arşiv Listesini Gösterme

Blog yazılarını aylara göre gruplandırılmış bir arşiv listesi olarak göstermek için aşağıdaki kodları kullanabilirsiniz:

@* Önce veriyi çekin *@
@{
    var archives = await postService.GetPostArchiveAsync();
}

@* Sonra HTML'i oluşturun *@
<ol class="list-unstyled mb-0">
    @if (archives != null && archives.Any())
    {
        foreach (var archive in archives)
        {
            <li>
                <a asp-route="PostArchive" asp-route-year="@archive.Year" asp-route-month="@archive.Month">
                    @archive.MonthName @archive.Year (@archive.PostCount)
                </a>
            </li>
        }
    }
</ol>

View Modelleri ve Referanslar

Her view dosyasının başında, o sayfada hangi tür verinin beklendiğini belirten bir @model direktifi olmalıdır.

Yazı Listeleme (Post/Index.cshtml)

Bu sayfa, yazı özetlerini ve sayfalama bilgilerini içeren PostIndexViewModel'ı kullanır.

@model PostIndexViewModel

@foreach (var post in Model?.Posts ?? Enumerable.Empty<PostSummaryViewModel>())
{
    <article>
        <h2>
            <a asp-route="PostDetail" asp-route-slug="@post.Slug">@post.Title</a>
        </h2>
        <p>@post.Excerpt</p>
    </article>
}

@* Sayfalama linkleri için örnek *@
<nav>
    @if (Model.HasPreviousPage)
    {
        <a href="/Post?page=@(Model.CurrentPage - 1)">Önceki Sayfa</a>
    }
    @if (Model.HasNextPage)
    {
        <a href="/Post?page=@(Model.CurrentPage + 1)">Sonraki Sayfa</a>
    }
</nav>

PostIndexViewModel şu özellikleri içerir:

public class PostIndexViewModel
{
    public List Posts { get; set; }
    public int CurrentPage { get; set; }
    public int TotalPages { get; set; }
    public bool HasPreviousPage => CurrentPage > 1;
    public bool HasNextPage => CurrentPage < TotalPages;
}

Yazı Detayı (Post/Detail.cshtml)

Bu sayfa, tüm detaylarıyla tek bir Post nesnesini model olarak alır. İçeriği göstermek için @Model.RenderedContent kullanılır.

@model Post

<h1>@Model.Title</h1>
<div>
    @Model.RenderedContent
</div>

Sayfa Detayı (Page/Detail.cshtml)

Bu sayfa, tüm detaylarıyla tek bir Page nesnesini model olarak alır. İçeriği göstermek için @Model.RenderedContent kullanılır.

@model Page

<h1>@Model.Title</h1>
<div>
    @Model.RenderedContent
</div>