Blogengine Tema Yapımı

Güncelleme 13/08/2010: Bu yazım blogengine tarafından türkçe kaynak olarak gösterilmiştir.

Yazıya geçmeden önce blogumdaki  ilk en uzun yazı oldu. Dolayısı ile bir ön uyarıda koymak istedim. Bu yazı BlogEngine kullanmasını bilen yada yeni başlamış, daha önce blog kullanmış ama ilk defa blogengine kullanacak kimseler için hem tema yapımını hemde blogengine'in yapısını anlamak isteyenler için uygun yazıdır. Yazı daha çok Visual Studio kullanarak BlogEgine ile nasıl çalışılır üzerine yoğunlaşmakta olup, BlogEngine'in yönetim paneli kullanımı üzerinde durulmamıştır.

Neden BlogEngine?

Blogumu açtığımda kısmende olsa blogengineden biraz bahsetmiştim. Blogengine .Net'in gücünü arkasına alarak size standart bir blog için neredeyse tamamı düşünülmüş blog özellikleri ve ihtiyaçları ile birlikte gelir. C# ile .Net'de uygulamalar geliştiriyor ve bir web sitesi ile web uygulaması arasındaki farkları görme imkanı, kendi widget ve controlleriniz ile genişletebileceğiniz bir altyapı sunar. Normal şartlar altında database'e ihtiyaç duymaz. Datalarınızı XML'de tutar. Buda taşınabilirlik açısından kolaylık sağlar. Ancak dilerseniz (Özellikle blogunuz büyüdüğünde performans için) bir databasede kullanabilirsiniz. Türkçe dil desteği ise ASP.NET Globalization sayesinde otomatik olarak zaten gelmektedir. Çevirilerden memnun kalmazsanız Türkçe resource dosyalarınıda kolaylıkla düzenleyebilirsiniz.

Blogengine Framework 2.0'ı kullanmaktadır. Geliştirme yaparken yazdığınız kodlarda bunu göz önünde bulundurmalısınız.

BlogEngine İle Çalışmaya Başlamak?

