posted @ Sunday, September 13, 2009 5:56 PM |
Subtext ile ilk yazımı yazıyorum. Sitemi dotnetblogengine'den subtext'e geçirirken bir çok detay ile uğraşmak zorunda kaldım, databaseden yaptım. Örneğin dotnetblogengine <tag> elementlerini ekliyordu export ettiği blogml dosyasına. Ancak subtext blogml schemasına sıkı sıkıya bağımlı olduğu için <tag> ları almıyordu. (BlogML schemasında <tag> elementi tanımlı değil!!)
Bunun için önce export edilen xml'i okuyup, tag elementlerini category elementine çeviren hızlı ve kirli olarak nitelendirilebilecek bir araç hazırladım. Örnek kod aşağıda.
private void button1_Click(object sender, EventArgs e)
{
Dictionary<string, Guid> tags = new Dictionary<string, Guid>();
XmlDocument d = new XmlDocument();
d.Load("test.xml");
XmlNamespaceManager mgr = new XmlNamespaceManager(d.NameTable);
mgr.AddNamespace("b", "http://www.blogml.com/2006/09/BlogML");
XmlNodeList nodelist = d.SelectNodes("/b:blog/b:posts/b:post[b:tags/b:tag/@ref]", mgr);
foreach (XmlNode postElement in nodelist)
{
XmlNodeList tagElements = postElement.SelectNodes("b:tags/b:tag", mgr);
List<XmlNode> newCatNodes = new List<XmlNode>();
foreach (XmlNode tagElement in tagElements)
{
string tagName = tagElement.Attributes["ref"].Value;
if (!tags.Keys.Contains<string>(tagName))
{
tags.Add(tagName, Guid.NewGuid());
}
newCatNodes.Add(d.CreateElement("category", mgr.LookupNamespace("b")));
newCatNodes[newCatNodes.Count - 1].Attributes.Append(d.CreateAttribute("ref")).Value = tags[tagName].ToString();
}
//bu post altında ki taglar bulundu
if (tagElements.Count > 0)
{
XmlNodeList catNodes = postElement.SelectNodes("b:categories", mgr);
XmlNode catNode;
if (catNodes == null || catNodes.Count == 0)
{
catNode = postElement.AppendChild(d.CreateElement("categories", mgr.LookupNamespace("b")));
}
else
{
catNode = catNodes[0];
}
foreach (XmlNode newNode in newCatNodes)
{
catNode.AppendChild(newNode);
}
}
}
//save all tags as a master category
XmlNodeList mainCatNodes = d.SelectNodes("/b:blog/b:categories", mgr);
XmlNode mainCatNode = null;
if (mainCatNodes == null || mainCatNodes.Count == 0)
{
mainCatNode = d.SelectSingleNode("/b:blog", mgr).InsertBefore(
d.CreateElement("categories", mgr.LookupNamespace("b")),
d.SelectSingleNode("/b:blog/b:posts", mgr)
);
}
else
{
mainCatNode = mainCatNodes[0];
}
foreach (var tagItem in tags)
{
XmlNode category = d.CreateElement("category", mgr.LookupNamespace("b"));
XmlNode catTitle = d.CreateElement("title", mgr.LookupNamespace("b"));
category.Attributes.Append(d.CreateAttribute("id")).Value = tagItem.Value.ToString();
catTitle.InnerText = ".." + tagItem.Key;
category.AppendChild(catTitle);
mainCatNode.AppendChild(category);
}
d.Save("test.edited.xml");
}
BlogML çıktısı dokumanda yer alan ve daha önceki blog sistemin olan dotnetblogengine de tag olarak yer alan kayıtları category'e çevirdim ve postları bunlarla ilişkilendirdim.
Bunun akabinde post metinleri içindeki picture handlerlerı find and replace ile değiştirerek çözdüm.
Subtext blog sisteminde de tema desteği var. Çeşitli seçenekler indirilen paket içinde yer almakta ancak http://www.subtextskins.com/ adresinden farklı temalara erişilebiliyor. Ben WordPress temaları içinde yer alan şu an görmekte olduğunuz
qwilm temasını kullanmayı istediğim için bir süre de bununla uğraşarak bu temayı subtext'e uyarladım. (Henüz tüm styling işlemleri bitmiş de sayılmaz. Daha çok ince ayar/temizlik var.)
[
blog
dotnetblogengine
subtext
]
posted @ Sunday, September 13, 2009 5:51 PM |
Yeni tasarımım da content yani içeriğin yer alacağı bölüm genişliği paddingler vs. düşüldüğünde 440px civarında olması gerekiyor. Eski tasarımda ise aşağıdaki resimden de hatırlayacağınız gibi sayfa 100% kullanıldığı için sorun olmuyordu.
Ancak yeni tasarımı bozan bir durum olduğu için jQuery ile şöyle bir şey yapmaya karar verdim.
Sayfada belirlenmiş (440px) değerden geniş olan <img> etiketlerini resize edelim. Bunu yaptım, gayet kolay oldu ancak istendiğinde (tıkladığında) resimin büyük halini de görmek isteyecektir kullanıcı, aksi durumda bazı resimler küçük gösterildiğinde anlamsız şekilde duracaktır sayfada.
Bunun için jQuery ile resize işini yaptıktan sonra çok bilinen ve kullanıclan
thickbox isimli jQuery pluginini kullandım.
Ancak thickbox yazısına tıklayınca eriştiğiniz sayfada da göreceğiniz gibi aşağıdaki şekilde bir tanımlama istemektedir.
Benim sitemde ise resim dosyaları etrafında <a> olmayan birer <img> etiketidir. Genelde ekran görüntüsü vermek için eklerim. Yani bu yukarıda ki gereksinime uyan bir yapı zaten yok. Yazıları tek tek düzenlemek olacak iş değil! Onun yerine aşağıdaki jQuery kod ile tüm işlerimi hallettim. Bu yazıda aşağıda ki resim dosyasına tıkladığınızda thickbox ile açılacaktır ancak resmi eklerken thickbox için ekstra bir şey yapmadım. Bu durumun eskiden kalan yazılar için doğru olduğunu yenisi için çok doğru bir tercih olmayacağını belirtmek isterim zira büyük boyutlu resim dosyası görüntülenmek istenmeden önce yüklenmiş oluyor.
var maxContentPictureWidth = 440;
$.fn.zoomIn = function() {
var orgWidth = $(this).width();
if (orgWidth <= maxContentPictureWidth) { return; }
var orgHeight = $(this).height();
var times = maxContentPictureWidth / orgWidth;
$(this).width(orgWidth * times);
$(this).height(orgHeight * times);
$(this).css("cursor", "pointer").css("cursor", "hand"); //browsers!!
var wrapperAnchor = document.createElement("a");
$(wrapperAnchor).attr("href", $(this).attr("src"))
.attr("title", "preview")
.addClass("thickbox")
.attr("id", "created" + Math.floor((Math.random()*100)).toString() ); //flagged as created at runtime!!
$(this).wrap(wrapperAnchor);
}
$(function() {
$("#content img").each(function() {
$(this).zoomIn();
});
tb_init("a.thickbox[id^='created']");
});
Tabiki bu kodların çalışabilmesi için jQuery ve thickbox javascript dosyalarını sayfanıza dahil etmeniz gerekmektedir.
[
jquery
]
