The Jelly Donut - Dirk geekin' out

I demand reality 2.0 with unlimited undo!

Blogengine.NET Themes selbst gemacht – Teil 2

August 09
by Dirk 9. August 2010 22:34

imageSo richtig funktional war das Theme, dass wir im ersten Teil dieser Miniserie gebaut haben ja noch nicht. Ein Blog Theme für Blogengine.NET soll ja nicht nur die Postings auflisten sondern auch einiges an Funktionalität bieten.

Das Template, dass wir bereits haben macht im Grunde nur eins, nämlich anstelle des ContentPlaceholder-Tags Inhalte einfügen. Um mehr Funktionalität nutzen zu können bietet Blogengine.NET eine Reihe von Steuerelementen und Funktionen.

Um diese Funktionen nutzen zu können fügen wir am Anfang des Masterdokuments eine Referenz auf die BlogEngine.NET Klassen ein.

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

Es gibt eine ganze Reihe nützlicher Klassen, die jetzt direkt verwendet werden können, allen voran die BlogSettings-Klasse. Deren Property “Instance” enthält alle Informationen, die man über sein Blog in Erfahrung bringen möchte. Für unser Beispiel begnügen wir uns erst einmal mit dem Titel und der Beschreibung des Blogs:

<h3><%=BlogSettings.Instance.Name %></h3>
    <p><%=BlogSettings.Instance.Description %> </p>

Die Settings-Klasse ist zwar ausgesprochen “gesprächig”, jedoch findet sich nicht alles darin. Für manche Informationen benötigt man eine weitere sehr praktische Klasse namens “Utils”. Eine sehr wichtige Information etwa, die es nur von Utils gibt, ist die Adresse des blogeigenen RSS Feeds:

<a href="<%=Utils.FeedUrl %>">RSS-Feed</a>

Auch wenn es um das Umwandeln von relative in absolute Pfade oder umgekehrt geht oder die Ermittlung des tatsächlichen Hauptverzeichnisses hilft diese Klasse weiter. Besonders wichtig ist hier die Eigenschaft Utils.RelativeWebRoot. Sie liefert die Webadresse des Blogs.

Eine einfache Menüstruktur könnte also beispielsweise so aussehen:

<div id="menu">
  <a href="<%=Utils.RelativeWebRoot%> default.aspx">Home</a> |
  <a href="<%=Utils.RelativeWebRoot%> archive.aspx">Archive</a> |
  <a href="<%=Utils.RelativeWebRoot%> contact.aspx">Contact</a>
</div>

Dieses Snippet rendert eine einfach Linksammlung, die auf die Standard-Seiten verweist, die es in jeder Blogengine.NET Installation gibt. Das sind statische aspx-Seiten, die man im Root findet.

Fassen wir also zusammen:

Unser Theme zeigt alle Postings, sowohl in einer Übersicht als auch in einer Detailansicht mit Kommentaren. Wir haben außerdem ein einfaches Menü eingefügt und Titel- wie Beschreibungstags eingefügt. Die Datei site.master sieht damit jetzt so aus:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="SimpleSite" %>
<%@ Import Namespace="BlogEngine.Core" %>
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server" profile="
http://gmpg.org/xfn/11">
    <title><%=BlogSettings.Instance.Name %></title>
</head>

<body>
  <form runat="server">
    <h3><%=BlogSettings.Instance.Name %></h3>
    <p><%=BlogSettings.Instance.Description %></p>
    <div id="menu">
      <a href="<%=Utils.RelativeWebRoot%>default.aspx">Home</a> |
      <a href="<%=Utils.RelativeWebRoot%>archive.aspx">Archive</a> |
      <a href="<%=Utils.RelativeWebRoot%>contact.aspx">Contact</a> |
      <a href="<%=Utils.FeedUrl %>">Feed</a>
    </div>
    <div id="content">
      <asp:ContentPlaceHolder ID="cphBody" runat="server" />
    </div>
  </form>
</body>
</html>

Im nächsten Teil erweitern wir unser Theme um Controls und Zonen…

Die bisherigen Files als Download

Share or Bookmark this post…
  • Yigg
  • Yahoo! Buzz
  • TwitThis
  • StumbleUpon
  • del.icio.us
  • DotNetKicks German
  • DZone
  • E-Mail
  • Facebook
  • Google
  • MisterWong.DE
  • MySpace

Tags: , , ,

Blogengine.NET Themes selbst gemacht – Teil 1

August 09
by Dirk 9. August 2010 13:09

 BlogEngine.NET1. 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?

imageEin 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…