Eğer Web Platform Installer kullanıyorsanız buradan indirebilirsiniz. ( Web Platform Installer an itibari ile 2.0 versionuna gelmiş durumda, Microsoft'un web geliştiricileri için Windows ortamında ihtiyaç duyabileceği hemen hemen tüm araca kolaylıkla ulaşıp kurmanızı sağlar. Bu araç ile sadece ASP.NET developerları değil PHP ile uygulama geliştirenlerde düşünülmüş durumda olup Windows ortamı için ihtiyaçları olan PHP Runtimelarını kurup IIS üzerinde uygulama geliştirebilirler.)

BlogEngine'i manuel kurmak (Daha doğrusu projeyi bilgisayarınıza indirip çalışmak ) için tıklayın.

BlogEngine Data Access ve Business Logic katmanı BlogEngine.Core altında. Burası BlogEngine de Class Library olarak hazırlanmış. Presantation Katmanı yani sunum katmanı ise BlogEngine.Net Web sitesi olarak hazırlanmış.

Eğer BlogEngine.Core üzerinde değişiklik yapmayacaksanız. BlogEngine.NET 1.6.1 (web) linkinden Web Sitesi projesini indirmeniz yeterli. 

Eğer BlogEngine.Core Class Library ile birlikte indirmek isterseniz BlogEngine.NET 1.6 (source) linkinden indirin. 

C# ile hali hazırda uygulama geliştiriyorsanız benim tavsiyem source olarak indirmeniz.

BlogEngine'in web olarak indirmiş olanlar sıkıştırılmış dosyayı açtıktan sonra Visual Studio ile File >> Open >> Web Site 'dan projeyi açabilirler.

Eğer source olarak indirdiyseniz File >> Open >> Project/Solution menüsünden BlogEngine.sln ile Solution olarak açınız. 

Solution olarak açtığınızda Solution Explorerda aşağıdaki projenizi resimdeki gibi göreceksiniz. 

Terchinizi web paketinden kullandıysanız BlogEngine.Core projenizde bulunmaz Bin klasörü altında derlenmiş olarak BlogEngine.Core.dll adı ile bulunmaktadır.

BlogEngine Tema Yapımı

Sonunda yazımızın asıl konusuna geldik. BlogEngine'de tema yapımı birkaç püf noktayı bildikten sonra oldukça basittir. Tema yapımına geçmeden önce ilk defa tema yapacaklar için "Blog" yapısı hakkında birkaç cümle yazmamız faydalı olacaktır. 

Bloglar temel olarak Post (Gönderi) ve Sayfalardan oluşur. Blogla ilk tanışanlar için bu yapı biraz kafa karıştırabilir. Post sizin yazılarınızı girerek oluşturduğunuz sayfalardır. Sayfalar ise daha çok Hakkımda, İletişim gibi daha statik değerlendirebileceğimiz sayfalardır. Postlar Etiketlendirilir ve Kategorilerileri olur. Sayfaların ise (normal şartlar altında) etiketleri ve kategorileri olmaz. Örneğin benim blogumda şuan okuduğunuz sayfa bir post sayfasıdır (yada post yazısıdırda diyebiliriz). Sağ üst linklerde bulunan Hakkımda, İletişim ise statik sayfalardır. Post sayfalarınız verdiğiniz etiketler ve kategoriler ile gruplandırılır. Bu sayede aynı etikete sahip postlarınız yada aynı kategorideki postlarınız gruplandırılarak bir arada gösterilir. Google'ın blogları daha çok sevmesinin altında bu gruplandırmanın (Google gözü ile klasörlendirmenin) önemi büyüktür. Konuyla ilgili bu yazımda paylaştığım rehberden detaylı bilgi alabilirsiniz. Klasik Bloglarda ana sayfalar genellikle postların alt alta özetleri yada tamamı sayfalara ayrılmış olarak gösterilen sayfalardır. Yine ana sayfada bir sütunda widgetlar gösterilir. Bu widget alanında En Çok Okunan Yazılar, Son Yorumlar, Kategoriler, Etiketler gibi widgetlar olur. (Bunlarda site içi link kurulumunda önemlidir). Post sayfalarında Ana Sayfadan farklı olarak post yazısının tamamı gösterilir post yazısı ile ilgili yazılara linkler ve yorumlar yine burada bulunur. Dikkat ederseniz hangi sayfada olursa olsun temelde tasarım değişiklik göstermez ve kendini tekrar eden bir yapısı vardır. Tabii bu sözünü ettiğimiz özellikler klasik bir blog için geçerlidir. Özellikle son yıllarda blog yaklaşımını alıp işi içerik yönetimine kadar götürülmüştür. Biz temamızı öncelikli olarak klasik bir blogun ihtiyaçları göz önünde bulundurarak hazırlayacağız.

BlogEngine Tema Yapısı

BlogEngine'de tema lar Themes klasörü altında bulunmaktadır. 

Temalar temelde site.master adında bir master page ve CommentView.ascx, PostView.ascx adında 2 tane user controlden ve ekleyeceğiniz css dosyanızdan oluşur. contact.aspx, login.aspx, post.aspx, page.aspx ve diğer aspx sayfaları site.master master page'ini kullanırlar.

Hazırlardığımız yada internetden "free" olarak edindiğimiz kullanımı serbest tasarımı (Ben yazımda kullanımı free olan şu tasarımı kullanıcam) uyarlamak için öncelikle themes klasörü altına temamız için klasör oluşturalım. Ben tasarımcının kullandığı ismi yani Programme'yi tercih ettim. Tasarımımızda bulunan .css dosyalarını ve imajları solution explorer'a sürükle bırak yaparak oluşturduğumuz klasöre kopyalıyalım.

Oluşturduğumuz klasörde site.master adında bir master page ekliyelim. (Select master page işaretli olmamalı!)

<%@ Import Namespace="BlogEngine.Core" %>

Yukarıdaki namespace'i master page'imize ekliyoruz. Bu sayede BlogEngine Class ve Methodlarını design tarafındaki kodlarımızda kullanabileceğiz.

css dosyamızı Solution explorerdan Head tagleri arasına sürükle bırak yapalım. Aşağıdaki şekilde master page'imize eklemiş olduk.

<link href="style.css" rel="stylesheet" type="text/css" />

<link rel="shortcut icon" href="~/pics/blogengine.ico" type="image/x-icon"/>

Şeklinde blogengine'in favicon'unu (Tarayıcılarda adresin solunda görülen icon) ekliyelim. Burada dikkat etmenizi istediğim konu ~ ile yazıldığı ASP.NET 'e yabancı olamayanlar bunun server tarafında kod işlenirken rootdan yola çıkacağıdır. (Klasik htmlde klasör  yolunun başına koymamız  / gibi). Bu sayede /post/ klasörü altındada olsa sayfalar ımız server dogru şekilde klasör yolunu konumlandıracak. <head></head> tagleri arasına koymak istediğiniz diğer Meta tagleri şimdilik dert etmeyin onları yönetim panelindende ekleyebilirsiniz. Bir çok Meta tag'i (keywords, description) blogengine zaten bizim adımıza otomatik yaratacak. Neleri kendisi eklemiş baktıktan sonra siz ekstra eklemek istediklerinizi ekleyin.

<head></head> tagleri arasına gelmiş olan varsa aşağıdaki kodlarıda master page'imizden silelim.

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

<title></title> taglerinide silebiliriz. Çünkü BlogEngine bizim yerimize title'i yönetecek o yüzden tasarım tarafında bulunmasına ihtiyacımız yok.

Son olarak <form> tag'i içerisindeki tüm kodlarıda silelim.

    <form id="form1" runat="server">
 
    </form>

İndirdiğimiz yada hazırladığımız html dosyamızdan (Benim tasarımımda index.html) <body></body> tagleri arasındaki html kodlarımızı master page'imizin temizlediğimiz  <form></form> tagleri arasına kopyalayalım.

Hemen F5'e basmayın sabredin :) Biraz daha kod yazıcaz ;)

html'imizde blogengine üzerinden ayarlayacağımız (yada ayarladığınız) Blog Başlığı ve Slogan ın yerini bulalım.

Benim uyarladığım tasarımımda aşağıdaki gibi...

<div id="logo">
<h1><a href="#">Programme  </a></h1>
<p> design by <a href="http://www.freecsstemplates.org/"> CSS Templates</p>
</div>

BlogEngine nesne yönelimlidir. Yani neredeyse herşey class'lardadır.  Dolayısıyla sizin yönetim panelinde yaptığınız ayarlamalarda BlogSettings.Instance altında bulunur. Instance 'dan Name ve Description propertyleri ile Blog ismini ve sloganı alıcaz.

Dolayısı ile aşağıdaki şekilde değişikliği gerçekleştiriyoruz.

<div id="logo">
<h1><a href="<%=Utils.AbsoluteWebRoot %>"><%= BlogSettings.Instance.Name %></a></h1>
<p><%= BlogSettings.Instance.Description %></p>
</div>

Söylediklerime ek birşey var ;). Utils.AbsoluteWebRoot ilede uygulamamızın çalıştığı root klasör yolunu alıyoruz. ~/default.aspx yazmaktan yazsanızda olurdu. Uygulamamız alt klasörde (benim blogumdan olduğu gibi) çalışıyor ve webapplication olarak tanımlandı ise faydalı olur.

