Açık kaynaklı projelerin en güzel yanı paylaşmak. Projenin bir kısmını veya tümünü internetten yükleyip kodları inceleyebilir , geliştirebilir veya direk kullanabilirsiniz. Temalar farklı platform ve sistemlerde paylaşabilen en geniş bölüm. Her blog sistemindeki temayı BlogEngine temasına çevirmek çok kolay. Blog'un PHP de oluşması da farketmez. Çok az HTML ve CSS biliyorsanız çok rahat bir şekilde şekilde herhangi bir temayı blogengine temasına çevirebilirsiniz.
BlogEngine daha çok yeni ve yavaş yavaş popülerleşmeye başladığı için BlogEngine temaları fazla internete yayılıp tema siteleri açılmadı , fakat internette " blog themes , wordpress themes , blogger themes , blog themes , css blog templates " diye aratırsanız karşınıza yüzlerce site çıkacaktır. Örnek birkaç site;
* BlogEngine Themes
* WordPress Themes
* Top WordPress Themes
İlk önce BlogEngine'ın çalışması için gereken minimum dosyaları ve kodları oluşturalım.
1-) BlogEngineTR 1.4.5 sürümünü indirin. Daha sonra ~\themes klasöründe içinde bir klasör oluşturun bu isim temanın ismi olacak. (Yönetim kısmında Ayarlar menüsünde Tema dropdownlist içinde o isim çıkacak).
2-) Visual Studio veya Visual Web Developer kullanırsanız işinizi daha kolaylaşacak ama herhangi bir text editörü de kullanabilirsiniz. Solution Explorer da yarattığınız klasöre sağ tıklayıp "Add New Item" a tıklayarak veya hiç bir program kullanmadan sadece Windows Explorer ' dan "site.master" isminde Master Page(blogunuzun her sayfasında gözüken şablon ) , "CommentView.ascx"( her yorumdaki görünümü sağlayan yer) ve "PostView.ascx"(her blog yazısındaki görünümü sağlayan yer) isimlerinde Web User Control leri yaratmanız gerekiyor. Dosyaları yarattıktan sonra eğer Visual Studio kullanıyorsanız içlerinde oluşan CS uzantılı dosyalarını silin.
3-) site.master içine aşağıdaki kodu kopyalayın.
<%@ Master Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="BlogEngine.Core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</form>
</body>
</html>
4-) PostView.ascx içine aşağıdaki kodu kopyalayın.
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>
<h1><a href="<%=Post.RelativeLink %>"><%=Server.HtmlEncode(Post.Title) %></a></h1>
<asp:PlaceHolder ID="BodyContent" runat="server" />
5-) CommentView.ascx içine aşağıdaki kodu kopyalayın.
<%@ Control Language="C#" EnableViewState="False" Inherits="BlogEngine.Core.Web.Controls.CommentViewBase" %>
6-) Visual Studio içinden "Run" a tıklarsanız veya localhost içinde ayarlamaları yaptıktan sonra yönetim kısmından temanızı ayarlarsanız , BlogEngine en sade haliyle çalışacaktır.
Temanızı seçerken ilk önce kaç sütun olacağınızı seçmeniz gerekiyor. Eğer 3 sütunlu tema istiyorsanız widgeti (yönetim kısmında blog parçalarını [categorylist , blogroll gibi nesneler] hareket ettirebildiğimiz sistem) ancak tek sutünda kullanabilirsiniz. Widget hayatı kolaylaştıran bir sistem ama eğer 3 sütunda da BlogEngine nesnelerini kullanmak istiyorsanız , hala geçerli olan ve eski sürümlerde tema yapılırken kullanılan yöntemi kullanmanız gerekiyor. Her objeyi <blog:CategoryList> , <blog:SearchBox> gibi yazarak istediğiniz yere yerleştirebiliyorsunuz. Eğer 2 sütunlu blog istiyorsanız her 2 yöntemi de kullanabilirsiniz. Widget tabi ki daha kolay olacaktır. Ben widget lı sistemi anlatacağım , diğer yöntemde sorunuz olursa bu konuya yorum olarak yazabilirsiniz. Örnek olarak ben buradaki WordPress temasını kullanacağım.
1-) Üsteki temanın olduğu bağlantıdan temasına demosuna Preview u tıklayarak ulaştım. Tarayıcıdan "View Source" diyerek <body> ile </body> arasındaki her kodu kopyalayıp site.master içindeki <form id="form1" runat="server"> ile </form> kodların içindekileri silip <form> lar arasına kopyalayın.
2-) Daha sonra Firefox un eklentilerinden FireBug ile temanın CSS ini tamamen görebiliyorsunuz. Oradan CSS i kopyalayıp , tema klasörünün içinde herhangi bir isimde Style Sheet yaratıp (style.css) içine kopyalayın. Ve site.master da <head> kısmında CSS i bağlayın.
<link rel="stylesheet" href="style.css" type="text/css" />
3-) Daha sonra temadaki blog yazıların yazıldığı kısmı bulup sadece tek bir yazıyı içeren <div> bölümünün içini silin , diğer blog yazılarının bulunduğu <div> kısımlarını silin. Örneğimizde kodun içindeki <div class="box-left" id="post-19"> kısmının içini silin ve diğer <div class="box-left" > ile başlayan <div> leri (5 tane) silin. Ayrıca id="post-19" u silebilirsiniz bir işe yaramayacak.
4-) Daha sonra önceden kullandığımız blog yazılarının oluşmasını sağlayan yer sağlayıcı ( <asp:ContentPlaceHolder ) ve arama motorlarından sitenize hangi anahtar kelime üzerinde arama yapıldıysa ona göre sitenizde otomatik arama yapıp sonuçları gösteren ( <blog:SearchOnSearch ) kodlarını içini boş bıraktığımız <div> içine yerleştirelim.
<div class="box-left" >
<blog:SearchOnSearch ID="SearchOnSearch1" runat="server" MaxResults="3" Headline="Bunu aradınız:"
Text="Aradığınız kelimeye göre siteden bir kaç sonuç:" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</div>
5-) Daha önce yaptığımız <div> leri temizleme işleminin aynısını sağ sütun için yapacağız. Buradaki <div> ler iç içe 3 tane. O <div> lerin içine widget alanını koyacağız. Unutmayın temanıza bütün görselliği taşıyan <div> taglarındaki class'lar veya id'lerdir.
<div id="content-right">
<div class="box-right">
<div class="box-right-content">
<blog:WidgetZone runat="server" ID="widgetZone" />
</div>
</div>
</div>
6-) Bu değişiklikler ile çalıştırdığımızda BlogEngine temamız yavaş yavaş renklenmeye başladığını göreceğiz. Yazım çok uzadığı için CSS ve BlogEngine'da yapmanız gereken ince değişikliklerden kısaca bahsedeceğim. BlogEngine geliştiriciler sitesindeki wikide tema yaratımı , BlogEngine nesnelerinin kullanımları ve açıklamalarının bulunduğu sayfaya göz atmanızı öneririm.
Örneğin <h1><a href="http://wp-themes.com">Theme Preview</a></h1> kodu temada blog başlığını temsil ediyor. Kendi blog başlığınızı direk html kodu olarak buraya hardcode yapabilirsiniz fakat BlogEngine yönetim sayfasındaki ayarlardan blog başlığınızı istediğiniz zaman değiştirmek isterseniz , alttaki kodu kullanabilirsiniz.
<h1><a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a></h1>
Ayrıca tema yaratırken BlogEngine'daki Standard temasının CSS'ini ve Master Page'ini iyice irdeleyip kendi blogunuza uygulamanız temayı daha iyi yönetmenizi sağlayacaktır. Örneğin etiket bulutu(tag cloud) 'nun en büyük elemanını temanızda özelleştirmek isterseniz, standard temasından bu kodu alıp kendinize göre değiştirmeniz gerekiyor.
.tagcloud a.biggest {
font-size: 19px;
}
Peki bu class'ların isimleri nereden geliyor diye merak ediyorsanız. App_Code\Controls içindeki C# kodlarını incelemeniz gerekiyor. tagcloud böyle oluşuyor writer.Write("<ul id=\"tagcloud\" class=\"tagcloud\">");
Nasıl oluştuklarını ve nerede oluştuklarını bilmenize gerek yok.Size tavsiyem Standard temasının style.css 'in içindeki Widgets içini özelleştiren CSS kodlarından itibaren (Satır:127) CSS'in dosyasının sonuna kadar (Satır:978) herşeyi kopyalayıp yeni oluşturduğunuz temanın sonuna ekleyip , kendinize göre düzenlemeyi orjinal CSS kodlarıyla beraber düzenleme yapmanız gerekiyor. Demin kopyaladığınız yerde özel sayfaların (iletişim , arşiv , yorum bölgesi vs. ) ve özel kontrollerin widgetın dış görünümü, categorylist , blogroll gibi kontrollerin görünüm ayarları için class larını ve id lerini öğrenip kendimize göre değiştirebiliyoruz.
Sorularınız için burada yorumları kullanabilirsiniz. Kolay gelsin.
Not: Kodları geçirirken CommentView.ascx ' i yanlış kopyalamışım. 11 Eylül 18.25 itibariyle düzelttim