MovableType: Ein Template für mobile Geräte
An dieser Stelle habe ich meine Vorlagen für die Indexseiten sowie die Artikel und Seiten dokumentiert.
Zuerst habe ich zwei Vorlagenbausteine erstellt die ich in den beiden Index und Archivvorlagen wiederverwende.
Vorlage Mobile Header: Hier ist auch der Punkt an dem man sein eigenes Layout und eigene Farben einbringen kann. Bei mir passen die Farben aus dem Default CSS File zufällig recht gut mit meinem normalen Layout. Ist das nicht der Fall gilt es die CSS Datei anzupassen und auf die eigeneDatei zu verweisen.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title><$MTBlogName$></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="robots" content="noindex" /> </head> <body>
Vorlage "Mobile Footer". Die Fußzeile "steht" am unteren Rand des Bildschirms und enthält Links auf die Seiten die ich in meinem Blog auf der rechte Seite bereitstelle.
<div data-role="footer" data-position="fixed"> <div data-role="navbar" data-type="horizontal"> <ul> <li><a href="<$MTBlogURL$>m/nistkasten/meisen-cam.html" data-role="button">Meisen-Cam</a></li> <li><a href="<$MTBlogURL$>m/2010/06/wir-speichern-nicht.html" data-role="button">Wir speichern nicht</a></li> <li><a href="<$MTBlogURL$>m/2010/04/Ein-kleines-Zeichen-fuer-Solidarit%C3%A4t-mit-unseren-Soldaten.html" data-role="button">Gelbes Band</a></li> </ul> <ul> <li><a href="<$MTBlogURL$>m/mobile-archive-monthly.html" data-role="button">Monatsarchiv</a></li> <li><a href="<$MTBlogURL$>m/index.html" data-role="button">Home</a></li> <li><a href="<$MTBlogURL$>m/im.html" data-role="button">Impressum</a></li> </ul> </div> </div> </div> </body> </html>
Die Vorlage "Mobile Index" erstellt die "Hauptindex" Seite für den Blog der mobilen Geräten angezeigt werden soll. Unter den Vorlagen Optionen habe ich für die Ausgabedatei "m/index.html" angegeben
<$mt:Include module="Mobile Header"$> <div data-role="page" id="Archive"> <div data-role="header"> <h1><$MTBlogName$></h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <MTEntries lastn="15" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>m/<$mt:EntryDate format="%Y/%m"$>/<$MTEntryBasename separator="-"$>.html"><h3><$MTEntryTitle$></h3><p>Veröffentlicht am: <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries> </ul> </div> <$mt:Include module="Mobile Footer"$>
Mobiles Monatsarchiv:Da ich kaum Kategorien verwende brauche ich jetzt nur noch eine Vorlage für die Monatsarchive. Die Ausgabedatei ist "m/mobile-archive-monthly.html"
<$mt:Include module="Mobile Header"$>
<div data-role="page" id="Blog">
<div data-role="header">
<h1><$MTBlogName$></h1>
<a href="<$mt:BlogURL$>m/index.html" data-role="button" data-icon="home" class="ui-btn-left">Home</a>
</div>
<MTArchiveList archive_type="Monthly">
<div data-role="collapsible" data-collapsed="true">
<h3><$MTArchiveTitle$></h3>
<ul data-role="listview" data-inset="true">
<MTEntries lastn="9999" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>m/<$mt:EntryDate format="%Y/%m"$>/<$MTEntryBasename separator="-"$>.html"><h3><$MTEntryTitle$></h3><p>Veröffentlicht am: <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries>
</ul>
</div>
</MTArchiveList>
<$mt:Include module="Mobile Footer"$>
<div data-role="page" id="Blog">
<div data-role="header">
<h1><$MTBlogName$></h1>
<a href="<$mt:BlogURL$>m/index.html" data-role="button" data-icon="home" class="ui-btn-left">Home</a>
</div>
<MTArchiveList archive_type="Monthly">
<div data-role="collapsible" data-collapsed="true">
<h3><$MTArchiveTitle$></h3>
<ul data-role="listview" data-inset="true">
<MTEntries lastn="9999" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>m/<$mt:EntryDate format="%Y/%m"$>/<$MTEntryBasename separator="-"$>.html"><h3><$MTEntryTitle$></h3><p>Veröffentlicht am: <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries>
</ul>
</div>
</MTArchiveList>
<$mt:Include module="Mobile Footer"$>
Einzelne Artikel werden über die Vorlage "Mobile Entry" erstellt (Archivverknüpfung : "m/%y/%m/%-f")
<$mt:Include module="Mobile Header"$> <div data-role="page" id="Blog"> <div data-role="header"> <h1><$mt:EntryTitle encode_html="1"$></h1> <a href="<$mt:BlogURL$>m/index.html" data-role="button" data-icon="home">Home</a> </div> <div data-role="controlgroup" data-type="horizontal"> <MTEntryNext><a data-role="button" data-icon="arrow-u"href="<$mt:BlogURL$>m/<$mt:EntryDate format="%Y/%m"$>/<$MTEntryBasename separator="-"$>.html">Nächster Beitrag</a></MTEntryNext> <MTEntryPrevious><a data-role="button" data-icon="arrow-d" href="<$mt:BlogURL$>m/<$mt:EntryDate format="%Y/%m"$>/<$MTEntryBasename separator="-"$>.html">Vorheriger Beitrag</a></MTEntryPrevious> </div> <$MTEntryBody$> <$MTEntryMore$> <span class="byline"> <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr> </span> <mt:If tag="EntryCommentCount"> <div data-role="collapsible" data-collapsed="true"> <h3><$mt:EntryCommentCount singular="Kommentar" plural="Kommentare" none="Keine Kommentare"$></h3> <mt:Comments><p> <blockquote><$mt:CommentBody$></blockquote> <cite><$mt:CommentDate$> von <$mt:CommentAuthorLink$></cite></p> </mt:Comments> </div> </mt:If> <$mt:Include module="Mobile Footer"$>
Und die Seiten über die Vorlage "Mobile Page" (Archivverknüpfung "m/%-c/%-f")
<$mt:Include module="Mobile Header"$> <div data-role="page" id="Blog"> <div data-role="header"> <h1><$mt:PageTitle encode_html="1"$></h1> <a href="<$mt:BlogURL$>m/index.html" data-role="button" data-icon="home">Home</a> </div> <$mt:PageBody$> <$mt:Include module="Mobile Footer"$>