Permalink

0

Dynamischer Content in statischen Seiten

Da hab ich schon lan­ge nichts mehr ver­öf­fent­licht, und dann ist der ers­te neue Bei­trag auch noch so etwas bana­les wie die­ser klei­ne Schnip­sel aus der Pra­xis… Die Lösung des Pro­blems, das mich seit eini­ger Zeit umge­trie­ben hat, woll­te ich aber nicht für mich behal­ten.

Fol­gen­de Pro­blem­stel­lung: Gege­ben ist eine Web­site, deren Inhal­te in wei­ten Tei­len vor­ge­ge­ben ist. Es han­delt sich im wei­tes­ten Sin­ne um eine Lan­ding­pa­ge, eine Über­sichts­sei­te, die auf wei­te­re Inhal­te hin­wei­sen und auf die­se ver­lin­ken soll. So weit, so sta­tisch. Auf die­ser Sei­te soll aber ein Bereich aktu­el­le Neu­ig­kei­ten anzei­gen. Und das mög­lichst ohne jedes­mal das HTML direkt bear­bei­ten zu müs­sen. Jetzt könn­te man natür­lich an so etwas wie iFrames den­ken oder dar­an, dass man mit dem .load()-Befehl exter­ne .html-Datei­en ein­bin­den könn­te. Damit müss­te man sich aber nach wie vor mit läs­ti­gem html-gecode her­um­schla­gen. Eigent­lich, so dach­te ich, müss­te sich das doch auch mit jQue­ry lösen las­sen und da ich dar­über hin­aus gro­ßer Mark­down-Fan1 gewor­den bin, lag es nahe, als Quel­le .md-Datei­en ein­zu­bin­den und die­se par­sen zu las­sen, sodass am Ende ohne gro­ßen Auf­wand eine wohl­for­ma­tier­te Info­box steht.

Umsetzung

Wohl­an denn, frisch ans Werk. Als ein­fa­ches Grund­ge­rüst sieht die gesam­te Imple­men­tie­rung so aus:

Betrach­ten wird den Code Schritt für Schritt:
In das Grund­ge­rüst der Sei­te sind im head-Bereich die rele­van­ten Skrip­te (jQuery und marked) ein­ge­bun­den; bei marked han­delt es sich dabei um einen Mark­down-Par­ser, der lokal im Ord­ner scripts gespei­chert ist:

In dem eigent­li­chen Skript wird zunächst eine Varia­ble inhalt initia­li­siert, wel­che dann mit dem Inhalt der exter­nen Datei news.md gefüllt wird:

Dem im body-Bereich des Doku­men­tes plat­zier­ten Ele­ment mit der ID content müs­sen wir anschlie­ßend nur noch den Inhalt der Varia­ble über­ge­ben:

Fer­tig. Jetzt soll­te der Inhalt der .md-Datei kor­rekt for­ma­tiert ange­zeigt wer­den. Zum loka­len Tes­ten soll­te man aller­dings Fire­fox ver­wen­den, da Chro­me die Ein­bin­dung loka­ler Datei­en anders hand­habt. Wird die Sei­te von einem Ser­ver gela­den, zeigt natür­lich auch Chro­me den Inhalt kor­rekt an.

Weiterführende Überlegungen

Anstatt nur ein ein­zi­ges Ele­ment dyna­misch erzeu­gen zu las­sen, könn­te man je nach Anwen­dungs­be­reich durch­aus dar­über nach­den­ken, meh­re­re div-Con­tai­ner dyna­misch befül­len zu las­sen. Auf die­se Wei­se lie­ßen sich etwa ver­schie­de­ne Arten von Lis­ten — ich den­ke etwa an Publi­ka­ti­ons­lis­ten im aka­de­mi­schen Rah­men — oder ande­re Inhal­te bequem auf einer Home­page ver­wal­ten ohne gleich ins Grund­ge­rüst ein­grei­fen zu müs­sen. Wird der Inhalt nicht unent­wegt mehr, sodass die Sei­te immer län­ger wer­den wür­de, wie es etwa bei Blogs der Fall wäre, könn­te man die­se Metho­de als eine Art mini­ma­les CMS ein­set­zen.


  1. Für alle, die bis­lang nichts mit Mark­down zu tun hat­ten: Es han­delt sich hier­bei um eine Aus­zeich­nungs­spra­che, die die Arbeit mit HTML — und mit ande­ren For­ma­ten — deut­lich erleich­tert, da sie eine auch für Lai­en ver­ständ­li­che Syn­tax auf­weist. Außer­dem han­delt es sich um nichts ande­res als ein­fa­che Text­da­tei­en, die schnell und ein­fach auch von Mobil­ge­rä­ten aus syn­chro­ni­siert wer­den kön­nen, ohne gro­ße Daten­men­gen her­um­schie­ben zu müs­sen. 

    2 Klicks für mehr Datenschutz: Erst nach einem Klick wird der Button aktiv, da schon beim Aktivieren Daten an Dritte übertragen werden können.

Kategorien Technik & IT, Web & Webdesign Schlagwörter , ,

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.