Sıra geldi menümüze benim html'im aşağıdaki gibi.

<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Bunu aşağıdaki hale getirerek, Ana sayfamıza (yukarıda Utils.AbsoluteWebRoot da anlattıklarımıza dikkat edin) contact.aspx imize ve archive.aspx'e linkler veriyoruz.

<div id="menu">
<ul>
<li><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/">Ana Sayfa</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/page/hakkimda.aspx">Hakkımda</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/contact.aspx">İletişim</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/archive.aspx">Arşiv</asp:HyperLink></li>
<li><asp:LoginStatus ID="LoginStatus1" runat="server" LoginText="Giriş" /></li>
</ul>
</div>

<asp:LoginStatus ID="LoginStatus1" runat="server" LoginText="Giriş" /> dikkatinizi çekmiş olmalı. BlogEngine ASP.NET Membership'i tam olarak destekler. Dolayısı ile ASP.NET Membership ile gelen tüm özellikleri kullanabilirsiniz. Siz ana menüde giriş linki istemezseniz  dikkat çekmicek bir yerede koyabilirsiniz. Yada koymamayı tercih edebilirsiniz ancak bu durumda giriş için /login.aspx kendiniz manuel gitmelisiniz.

Hakkımda linkine dikkat ederseniz ~/page/hakkimda.aspx şeklinde yol verilmiş. Ancak henüz böyle bir sayfamamız yok. İlerde oluşturacağımız sayfaya göre öngörüp isim verdik. BlogEngine sayfaların urlleri /page/ ile oluşmakta ve verdiğimiz isim siz Benim Hakkımda ismini verecekseniz. ~/page/benim-hakkimda.aspx diyebilirsiniz şimdilik buna takılmayın. Oluşturduğunuz Hakkımda sayfanın adresine göre burayı düzenleyebilirsiniz.