Share or Bookmark this post…
  • Yigg
  • Yahoo! Buzz
  • TwitThis
  • StumbleUpon
  • del.icio.us
  • DotNetKicks German
  • DZone
  • E-Mail
  • Facebook
  • Google
  • MisterWong.DE
  • MySpace

Tags: , , , ,

facebook “Gefällt mir” Button in Blogengine.NET Blog einbauen

May 06
by Dirk 6. May 2010 11:32

In meinem steten Bestreben, von meinen Besuchern gebauchpinselt zu werden :-) habe ich jetzt die Möglichkeit eingebaut, mich durch einen Klick wissen zu lassen, dass mein Post lesenswert war…

Wie das geht? Im Grunde ganz einfach. Jedes BE.NET Theme besteht ja aus einer Reihe von ascx Files, die für die Darstellung der gesammten Seite, der einzelnen Posts und der Kommentarseite zuständig sind.

Um nun diesen Button einzubauen, wechselt man in das Verzeichnis des aktuellen Themes (im Normalfall ist das ~\themes\THEMENAME) und öffnet die Datei PostView.ascx mit einem Editor (z.B. mit Visual Web Developer Express) Dort dann an geeigneter Stelle folgenden Code einfügen:

<iframe src="http://www.facebook.com/plugins/like.php?href=<%=Post.PermaLink %>&amp;layout=button_count&amp;show-faces=true&amp;width=50&amp;height:25px&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:25px"></iframe>

Das wars auch schon :-)

Share or Bookmark this post…
  • Yigg
  • Yahoo! Buzz
  • TwitThis
  • StumbleUpon
  • del.icio.us
  • DotNetKicks German
  • DZone
  • E-Mail
  • Facebook
  • Google
  • MisterWong.DE
  • MySpace

Tags: , , , , , ,

Stirb, Spam!

April 26
by Dirk 26. April 2010 17:21

Kaum bin ich am Abdrehen angesichts der schier unglaublichen Spammenge in meinem Blog, schon naht Rettung… so ist’s Recht :-)

Wie die aussieht? Wie ein Framework-Update :-)
Blogengine.NET hat nun nämlich eine neue Version, Ver 1.6.1 und in der ist endlich serienmäßig ein brauchbares Captcha (nämlich reCaptcha) und die zusätzliche Option, das komplette Kommentarsystem umzustellen enthalten.

Ich habe jetzt mal das Captcha aktiviert in der Hoffnung, dass zumindest die automatisierten Attacken jetzt zurückgehen werden.

Ansonsten kam mir noch eine weitere Idee: Bis jetzt sind 100% der Spameinträge meines Blogs in Englisch. Nachdem meine Blogsprache bisher strikt Deutsch war, könnte ich ja auch ein Captcha konstruieren, dass zum korrekten Beantworten Deutsche Sprachkenntnisse voraussetzt :)

Etwa indem ich Scherzfragen stelle oder die Antwort auf Rechnungen im Wortlaut abfrage… Hat von Euch schon irgendjemand Erfahrungen mit so etwas gemacht?

Share or Bookmark this post…
  • Yigg
  • Yahoo! Buzz
  • TwitThis
  • StumbleUpon
  • del.icio.us
  • DotNetKicks German
  • DZone
  • E-Mail
  • Facebook
  • Google
  • MisterWong.DE
  • MySpace

Tags: , , , ,

Das blogengine.net themes megapack…

March 31
by Dirk 31. March 2010 13:09

hat mich gerettet :-)

Nachdem mir vorgeführt wurde wie ein frisch aufgesetztes Blog aussehen kann, hatte ich das intensive Bedürfnis nach mehr Farbe in meinem eigenen Blog. Ergo: Ein neues Theme musste her.

Ich finde ja, dass blogengine.net themes wirklich schwer zu finden sind, aber hat man sie erst einmal gefunden, ist ihre Installation supereinfach mit einer Kopie im themes-Unterverzeichnis bewerkstelligt.

Ach ja… Themes… Eine wirklich grosse Ladung, ausgesprochen schöner Themes habe ich dann hier gefunden: http://blogenginethemes.codeplex.com/ Linktipp!

Share or Bookmark this post…
  • Yigg
  • Yahoo! Buzz
  • TwitThis
  • StumbleUpon
  • del.icio.us
  • DotNetKicks German
  • DZone
  • E-Mail
  • Facebook
  • Google
  • MisterWong.DE
  • MySpace

Tags: , ,


RecentComments

Comment RSS

BE.NET Extensions

SocialBE (für die "share this"-Buttons)
Themes Megapack


Blogverzeichnis - Blog Verzeichnis bloggerei.de

Blog

http://www.wikio.de

Calendar

<<  September 2010  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

View posts in large calendar