5202

ein Blog über technische Fragen zu Blogger

HTML5 Boilerplate als Blogger-Layout verwenden

von
Ich weiß, das einige Blogger davon träumen, sich ihr eigenes Layout von Grund auf selber zu scchreiben und auf der Suche nach so 'ner Art 'Roh'-Layout für blogspot.com Blogs sind.

Wer hier schon länger mitliest, erinnert sich vielleicht, das ich vor einiger Zeit mal einen ziemlich ambitionierten Post dazu geschrieben habe ... der nur einen ganz kleinen Nachteil hat, dass das im neuen Blogger Editor inzwischen nicht mehr funktioniert (damn new dashbord gui ...}

Statt beim Thema 'Layout' das Rad neu zu erfinden, habe ich nun einen besseren Vorschlag - nehmt für eure Blogger Layout-Projekt etwas bewährtes & solides, nämlich die HTML5 Boilerplate.

HTML5 Boilerplate

Ganz allgemein gesagt ist Boilerplate ein stabiles, robustes und schnelles Open Source Layout für alle Arten von Seiten. Es ist modular aufgebaut, d.h. ihr könnt aus einer Vielzahl von Plugins, Scripte und Tools entscheiden was ihr wirklich braucht und das dann einsetzen.

Mit Boilerplate könnt ihr phantastische Sachen bauen, etwa mit dem Bootstraps2 Toolkit - zumindest kam mir das gestern Nacht phantastisch vor :=).

Boilerplate ist smart, cool, professionell und alle benützen es - sogar die Blogger-Entwickler. Mit anderen Worten, das ist die Zukunft, also beschäftigt euch damit, es lohnt sich.

Der Hacken an der Sache ...

... ist, das Boilerplate ein HTML5 Layout ist und Blogger nur XHTML5 Layouts akzeptiert :=(. Okay Freunde, auch kein Problem, man muss das Layout nur entsprechend umschreiben.

Um zu demonstrieren wie das geht, habe ich die minimalste Boilerplate-Konfiguration mal in Blogger lauffähig gemacht:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2 no-js' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<link href='css/normalize.min.css' rel='stylesheet'/>
<link href='css/main.css' rel='stylesheet'/>

        <script src='js/vendor/modernizr-2.6.1.min.js'/>  
 <head>
     <title><data:blog.pageTitle/></title>

   &lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/
]]></b:skin>

  </head>

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass +  &quot; &quot; + data:blog.pageType'>

<b:section class='main' id='main' showaddelement='yes'/>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'/>

        <script src='js/main.js'/>
 </body>

</html>
Ihr könnt dieses Layout als .xml Datei downloaden» und bei euch im Blogger Layout Editor testen - es wird ohne Fehler funktionieren!

Die Anpassung

Um das Boilerplate Layout in Blogger zum laufen zu bekommen, müsst ihr eigentlich nur vier Dinge beachten (wie immer im Leben ist alles einfach ...).
Dokumenttyp-Deklaration
Wie gesagt, Blogger akzeptiert nur XHTML5 Dokumente also müsst ihr eine entsprechende Dokumenttyp-Deklaration setzen:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
Erweiterter XML Namensraum
XML Dokumente müssen einen definierten Namensraum besitzen und Blogger verwendet einige-nicht-standardkonforme-Erweiterungen ... blame on you Blogger!

Diese Erweiterungen müssen als Attribut im Wurzel-Element stehen, sonst springt ein Fehlerteufel aus dem Bildschirm:
<html b:version='2' class='v2 no-js' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Stylesheet Links
Blogger ist ein XHTML5 Dokument also müsst ihr die Schreibweise anpassen. Statt Links in HTML so zu schreiben ...
<link href='css/normalize.min.css' rel='stylesheet'>
<link href='css/main.css' rel='stylesheet'>
... geht das in XML so:
<link href='css/normalize.min.css' rel='stylesheet'/>
<link href='css/main.css' rel='stylesheet'/>
Section
Der neue Blogger Editor hat einen Bug - oder Feature, je nach Definition :=) - das ihr nämlich mindestens _ein_ Section Tag im Layout stehe haben müsst, sonst könnt ihr nicht speichern:
<b:section class='main' id='main' showaddelement='yes'/>
Nice to have ...
Die restlichen Anpassungen sind nett, aber nicht unbedingt notwendig.

Ich habe erstens das so genannte widget_css_2_bundle.css aus dem Layout gelöscht. Das widget_css_2_bundle.css ist eine 'Grundlage' CSS von Blogger und sorgt dafür, dass ihr beim arbeiten am Layout Jahre eures Lebens damit verplempert, workarounds für irgendwelchen völlig unerwarteten Reaktionen zu schreiben.

Ehre wem Ehre gebührt - der Autor dieses beeindruckenden Hacks ist übrigens Volter Quant!

Wenn ihr das löscht, löscht ihr damit aber auch die CSS für die Gadgets - ihr müsstet sie dann selber schreiben (was nicht allzu schwierig ist)

Das widget_css_2_bundle.css werdet ihr los, indem ihr den entsprechende Tag auskommentiert:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin>*/</b:skin>
Als letztes habe ich den Body-Tag mit den Seiten Attributen erweitert:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass +  &quot; &quot; + data:blog.pageType'>

Download

To make a long story short: Ich habe euch zwei lauffähige XML-Dateien vorbereitet, die ihr ausprobieren könnt:



In index1.xml ist das widget_css_2_bundle.css gelöscht, in index2.xml ist es drin.

Weitere Beispiele

Falls ihr weitere Beispiele braucht - etwa für das Blog Gadget o.ä. - fragt nach, dann packe ich das mit in den Download rein.

'nen paar abschließende Gedanken

Blogger ist inzwischen mehr als nur ein Blog-Dienst, im Grunde ist es ein 'Small Content-Management-System', also ein Dienst für alle Arten von Inhalten. Wenn ihr irgend etwas im Internet schnell, stabil und kostenlos veröffentlichen wollt, dann würde ich immer Blogger dazu nehmen.

Was bei Blogger eindeutig fehlt, sind Layouts für verschiedene Anwendungszwecke. Es gibt natürlich ein paar Blog Layouts von btemplate & Co. und das war's dann schon.

Es gibt also nix 'professionelles' von Blogger für eine simple Homepage - okay Leute, statt sich in die Ecke zu setzen und zu weinen, schreibt doch selber was! Ihr seid keine Profis und nur Profis können das? Ich bin auch kein professioneller Bäcker und trotzdem backe ich mein Brot selber.

Ich werde bei Gelegenheit mal was mit Boilerplate zusammenbauen und entweder hier oder in einem eigene Post zeigen. Auf jeden Fall ist das keine Gehinrchirugie - wer sich dafür interessiert: Fangt doch einfach an und lasst euch von Problemen nicht abschrecken.

Anmerkungen, Kommentare

Falls ihr Fragen dazu habt, fragt nach! Manchmal schlägt man sich tagelang mit simplen Sachen rum, die schon längst gelöst sind!