5202

ein Blog über technische Fragen zu Blogger

Blogger: removing “/p/” and “.html” from page URL

von

Update! Im Seiten-Gadget funktionieren jetzt externe und interne Links auf nicht-statische-Seiten!

Seit Blogger 2009 die statischen Seiten eingeführt hat, finden viel Nutzer die Seiten-URL mit dem obligatorischen “/p/” zwischendrin und “.html” am Ende hässlich. Ich bin sogar der Meinung, dass die Wahrnehmung von Blogger als ‘unprofessionell’ a bisserl was mit dieser URL Struktur zu tun hat. Von WP ist man reine, klare Links gewohnt und das ist Standard und wer das nicht hat, is bucklig und doof :).

Auf jeden Fall verfolgt mich seit Jahren die Frage, ob man ein Seiten-URL nicht auch ohne dieses “/p/” und “.html” schreiben kann.

Was soll ich sagen, es geht! Ihr könnt mit a bisserl Ajax und der coolen HTML5 API praktisch beliebige URLs schreiben. Testet das in der Demo:

Klickt im Seiten Gadget auf die Links und öffnet damit die Seiten - schaut euch die URL im Browser an - verlinkt auf eine ‚reine‘ URL - geht in der Browser-History vor und zurück. All das funktioniert ‚normal‘ und wie ihr es gewohnt seid. Für Asbach-Uralt Browser gibt es einen Fallback, in der sich die Seiten ‚klassisch‘ in der Form /p/foo.html öffnen.

Wie funktioniert der Spaß?

Nur eine kurze allgemeine Erklärung dazu:

Die statischen Seiten werden nicht über http aufgerufen, sondern der Inhalt der Seiten wird per Ajax geladen und mit der HTML5 Eigenschaft ‚pushstate‘ eine URL gegeben. Damit die neuen URLs verlinkbar sind, legen wir im Blogger-Dashboard eine Umleitung.

Um im Browser einen Verlauf zu simulieren, erzeugen wir einen künstlichen Browserverlauf mit der Eigenschaft ‚popstate‘.

Ich denke, wie das funktioniert ist im Grunde unwichtig - der look & feel ist für eure Besucher jedenfalls normal und die URLs sind schöner.

Hat das Nachteile?

Ja! Nachdem ihr nur den Inhalt der Seite ladet und nicht die Seite selber, könnt ihr Probleme bekommen, wenn ihr zB. Scripts auf der Seite ausführen wollt. Im Fall des Falles kommt diese Lösung nicht für euch in Frage. In den meisten Fällen, wo es wirklich nur um Inhalte geht, wird es aber funktionieren.

Einbau

Der Einbau ist simpel - ihr sucht euren schließenden body Tag:

</bod>

Direkt darüber legt ihr dieses Script:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
        $("#PageList1").on("click", 'a', function(e) {
            var url = $(this).attr("href");
            if (url.indexOf("/p/") > -1) {
                e.preventDefault();
                $("#PageList1 li").removeClass('selected');
                $(this).parent().addClass('selected');
                var b = url.replace(/\/p/, "").replace(/.html/, "");
                $("#main").load(url + ' .date-outer');
                window.history.pushState('object', '', b);
                return false;
            };
        });
        if (window.location.href.indexOf("/p/") > -1) {
            var url = window.location.pathname;
            var b = url.replace(/\/p/, "").replace(/.html/, "");
            window.history.pushState('object', '', b);
        };
        $(window).bind("popstate", function() {
            var link = location.pathname.replace(/^.*[\\/]/, "");
            $("#main").load(link + ' .date-outer');
            $("#PageList1 li").removeClass('selected');
    });
});
//]]>
</script>

Fertig!

Verlinken

Das Script funktioniert perfekt und macht alles was es soll, außer dass ihr auf die neuen “reinen” URLs nicht verlinken könnt. Wenn ihr Wert drauf legt, müsst ihr euch noch a bisserl Zusatzarbeit machen.

Ihr geht dazu in das Blogger-Dashboard unter Einstellungen > Sucheinstellungen > Benutzerdefinierte Weiterleitungen. Hier müsst ihr für jede eurer Seiten eine Weiterleitung schreiben. Nehmen wir als Beispiel die ‘neue’ Seiten-URL www.eurerBlog.de/kontakt - die Weiterleitung schaut in den Fall so aus:

Von: /kontakt
An: /p/kontakt.html
Permanent: Ja

Speichert das ganze und testet es, indem ihr www.eurerBlog.de/kontakt im Browser aufruft. Habt ihr alles richtig gemacht, landet ihr auf der Seite Kontakt, ansonsten im digitalen Nirvana :D. Nachdem ihr maximal 20 Seiten habt, hält sich der Arbeitsaufwand in Grenzen.

Nix klappt, ihr versteht nur Bahnhof!

Wenn das der Fall ist, dann fragt in den Kommentaren nach - vielleicht gibt es ja eine Lösung für euer Problem. Nachdem das ganze eine absolut originäre Idee von mir ist, bin ich gespannt, ob es damit in der Praxis Probleme gibt. Wenn was nicht klappt oder Probleme bereitet, gebt bitte Bescheid, dann lerne ich vielleicht auch noch was.