Sıra geldi blog ile ilgili yazarken söylediklerimiz arasında bulunan Widget yapısına blog engine widget destekler. Ve dilerseniz kendinizde widgetlar yazabilir yada internetten bulduklarınızı implemente edebilirsiniz.

Ben Widget sütunumda örneğin Kategorilerimin görünmesini istiyorum. Bunun için iki yolunuz var ya WidgetZone belirler bu alan içerisinde dilediğiniz zaman dilediğiniz Widget ekler ve yerini değiştirebilirsiniz yada Widgetları Manuel kendiniz ekleyebilirsiniz. 

Biz önce manuel eklemenin yolunu gösterelim ama 2. yolu tercih edelim :)

Manuel eklemek için Kategory listenizin görünmesini istediğiniz yere aşağıdaki kodu yazmanız yeterli

<blog:CategoryList ID="CategoryList1" ShowRssIcon="false" runat="server" />

Evet yanlış görmediniz :) BlogEngine ile gelen kontrolleri bir ASP.NET nesnesi olarak kullanabiliriz blog etiketi altındakileri inceleyin.

Biz ikinci yolu tercih ederek devam edelim. Zira iyi kodlanmış bir websitesinde bir değişiklik yapmak için en son tasarıma gidilmeli. Biz widgetzone kullanarak widget eklerken, çıkarırken bir daha masterpage'imizi açıp değişiklik yapmak istemiyoruz. Benim tasarımımda widget sütunu

<div id="sidebar">
...
</div>

olarak belirlenmiş.

Bu div içerisini siliyorum ve aşağıdaki hale getiriyorum.

<div id="sidebar">
<blog:WidgetZone ID="WidgetZone1" runat="server" ZoneName="be_WIDGET_ZONE" />
</div>

Siz default kurulumda eklenmiş widgetlar ile sorun yaşamamak adına WidgetZone'un ZoneName'ini be_WIDGET_ZONE olarak bırakın. Aksi halde nereye geleceklerini bilemezler. (ASP.NET ID'si clientside'da değişken id olduğu için Widgetların sırası ve yeri ZoneName adı kullanarak tutuluyor BlogEngine'de)

Sıra geldi Footer'ımıza. Biz tasarımda footer'a gelmeden sıkılıp bırakanlardan olmıyalım ;)

<div id="footer">
<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p>
</div>

şeklinde olan kısmı şu şekilde değiştiriyorum

<div id="footer">
<p>Copyright (c) <%= DateTime.Today.Year.ToString() %> <%= BlogSettings.Instance.Name%>. Tüm Haklarını Uğraştık Sakladık Bulana Aşk Olsun :P. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p>
    <p>Powered by <a href="http://www.dotnetblogengine.net">BlogEngine.NET</a> <%=BlogSettings.Instance.Version() %></p>
</div>

BlogSettings.Instance.Name'i zaten artık ne olduğunu biliyorsunuz. Dediğim gibi ben iş bittikten sonra tasarıma geri dönmeyi sevmiyorum o yüzden olayı abartıp yılıda DateTime.Today.Year.ToString() ile dinamik olmasını sağlıyorum. Adamlar BlogEngine version nosunu bile property olarak vermişler bizde o kadarcık kod yazalım ;) <%= biliyorsunuz Response.Write anlamına geliyor.

En sonunda Postlarımızın görüneceği alana geldik. Benim tasarımda post yazıları için ayrılmış alan html yapısı aşağıdaki şekilde

<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Programme  </a></h2>
<div class="entry">
<p>This is <strong>Programme  </strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.  This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p><p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
</div>
<div class="byline">
<p class="meta">July 07, 2010 Posted by <a href="#">Someone</a></p>
<p class="links"><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" title="b0x w">Comments</a></p>
</div>
</div>
</div>

Şimdilik <div id="content"></div> içerisini siliyorum ama içindekileride not defterine alıyorum bunları post sayfamız için kullanıcaz. 

İçini sildiğimiz div'imizin içine postlarımızın geleceği ContentPlaceHolder kontrolümüzü ekleyebiliriz.

<div id="content">
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</div>

Burda kesinlikle ID'yi değiştirmeyin. Çünkü BlogEngine bu ID'yi kullanıyor.

