Aug
9
2010
1. Fakt: Die Welt ist voll von Leuten, die besser mit Grafikprogrammen umgehen können als ich.
2. Fakt: Sofern diese Naturtalente ihre Dienste in Form von freien Themes dem Blogging-Ecosystem zur Verfügung stellen machen sie das meist für das (aus meiner Sicht als BE.NET Fan) falsche Framework…
3. Fakt: Ich bin Techniker, es sollte doch möglich sein, hier Abhilfe zu schaffen :-)
Daher starte ich jetzt diese Artikelserie rund um Theming in BE.NET.
Was nun ist ein BE.NET Theme?
Ein BE.NET Theme ist wirklich recht einfach zu bauen. Folgende Schritte sind dafür notwendig:
- Als erstes brauchen wir ein Verzeichnis für unser Theme. In Blogengine.NET ist das Themes Verzeichnis für diesen Zweck vorgesehen. Da legen wir nun ein neues Unterverzeichnis an. Der Name dieses Verzeichnisses ist für BE.NET der Name mit dem auf das Theme verwiesen wird.
- In dem Verzeichnis brauchen wir nun mindestens drei Dateien, ggf. aber nicht notwendigerweise noch mit den dazugehörigen Codebehindfiles. Am Einfachsten lassen sich diese Dateien mit Hilfe von Visual Web Developer Express erzeugen:
- site.master – Hier wird das übergeordnete Layout festgelegt
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="SimpleSite" %>
<html>
<head id="Head1" runat="server"></head>
<body>
<form id="Form1" runat="Server">
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</form>
</body>
</html>
- postview.ascx – Dieses Control dient zur Darstellung der einzelnen Postings
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>
<div class="post xfolkentry" id="post<%=Index %>">
<h2><a class="postheader taggedlink" href="<%=Post.RelativeLink %>"><%=Server.HtmlEncode(Post.Title) %></a></h2>
<div class="entry"><asp:PlaceHolder ID="BodyContent" runat="server" /></div>
</div>
- commentview.ascx – Hier kann man die Darstellung der Kommentare festlegen.
<%@ Control Language="C#" EnableViewState="False" 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(50)%></p>
<p class="content"><%= Text %></p>
<p class="author">
<%= Comment.Website != null ? "<a href=\"" + Comment.Website + "\" class=\"url fn\">" + Comment.Author + "</a>" : "<span class=\"fn\">" +Comment.Author + "</span>" %>
<%= Flag %>
<%= AdminLinks %>
</p>
</div>
Et voilá… Wir haben unser erstes Theme gebaut.
Wer sich diesen Code genauer ansieht stellt schnell fest, dass BE Themes nun wirklich kein Hexenwerk sind.
Diese drei Dateien funktionieren bereits und können nun mit beliebigem eigenen HTML zu fertigen Themes ausgestaltet werden.
So… das wars jetzt erstmal für Heute wieder. Viel Spaß beim Experimentieren!
In Teil 2 werde ich auf diesem Artikel aufbauen und demonstrieren, wie man Blogengine.NET Funktionen in besagten drei Dateien zu einem vollwertigen funktionalen Ganzen verschmilzt…