4. URLs für bestimmte Seiten bei mit JQuery geladenem Content

URLs für bestimmte Seiten bei mit JQuery geladenem Content

  • S

    Hey.

    Ein Entwurf einer Website besteht momentan nur aus einer index.html seite. In dieser findet sich folgender div:

    <div id="content"></div>

    In diesen wird dann per JQuery der Content für diesen menüpunkt geladen:

    <ul>
                            <a href="#" onClick="portfolio()"><li>GAMES</li></a>
                            <a href="#" onClick="show_blog()"><li>BLOG</li></a>
                        </ul>

    $(function(){
        $('#content').load('front.html');
    });

function front()
{
    $('#content').load('/front.html');
}

function portfolio()
{
    $('#content').load('/portfolio.html');
}

function show_blog()
{
    $('#content').load('/blog.html');
}

    Jetzt habe ich in der Url natürlich als adresse nur sowas wie http://127.0.0.1:55858/index.html# wenn man den Links folgt.
    Was sind jetzt meine besten Möglichkeiten die URL umzuschreiben und auch die richtige Seite anzuzeigen, wenn jemand dann einem Google Link folgt?
    Oder ist die ganze Idee einfach nur dummbatz? Ich finde das ganze so einfach angenehm für eine statische Webseite, da ich so neuen Content relativ einfach erzeugen kann, ohne ständig das Gerüst herumkopieren zu müssen.
    Ein riesiges CMS möchte ich aber auch nicht mehr verwenden. Das einzige was ich integrieren werde, ist eventuell eine Blogengine. Deswegen suche ich hier nach einer eleganten Lösung um ein wenig SEO zu betreiben.

    0
  • T

    Das ist im Prinzip wie bei Single Page Webapplications. Über die History API kann man die URL im Browser anpassen, ohne dass die Seite neu geladen wird. Solange man die Seite nicht neu läd, klappt das mit der History und den URLs auch problemlos.

    Wenn die Seite allerdings neu geladen wird (bzw. man per Direktlink aufruft), wird die URL verwendet. Wenn du als URL also http://www.example.com/blog/ setzt und der Webserver zu dieser URL nichts liefert, haut das natürlich nicht hin. Der Server muss entsprechend für alle verwendeten URLs die index.html ausliefern. Im Javascript Code wird dann die URL ausgelesen und der passende Content geladen, so wie du es schon hast.

    0
  • S
    Mod

    Als erstes würde ich
    $.on() verwenden statt direkt im HTML Code die JS Funktionen reinzuschreiben.

    Du könntestd as zB so machen:

    <ul>
  <li><a href="#" data-load="games">GAMES</a></li>
  <li><a href="#" data-load="blog$">BLOG</a></li>
</ul>

    ("#list a").on("click", function() {
  $("#content").load("/"+$(this).data("load")+".html");
});

    so sparst du dir viel Code und trennst besser zwischen HTML und JS. idR willst du nie JS direkt im HTML Code stehen haben.

    Zu deinem eigentlichen Problem - es gibt 2 Ansätze.
    Einer wäre ein die History API zu verwenden, zB mit history.js oder dergleichen. Das können aber nicht alle Browser.

    Was daher viele machen, ist sich den hash in der URL zur nutze zu machen. Du hängst einfach #blog an die URL dran und beim Aufruf der Seite liest du das aus und lädst demenstprechend das passende.
    Siehe hier zB: https://developers.google.com/tv/web/articles/location-hash-navigation

    0
  • S

    Danke für den guten Rat Shade of Mine. Sehr hilfreich :).

    0
  • S
    Mod

    Kleiner Nachtrag:
    http://html5doctor.com/history-api/

    Weil wir vorhin eine Diskussion bei uns in der Firma hatten. Die Mehrheit würde doch die History API vorziehen - siehe Link.

    0
  • S

    Der Tipp mit der Hashnavigation war Gold wert, Shade of Mine 🙂 👍.

    $(function(){    

    /* Load correct section when visited */
    var hash = window.location.hash;
    var parsed = hash.substr(1, hash.indexOf("/"));

    if ( parsed.localeCompare("portfolio") == 0 ){
        $('#content').load('portfolio.html');
    }
    else if ( parsed.localeCompare("blog") == 0 ){
        $('#content').load('blog.html');        
    }
    else{
        $('#content').load('front.html');
    }

    /** interception for JQuery content **/
    $(".jquery-menu").click( function() {
        var target = $(this).data("load");
         $("#content").load(target+".html"); 
    });    
});

    <ul>
    <a href="#portfolio" class="jquery-menu" data-load="portfolio"><li>PORTFOLIO</li></a>
    <a href="#blog" class="jquery-menu" data-load="blog"><li>BLOG</li></a>