Tasarım klasörümüze PostView.ascx user control'ümüzü ekliyelim. Eklerken Place Code Seperate File seçeneği işaretli olmasın. Aslında bunun tek nedeni yeri geldiğinde açıklayacağımız yazıların özetini gösterme özelliğini BlogEngine'in düzgün şekilde kullanabilmesi için. PostView.ascx tahmin edeceğiniz üzere Postlarımızın görüneceği tasarım olmakla birlikte Ana Sayfa, Kategoriler bazında, Etiket bazında sayfalarındada görünmesini sağlayacak.

PostView.ascx 'imize HTML kodlarımızı almadan önce BlogEngine.Core.Web.Controls.PostViewBase class'ını miras almamız gerekli bunun için design bölümünde aşağıdaki şekilde miras alıyoruz.

<%@ Control Language="C#" AutoEventWireup="true" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>

Şimdi kullanacağımız HTML kodlarını tasarım bölümüne kopyalayalım. 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PostView.ascx.cs" Inherits="themes_Programme_PostView" %>
<div class="post">
    <h2 class="title">
        <a href="#">Welcome to Programme </a>
    </h2>
    <div class="entry">
        <p>
            This is <strong>Programme </strong>, a free, fully standards-compliant CSS template
            designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a
                href="http://www.freecsstemplates.org/">CSS Templates</a>. This free template
            is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
                Attribution 3.0</a> license, so you’re pretty much free to do whatever you want
            with it (even use it commercially) provided you keep the links in the footer intact.
            Aside from that, have fun with it :)</p>
        <p>
            Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor,
            elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque
            ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
            egestas at sem.</p>
    </div>
    <div class="byline">
        <p class="meta">
            July 07, 2010 Posted by <a href="#">Someone</a></p>
        <p class="links">
            <a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"
                title="b0x w">Comments</a></p>
    </div>
</div>

<%@ Control Language="C#" AutoEventWireup="true" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>
<div class="post">
<%=AdminLinks %>
    <h2 class="title">
        <a href="<%=Post.RelativeLink %>" title="<%=Server.HtmlEncode(Post.Title) %>"><%=Server.HtmlEncode(Post.Title) %></a>
    </h2>
    <div class="entry">
        <asp:PlaceHolder ID="BodyContent" runat="server" />
    </div>
    <div>
    <%=Rating %>
    </div>
    <div>
        Etiketler: <%=TagLinks(", ") %>
    </div>
    <div>
        Kategoriler: <%=CategoryLinks(" | ") %>
    </div>
    <div class="byline">
        <p class="meta">
            <%= Post.DateCreated %> <a href="<%= Post.AuthorProfile.RelativeLink %>"><%= Post.Author %></a></p>
        <p class="links">
            <a href="<%=Post.RelativeLink %>" title="<%=Server.HtmlEncode(Post.Title) %>">Yazının Devamı...</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"
                title="b0x w">Yorumlar (<%= Post.ApprovedComments.Count.ToString() %>)</a></p>
    </div>
</div>

<%@ Control Language="C#" AutoEventWireup="true" Inherits="BlogEngine.Core.Web.Controls.CommentViewBase" %>

<div id="id_<%=Comment.Id %>" class="vcard comment<%= Post.Author.Equals(Comment.Author, StringComparison.OrdinalIgnoreCase) ? " self" : "
" %>
  <p class="date"><%= Comment.DateCreated %> <a href="#id_<%=Comment.Id %>">#</a></p>
  <p class="gravatar"><%= Gravatar(80)%></p>
  <p class="content"><%= Text %></p>
  <p class="author">
    <%= Comment.Website != null ? "<a href=\"" + Comment.Website + "\" rel=\"nofollow\" class=\"url fn\">" + Comment.Author + "</a>" : "<span class=\"fn\">" +Comment.Author + "</span>" %>
    <%= Flag %>
    <%= ((BlogEngine.Core.BlogSettings.Instance.IsCommentNestingEnabled && Comment.IsApproved) ? " | " : "") %>
    <%= ReplyToLink %>    
    <%= AdminLinks %>
  </p>
  
  <div class="comment-replies" id="replies_<%=Comment.Id %>" <%= (Comment.Comments.Count == 0) ? " style=\"display:none;\"" : "" %>>
 <asp:PlaceHolder ID="phSubComments" runat="server" />
  </div>
  
</div>