</ul>

    Nett und simpel :).

    0
  • Z

    Bitte auch folgenden Link beachten.
    https://developers.google.com/webmasters/ajax-crawling/

    Damit du Suchmaschinen nicht ausschließt

    0
  • S

    zwutz schrieb:

    Bitte auch folgenden Link beachten.
    https://developers.google.com/webmasters/ajax-crawling/

    Damit du Suchmaschinen nicht ausschließt

    Danke für den Link, aber ich werde daraus nicht ganz schlau.
    Wie genau kann ich google sagen, dass der Content für meine Seite in front.html oder blog.html sitzt und der bot es dort lesen kann und das als synonym für meine hashtags nehmen kann?

    Ich habe ja auf dem Server:

    index.html
    front.html
    blog.php
    portfolio.html

    Die Urls dafür wären dann #portfolio oder #blog und wenn ein Filter benutzt wird als Beispiel #blog,news.

    Wie ich das verstanden habe, funktioniert Javascript nicht wenn der Bot zu Besuch kommt. Könnt ihr mir hier auf die Sprünge helfen bitte?

    0
  • S
    Mod

    Wir machen das zB so, dass wir je nachdem ob es ein Ajax Request ist oder nicht nur das HTML Fragment liefern oder die komplette Seite mit Navigation und sonstigem Zeugs. Wir haben dafuer natuerlich auch ein entsprechendes Framework am Server und arbeiten nicht mit reinem HTML.

    Wie in dem Artikel beschrieben ( https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot ), deine a-hrefs zeigen auf echte Seiten wo der selbe content vorhanden ist wie in deinen Fragmenten die du laedst.

    Reine Ajax Seiten sind deshalb sehr schwer zu crawln fuer Suchmaschinen und man verwendet sie eigentlich recht selten. Denn man muss wirklich den Content doppelt anbieten.

    Alternativ geht es natuerlich mit der History API wie es zB youtube macht, wobei youtube IMHO auch ein super Beispiel ist warum man das nicht machen sollte. Die History API ermoeglicht dir naemlich unterschiedliche URI fuer deine unterschiedlichen Seiten zu haben. Wenn du naemlich nur ueber location.hash gehst, liegt deine ganze Seite ja auf einer URI.

    0
  • S

    Ja, ich seh schon, das funzt so nicht :D. Also zurück ans programmieren.
    Werde wohl doch PHP verwenden müssen. Denn doppelt anbieten ist ja auch doof.

    0
  • S
    Mod

    Scorcher24 schrieb:

    Ja, ich seh schon, das funzt so nicht :D. Also zurück ans programmieren.
    Werde wohl doch PHP verwenden müssen. Denn doppelt anbieten ist ja auch doof.

    Du kannst wie gesagt die History API stattdessen verwenden - dadurch hat jede Unterseite eine eigene URI. Und nur darum geht es den Suchmaschinen. (Wie bereits oben geschrieben, bei uns in der Firma wären die Mehrheit sowieso für History API statt location.hash)

    Oder eben du verzichtest darauf gecrawlt werden zu können. Je nachdem was das für eine Seite ist, ist das ja auch eine akzeptable Option. Wenn es zB deine private Homepage ist, wirst du eh nie auf einen Top Platz bei Google landen und bei einer Suche nach deinem Namen wird deine Seite sowieso gefunden.

    Ich persönlich bin kein Fan von solchen Ajax Seiten, ich würde dir also sowieso zu was anderem Raten :p

    0
  • S

    Ich hab jetzt innerhalb einer Stunde die ganze Seite mit PHP ersetzt.
    Smarty runtergeladen, so brauch ich auch weiterhin nur eine html seite pflegen.
    Wo ich vorher

    <div id="content"></div>

    hatte, wo das mit JQuery reingeladen wurde, habe ich jetzt

    <div id="content">{$content}</div>

    Ist also halb so schlimm.
    JQuery verwende ich nun nur noch um Dinge nachzuladen, wie als bsp. einen Trailer wenn man auf ein Bild klickt usw.

    Naja, auf jeden Fall was gelernt dabei. Und wenns nur ein Teil von JQuery ist :p.
    Was ich in HTML Dateien vorher hatte, sitzt jetzt halt in der Datenbank.
    Das PHP Script dafür hält sich auch in grenzen.

    0
  • S
    Mod

    Ich empfehle dir ein modernes Framework zu verwenden, wir verwenden intern zB Symfony2. Aber es gibt auch viele andere.

    Smarty ist aber schonmal ein guter Ansatz. Wichtig ist dass du MVC verwendest um Backend und Frontend zu trennen.

    Wenn du keine Datenbank verwenden willst, so kann smarty auch Templates in Templates - so dass du ein Layout Template hast und dort lädst du statt per ${content} eben ein anderes Smarty Template, welches zB auch nur aus HTML Code bestehen kann.

    0
  • S

    Ich will eben kein großes Framework oder so.
    Sonst hätte ich gleich Wordpress nehmen können :D.

    Ich will nur was kleines, einfaches, das mit wenig Aufwand zu warten ist und ich nicht ständig die Software updaten muss etc. Deswegen ja auch die Idee für eine Single Page App.

    D.h. mit ein wenig PHP und Smarty bin ich derzeit gut bedient. Hab auch einen kleinen Blog dabei, der eher für kurze Posts gemacht ist und eine Tutorial Sektion. War relativ einfach zu machen. Muss nur noch ein einfaches Backend dafür programmieren, was der größere Aufwand für mich ist, weil ich sessions hasse :D.

    Aber ich denke ich bin so auf einem guten Weg zu einer anständigen HTML5 Website ohne den ganzen Overhead den solche Frameworks mit sich bringen.

    0
  • S
    Mod

    Dann empfehle ich dir Silex oder Slim.

    Einfach nur damit du kein rohes PHP schreiben musst - es lohnt sich wirklich.

    Die beiden sind Microframeworks, dh sie zwingen dir keine komplexen Strukturen auf sondern helfen dir bei Standard Aufgaben.

    0
Anmelden zum Antworten