Last active
August 29, 2015 14:20
-
-
Save haschek/a561faa1cf8ed5810810 to your computer and use it in GitHub Desktop.
Vorlage Theme: A Bootstrap Template for Tumblr Themes. http://eye48.com/go/vorlagetheme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html class="{select:Layout}"> | |
| <head> | |
| {block:Hidden} | |
| <!-- | |
| Vorlage Theme: A Boilerplate to bootstrap Tumblr Themes. | |
| ======================================================== | |
| You can use it as foundation to develop your own Tumblr theme. | |
| It primarily focuses on Tumblr template tags and demonstrates | |
| their features. It comes with basic HTML markup and simple | |
| responsive CSS layout, it's supposed to be changed. | |
| @see https://www.tumblr.com/docs/custom_themes | |
| @see https://www.tumblr.com/docs/localizing_themes | |
| @see https://groups.google.com/group/tumblr-themes | |
| @see http://developers.tumblr.com/ | |
| ## License: CC-BY 4.0 | |
| You can use Vorlage Theme free of charge for personal and | |
| commercial projects under the CC-BY 4.0 International License. | |
| Please attribute usage in site footer or imprint page, including | |
| a link to http://eye48.com/go/vorlagetheme | |
| Permissions beyond the scope of this license may be | |
| available at http://48augen.de/. | |
| @link http://eye48.com/go/vorlagetheme | |
| @version 1.0.0 | |
| @author Michael Haschke <http://michael.haschke.biz/> | |
| @license http://creativecommons.org/licenses/by/4.0/ | |
| --> | |
| {/block:Hidden} | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| {block:Hidden} | |
| <!-- | |
| ## Configuration Options | |
| Beside global config option like ``{HeaderImage}`` you can define | |
| your own config option for font and color values, false/true switches, | |
| text and select options. | |
| @see https://www.tumblr.com/docs/de/custom_themes#theme-options | |
| --> | |
| <meta name="select:Layout" content="layout-left" title="Left"> | |
| <meta name="select:Layout" content="layout-center" title="Centered"> | |
| <meta name="select:Fontsize" content="1.1em" title="Normal"> | |
| <meta name="select:Fontsize" content="1.35em" title="Big"> | |
| <meta name="select:Fontsize" content="0.85em" title="Small"> | |
| <meta name="font:Title" content="sans-serif"> | |
| <meta name="color:Title" content="#660000"> | |
| <meta name="font:Text" content="serif"> | |
| <meta name="color:Text" content="#333333"> | |
| <meta name="color:Background" content="#ffffff"> | |
| <meta name="color:Accent" content="#000066"> | |
| <meta name="if:Show Archive Link" content="1"> | |
| <meta name="if:Show Keyword Search" content="1"> | |
| <meta name="if:Give SEO Credits for Links and Reblogs" content="1"> | |
| <meta name="if:Prevent Double Content on Index Pages" content="1"> | |
| <meta name="text:Disqus shortname" content=""> | |
| <meta name="text:Website URL" content=""> | |
| <meta name="text:Facebook URL" content=""> | |
| {/block:Hidden} | |
| {block:Hidden} | |
| <!-- | |
| ## Title and Meta Description | |
| The title should be represent the shown content of the page | |
| because it is used in the browser title bar and on result | |
| pages of search engines. The ``{MetaDescription}`` tag | |
| contains the blog description on index pages and a preview | |
| of the post content on permaling pages. | |
| @see https://www.tumblr.com/docs/de/custom_themes#basic_variables | |
| --> | |
| {/block:Hidden} | |
| <title> | |
| {block:PermalinkPage} | |
| {block:PostSummary} | |
| {PostSummary} — | |
| {/block:PostSummary} | |
| {/block:PermalinkPage} | |
| {block:SearchPage} | |
| {lang:Search results for SearchQuery} — | |
| {/block:SearchPage} | |
| {block:TagPage} | |
| {lang:Archive}: {Tag} — | |
| {/block:TagPage} | |
| {block:DayPage} | |
| {lang:Archive}: {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} — | |
| {/block:DayPage} | |
| {Title} | |
| {block:IndexPage} | |
| ({lang:Page CurrentPage of TotalPages}) | |
| {block:IndexPage} | |
| </title> | |
| {block:Description} | |
| <meta name="description" content="{MetaDescription}" /> | |
| {/block:Description} | |
| {block:Hidden} | |
| <!-- | |
| ## Basic options for Search Engine Optimization (SEO) | |
| Try to prevent double content on your page if you can, or | |
| your page may be rated down. Index pages hold content of all | |
| single posts, so we should try that they are not indexed | |
| by search engines. If you add link posts and reblog posts | |
| from other Tumblr blogs your page double their content, | |
| prevent indexing those page, too. Addionally you can | |
| credit the original work via canonical links. | |
| --> | |
| {/block:Hidden} | |
| {block:IfPreventDoubleContentonIndexPages} | |
| {block:Hidden} | |
| <!-- prevent double content of index pages. --> | |
| {/block:Hidden} | |
| {block:IndexPage}<meta name="robots" content="noindex, follow" />{/block:IndexPage} | |
| {/block:IfPreventDoubleContentonIndexPages} | |
| {block:IfGiveSeoCreditsForLinksAndReblogs} | |
| {block:Hidden} | |
| <!-- do not hijack other content, give credit to the original source --> | |
| {/block:Hidden} | |
| {block:Posts}{block:PermalinkPage} | |
| {block:RebloggedFrom}<link rel="canonical" href="{ReblogRootURL}" />{/block:RebloggedFrom} | |
| {block:Link}<link rel="canonical" href="{URL}" />{/block:Link} | |
| {/block:PermalinkPage}{/block:Posts} | |
| {/block:IfGiveSeoCreditsForLinksAndReblogs} | |
| {block:Hidden} | |
| <!-- | |
| ## Favicon and Logo used for Touch Icon | |
| You probably can ignore tag for touch icon on iPhone | |
| devices, but set a favicon. | |
| --> | |
| {/block:Hidden} | |
| <link rel="shortcut icon" href="{Favicon}" /> | |
| <link rel="apple-touch-icon" href="{PortraitURL-128}" /> | |
| {block:Hidden} | |
| <!-- | |
| ## RSS Feeds | |
| Add the standard RSS feed, RSS feed for tags on their | |
| archive pages, and comments feed. Even if RSS is not | |
| so popular as it was when the Blogosphere did hit the world | |
| but it is still useful for your readers and search engines. | |
| --> | |
| {/block:Hidden} | |
| <link rel="alternate" type="application/rss+xml" href="{RSS}" title="{lang:Subscribe via RSS}: {PlaintextTitle}" /> | |
| {block:TagPage} | |
| {block:Hidden} | |
| <!-- looks like ``{TagURL}`` is not working here anymore. | |
| @see https://www.tumblr.com/docs/de/custom_themes#tags --> | |
| {/block:Hidden} | |
| <link rel="alternate" type="application/rss+xml" href="/tagged/{URLSafeTag}/rss" title="{lang:Subscribe via RSS}: {lang:Posts tagged Tag}" /> | |
| {/block:TagPage} | |
| {block:IfDisqusShortname} | |
| <link rel="alternate" type="application/rss+xml" href="http://{text:Disqus Shortname}.disqus.com/latest.rss" title="{lang:Subscribe via RSS}: {lang:Recent comments}" /> | |
| {/block:IfDisqusShortname} | |
| {MobileAppHeaders} | |
| {block:Hidden} | |
| <!-- | |
| ## CSS Rules | |
| Only some basic rules, remove them and add yours. Using | |
| config values here, don't forget ``{CustomCSS}`` as last | |
| element before closing styles. | |
| This block uses config options and it demonstrates usage | |
| for RGBcolor transformations. | |
| @see https://www.tumblr.com/docs/de/custom_themes#theme-options | |
| @see https://www.tumblr.com/docs/de/custom_themes#variable-transformations | |
| --> | |
| {/block:Hidden} | |
| <style type="text/css"> | |
| /* Layout */ | |
| html { | |
| background-color: {color:Background}; | |
| {block:ShowHeaderImage} | |
| background-image: linear-gradient( to bottom, rgba({RGBcolor:Text}, 0.25), rgba({RGBcolor:Background}, 0.25)), url({HeaderImage}); | |
| background-attachment: fixed; | |
| background-size: cover; | |
| background-position: center; | |
| {/block:ShowHeaderImage} | |
| color: {color:Text}; | |
| font-size: 0.9em; | |
| line-height: 1.6; | |
| padding: 1rem; | |
| } | |
| a { | |
| color: {color:Accent}; | |
| text-decoration: underline; | |
| } | |
| a:focus, a:hover { | |
| text-decoration: none; | |
| } | |
| .avatar-circle .avatar { | |
| border-radius: 100%; | |
| overflow: hidden; | |
| } | |
| #header, #main, #sidebar, #footer { | |
| padding: 1rem; | |
| } | |
| header, h1, h2, h3, h4 { | |
| font-family: {font:Title}; | |
| color: {color:Title}; | |
| } | |
| header p { | |
| color: {color:Text}; | |
| } | |
| .layout-center header { | |
| text-align: center; | |
| } | |
| .bloglogo { | |
| height: 4.8rem; | |
| border: solid 0.25rem rgba({RGBcolor:Background}, 0.5); | |
| } | |
| .blogtitle { | |
| font-size: 2.4rem; | |
| display: block; | |
| font-weight: {TitleFontWeight}; | |
| margin: 0.125rem 0; | |
| } | |
| .blogtitle a { | |
| color: {color:Background}; | |
| background-color: rgba({RGBcolor:Title}, 0.8); | |
| padding: 0.125rem 0; | |
| text-decoration: none; | |
| } | |
| .blogdescription { | |
| font-size: 1.6rem; | |
| font-weight: normal; | |
| color: {color:Text}; | |
| background-color: rgba({RGBcolor:Background}, 0.8); | |
| padding: 0.125rem 0; | |
| } | |
| #header nav { | |
| text-transform: uppercase; | |
| font-family: {font:Title}; | |
| } | |
| #header nav a { | |
| color: {color:Background}; | |
| background-color: rgba({RGBcolor:Title}, 0.8); | |
| border: none; | |
| padding: 0.5rem; | |
| line-height: 1; | |
| white-space: nowrap; | |
| } | |
| nav li { | |
| display: inline-block; | |
| margin: 0 0.125rem 0.75rem 0; | |
| } | |
| #header form { | |
| display: inline-block; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| dt, dd { | |
| display: inline-block; | |
| margin: 0 0.125rem; | |
| } | |
| dt { | |
| font-weight: bold; | |
| } | |
| nav ol, nav ul { | |
| padding-left: 0; | |
| margin-left: 0; | |
| } | |
| #search button, | |
| #search input { | |
| font-family: {font:Title}; | |
| color: {color:Background}; | |
| background-color: {color:Title}; | |
| border: none; | |
| padding: 0.5rem; | |
| margin: 0; | |
| font-size: 1rem; | |
| line-height: 1; | |
| } | |
| #search input { | |
| color: {color:Text}; | |
| background-color: {color:Background}; | |
| } | |
| #sidebar { | |
| background-color: rgba({RGBcolor:Background}, 0.75); | |
| } | |
| #main { | |
| background-color: {color:Background}; | |
| } | |
| hr { | |
| width: 62.5%; | |
| margin: 3.2rem auto 3.2rem 0; | |
| border: 0; | |
| border-top: solid 1px rgba({RGBcolor:Accent}, 0.25); | |
| } | |
| .layout-center hr { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .hideme { | |
| position: absolute; | |
| left: -5000em; | |
| } | |
| .control-button iframe, | |
| .control-button svg { | |
| vertical-align: middle; | |
| } | |
| .layout-center #pagination { | |
| text-align: center; | |
| } | |
| #footer { | |
| color: {color:Background}; | |
| background-color: {color:Text}; | |
| } | |
| #footer a { | |
| color: {color:Background}; | |
| } | |
| #profiles { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| #profiles li { | |
| display: inline-block; | |
| margin-right: 0.4em; | |
| } | |
| @media (min-width: 50em) { | |
| html { | |
| padding: 1.6rem 3.2rem; | |
| font-size: {select:Fontsize}; | |
| font-family: {font:Text}; | |
| } | |
| #header, #main, #sidebar, #footer { | |
| max-width: 50em; | |
| padding: 1.6rem 3.2rem; | |
| } | |
| .layout-center #header, | |
| .layout-center #main, | |
| .layout-center #sidebar, | |
| .layout-center #footer { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } | |
| /* Text */ | |
| h1 { | |
| font-size: 3.2rem; | |
| } | |
| .post-description h1 { | |
| font-size: 2.4rem; | |
| } | |
| h2 { | |
| font-size: 1.6rem; | |
| } | |
| header > h1:first-child, | |
| header > h2:first-child { | |
| margin-top: 0; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| line-height: inherit; | |
| margin-bottom: 0.8rem; | |
| line-height: 1.2; | |
| } | |
| blockquote, q { | |
| font-style: italic; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| width: auto; | |
| } | |
| figure { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| /* Link */ | |
| .is-link img { | |
| max-width: 38%; | |
| max-height: 6.4em; | |
| float: left; | |
| margin-right: 1.6em; | |
| } | |
| .is-link .post-description { | |
| overflow: hidden; | |
| } | |
| /* Quote */ | |
| blockquote.quote { | |
| margin: 0 0 1.6rem 0; | |
| } | |
| blockquote.short { | |
| font-size: 3.2rem; | |
| } | |
| blockquote.medium { | |
| font-size: 2.2rem; | |
| } | |
| blockquote.long { | |
| font-size: 1.2rem; | |
| } | |
| /* Photo */ | |
| .media-photo img { | |
| display: block; | |
| height: auto; | |
| width: auto; | |
| max-height: 90vh; | |
| } | |
| .layout-center .media-photo img { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Photoset */ | |
| .media-photoset iframe { | |
| display: block; | |
| max-width: 700px; | |
| } | |
| .layout-center .media-photoset iframe { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Video */ | |
| .media-video { | |
| width: 100%; | |
| height: 0; | |
| padding-bottom: 56.25%; | |
| position: relative; | |
| } | |
| .media-video iframe { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Video */ | |
| .media-audio iframe { | |
| display: block; | |
| max-width: 700px; | |
| width: 100%; | |
| max-height: 70vh; | |
| } | |
| .layout-center .media-audio iframe { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Chat */ | |
| .conversation { | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .conversation li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .chat-odd strong { | |
| color: {color:Accent}; | |
| } | |
| /* Post Notes & Following*/ | |
| .notes, | |
| #following ol, | |
| #groupblog ol | |
| { | |
| padding-left: 0; | |
| } | |
| #notes .note, | |
| #following li, | |
| #groupblog li | |
| { | |
| display: inline-block; | |
| margin-left: 0; | |
| margin-right: 1rem; | |
| margin-bottom: 0.25em; | |
| } | |
| .notes .avatar, | |
| #following .avatar, | |
| #groupblog .avatar | |
| { | |
| height: 1.6rem; | |
| vertical-align: middle; | |
| margin-right: 0.25rem; | |
| } | |
| /* Likes */ | |
| #likes { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| overflow: hidden; | |
| } | |
| #likes li { | |
| position: relative; | |
| height: 10em; | |
| overflow: hidden; | |
| margin-bottom: 1.6em; | |
| background-color: {color:Background}; | |
| } | |
| #likes img { | |
| width: 100%; | |
| min-height: 10em; | |
| height: auto; | |
| } | |
| #likes .post_info_bottom { | |
| display: block !important; | |
| background-color: rgba({RGBcolor:Background}, 0.5); | |
| padding: 0.8em; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| font-size: 0.8em; | |
| } | |
| #likes .post_info_bottom a:first-child { | |
| color: {color:Background}; | |
| background-color: {color:Accent}; | |
| font-weight: bold; | |
| } | |
| @media (min-width: 50em) { | |
| #likes > li { | |
| float:left; | |
| width: 30%; | |
| } | |
| #likes > li:nth-of-type(3n + 1) { | |
| clear: left; | |
| } | |
| #likes > li:nth-of-type(3n + 2) { | |
| margin: 0 5%; | |
| } | |
| } | |
| {CustomCSS} | |
| </style> | |
| </head> | |
| <body data-urlencoded-name="{URLEncodedName}" class="avatar-{AvatarShape}"> | |
| {block:Hidden} | |
| <!-- | |
| ## Header | |
| The page header contains logo/avatar, title, blog description | |
| and the navigation. Tumblr block tags are used here to show or | |
| hide some of that contents. Some parts are not included (e.g. | |
| logo and description), some parts are included but hidden (e.g. | |
| the blog title), it they are configured to not to be shown. No | |
| usage of headlines here because the global <header> is used and | |
| headlines are getting used for the main content. | |
| @see https://www.tumblr.com/docs/de/custom_themes#global_appearance | |
| --> | |
| {/block:Hidden} | |
| <header id="header"> | |
| {block:ShowAvatar} | |
| <a href="{BlogURL}"><img class="avatar bloglogo" src="{PortraitURL-128}" alt="" /></a> | |
| {/block:ShowAvatar} | |
| <p> | |
| <strong class="blogtitle{block:HideTitle} hideme{block:HideTitle}"> | |
| <a href="{BlogURL}">{Title}</a> | |
| </strong> | |
| {block:ShowDescription} | |
| <span class="blogdescription"> | |
| {Description} | |
| </span> | |
| {/block:ShowDescription} | |
| </p> | |
| {block:Hidden} | |
| <!-- | |
| ### Navigation | |
| If enabled, the navigation contains links to pages/forwardings, question | |
| and submit forms, content archive and keyword search. | |
| @see https://www.tumblr.com/docs/de/custom_themes#navigation | |
| --> | |
| {/block:Hidden} | |
| <nav> | |
| <ol> | |
| {block:HasPages} | |
| {block:Pages} | |
| <li> | |
| <a href="{URL}" class="page">{Label}</a> | |
| </li> | |
| {/block:Pages} | |
| {/block:HasPages} | |
| {block:IfShowArchiveLink} | |
| <li> | |
| <a href="/archive" class="archive">{lang:Archive}</a> | |
| </li> | |
| {/block:IfShowArchiveLink} | |
| {block:AskEnabled} | |
| <li> | |
| <a href="/ask" class="ask">{AskLabel}</a> | |
| </li> | |
| {/block:AskEnabled} | |
| {block:SubmissionsEnabled} | |
| <li> | |
| <a href="/submit" class="submit">{SubmitLabel}</a> | |
| </li> | |
| {/block:SubmissionsEnabled} | |
| {block:IfShowKeywordSearch} | |
| <li> | |
| <form action="/search" method="get" id="search"> | |
| <label for="q" class="hideme">{lang:Search}</label> | |
| <input type="text" name="q" id="q" placeholder="{lang:Search}" value="{SearchQuery}"> | |
| <button type="submit">{lang:Search}</button> | |
| </form> | |
| </li> | |
| {/block:IfShowKeywordSearch} | |
| </ol> | |
| </nav> | |
| </header> | |
| <hr class="hideme" /> | |
| {block:Hidden} | |
| <!-- | |
| ## Main Content | |
| It contains the post index including headers for search, tag | |
| and day pages, or it contains the permalink post including | |
| share options, metadata, tags, notes and comments. The main | |
| content is finished by the pagination to navigate over index | |
| and permalink pages. | |
| --> | |
| {/block:Hidden} | |
| <main data-page-id="{CurrentPage}" id="main"> | |
| {block:Hidden} | |
| <!-- | |
| ### Index Page Header | |
| On index pages for keyword searches, tags and days we use | |
| headline level 1 to describe them. This part demonstrates | |
| how to use the localized template strings to improve | |
| internationalization (I18N) of the blog interface. | |
| @see https://www.tumblr.com/docs/de/localizing_themes | |
| --> | |
| {/block:Hidden} | |
| {block:SearchPage} | |
| <!-- Header: Search Archive --> | |
| <header> | |
| <h1> | |
| {lang:SearchResultCount results for SearchQuery 2} | |
| {block:NoSearchResults} | |
| {lang:No search results for SearchQuery 2} | |
| {/block:NoSearchResults} | |
| </h1> | |
| <p>{lang:Page CurrentPage of TotalPages}</p> | |
| </header> | |
| {/block:SearchPage} | |
| {block:TagPage} | |
| <!-- Header: Tag Archive --> | |
| <header> | |
| <h1>{lang:TagResultCount posts tagged Tag 3}</h1> | |
| <p>{lang:Page CurrentPage of TotalPages}</p> | |
| </header> | |
| {/block:TagPage} | |
| {block:DayPage} | |
| <!-- Header: Day Pages --> | |
| <header> | |
| <h1> | |
| {lang:Archive}: | |
| {block:English}{Month} {DayOfMonth}, {Year}{/block:English} | |
| {block:NotEnglish}{DayOfMonth}. {Month} {Year}{/block:NotEnglish} | |
| </h1> | |
| <p>{lang:Page CurrentPage of TotalPages}</p> | |
| </header> | |
| {/block:DayPage} | |
| {block:Hidden} | |
| <!-- | |
| ### Posts | |
| On index pages we use multiple ``<section>`` elements | |
| that contain one ``<article>`` (post) each. On permalink | |
| pages we only use the ``<article>`` markup. Vorlage Theme | |
| supports all Tumblr content types. | |
| @see https://www.tumblr.com/docs/de/custom_themes#posts | |
| --> | |
| {/block:Hidden} | |
| {block:Posts} | |
| {block:IndexPage}<section>{/block:IndexPage} | |
| <article | |
| class=" | |
| is-{PostType} | |
| {block:Photoset}is-photoset{/block:Photoset} | |
| {block:Answer}is-answer{/block:Answer} | |
| {block:RebloggedFrom}is-reblogged{/block:RebloggedFrom} | |
| {block:Date}is-post post-{PostID}{/block:Date} | |
| {block:PermalinkPage}is-permalink{/block:PermalinkPage} | |
| {TagsAsClasses} | |
| {block:IndexPage} | |
| {block:Odd}is-odd{/block:Odd} | |
| {block:Even}is-even{/block:Even} | |
| {/block:IndexPage} | |
| " | |
| {block:Date}data-post-id="post_{PostID}"{/block:Date} | |
| > | |
| {block:Hidden} | |
| <!-- | |
| #### Article Header | |
| We use a very own block for post title to insert | |
| always titles for a consistant structure. Most other | |
| other themes lack titles for some post types, e.g. | |
| photosets and audio posts. Headlines level 1 is | |
| used on permalink pages, on index pages we use | |
| level 2 headlines. | |
| The article header also contains the permalink, | |
| timestamp, author name and notes count. | |
| One comment on this @ Tumblr: you guys should | |
| support ``{PostSummary}`` tags on index pages! | |
| --> | |
| {/block:Hidden} | |
| <header> | |
| {block:PermalinkPage}<h1>{/block:PermalinkPage} | |
| {block:IndexPage}<h2>{/block:IndexPage} | |
| {block:Text} | |
| {block:IndexPage} | |
| <span class="hideme">{lang:Text}:</span> {block:Title}{Title}{/block:Title} | |
| {/block:IndexPage} | |
| {block:PermalinkPage} | |
| {block:PostSummary}{PostSummary}{/block:PostSummary} | |
| {/block:PermalinkPage} | |
| {/block:Text} | |
| {block:Photo} | |
| <span class="hideme">{lang:Photo}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span> | |
| {/block:Photo} | |
| {block:Photoset} | |
| <span class="hideme">{lang:Photoset}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span> | |
| {/block:Photoset} | |
| {block:Quote} | |
| <span class="hideme">{lang:Quote}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span> | |
| {/block:Quote} | |
| {block:Answer} | |
| <span class="hideme">{lang:Answer}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span> | |
| {/block:Answer} | |
| {block:Link} | |
| <span class="hideme">{lang:Link}:</span> | |
| <a href="{URL}" {Target}>{Name}{block:Host} ({Host}){/block:Host} ➯</a> | |
| {/block:Link} | |
| {block:Chat} | |
| {block:IndexPage} | |
| <span class="hideme">{lang:Chat}:</span> {block:Title}{Title}{/block:Title} | |
| {/block:IndexPage} | |
| {block:PermalinkPage} | |
| <span class="hideme">{lang:Chat}:</span> {block:PostSummary}{PostSummary}{/block:PostSummary} | |
| {/block:PermalinkPage} | |
| {/block:Chat} | |
| {block:Audio} | |
| <span class="hideme">{lang:Audio}: | |
| {block:Artist}{Artist}{/block:Artist} | |
| {block:TrackName}"{TrackName}"{/block:TrackName} | |
| {block:Album}({Album}){/block:Album}</span> | |
| {/block:Audio} | |
| {block:Video} | |
| <span class="hideme">{lang:Video}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span> | |
| {/block:Video} | |
| {block:Answer} | |
| <span class="hideme">{lang:Answer}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span> | |
| {/block:Answer} | |
| {block:PermalinkPage}</h1>{/block:PermalinkPage} | |
| {block:IndexPage}</h2>{/block:IndexPage} | |
| <p> | |
| {block:Date} | |
| <a href="{Permalink}" title="{lang:Permalink}{block:PostSummary}: {PlaintextPostSummary}{/block:PostSummary}" | |
| ><time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">{TimeAgo}</time></a> | |
| · | |
| {block:Submission} | |
| <a href="{SubmitterURL}">{Submitter}</a> | |
| · | |
| {/block:Submission} | |
| {block:Answer} | |
| {lang:Asked by Asker 2} | |
| · | |
| {/block:Answer} | |
| {PostAuthorName} | |
| {/block:Date} | |
| {block:RebloggedFrom} | |
| · {lang:Reblogged from} | |
| <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> | |
| {/block:RebloggedFrom} | |
| {block:NoteCount} | |
| · <a href="{Permalink}#notes">{NoteCountWithLabel}</a> | |
| {/block:NoteCount} | |
| </p> | |
| </header> | |
| {block:Hidden} | |
| <!-- | |
| #### Text | |
| @see https://www.tumblr.com/docs/de/custom_themes#text-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Text} | |
| {block:Body} | |
| <div class="post-description"> | |
| {Body} | |
| </div> | |
| {/block:Body} | |
| {/block:Text} | |
| {block:Hidden} | |
| <!-- | |
| #### Link | |
| @see https://www.tumblr.com/docs/de/custom_themes#link-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Link} | |
| <div class="post-description"> | |
| {block:Thumbnail} | |
| <img src="{Thumbnail}" alt="" class="avatar"> | |
| {/block:Thumbnail} | |
| {block:Description} | |
| {Description} | |
| {/block:Description} | |
| </div> | |
| {/block:Link} | |
| {block:Hidden} | |
| <!-- | |
| #### Chat | |
| @see https://www.tumblr.com/docs/de/custom_themes#chat-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Chat} | |
| <ul class="conversation"> | |
| {block:Lines} | |
| <li class="chat-{Alt}"> | |
| {block:Label}<strong>{Label}</strong>{/block:Label} | |
| <q>{Line}</q> | |
| </li> | |
| {/block:Lines} | |
| </ul> | |
| {/block:Chat} | |
| {block:Hidden} | |
| <!-- | |
| #### Photo | |
| @see https://www.tumblr.com/docs/de/custom_themes#photo-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Photo} | |
| <figure class="{block:Caption}with-caption{/block:Caption}"> | |
| <div class="media-photo"> | |
| {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag} | |
| </div> | |
| {block:Caption} | |
| <figcaption class="post-description"> | |
| {Caption} | |
| </figcaption> | |
| {/block:Caption} | |
| </figure> | |
| {/block:Photo} | |
| {block:Hidden} | |
| <!-- | |
| #### Photoset | |
| @see https://www.tumblr.com/docs/de/custom_themes#photoset-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Photoset} | |
| <figure class="{block:Caption}with-caption{/block:Caption}"> | |
| <div class="media-photoset"> | |
| {Photoset} | |
| </div> | |
| {block:Caption} | |
| <figcaption class="post-description"> | |
| {Caption} | |
| </figcaption> | |
| {/block:Caption} | |
| </figure> | |
| {/block:Photoset} | |
| {block:Hidden} | |
| <!-- | |
| #### Quote | |
| @see https://www.tumblr.com/docs/de/custom_themes#quote-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Quote} | |
| <figure class="{block:Source}with-caption{/block:Source}"> | |
| <blockquote class="quote {Length}"> | |
| {Quote} | |
| </blockquote> | |
| {block:Source} | |
| <figcaption class="post-description"> | |
| {Source} | |
| </figcaption> | |
| {/block:Source} | |
| </figure> | |
| {/block:Quote} | |
| {block:Hidden} | |
| <!-- | |
| #### Audio | |
| @see https://www.tumblr.com/docs/de/custom_themes#audio-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Audio} | |
| <figure class="{block:Caption}with-caption{/block:Caption}"> | |
| <div class="media-audio"> | |
| {block:AudioEmbed} | |
| {AudioEmbed} | |
| {/block:AudioEmbed} | |
| {block:AudioPlayer} | |
| {AudioPlayer} | |
| {/block:AudioPlayer} | |
| </div> | |
| {block:Caption} | |
| <figcaption class="post-description"> | |
| {Caption} | |
| </figcaption> | |
| {/block:Caption} | |
| </figure> | |
| {/block:Audio} | |
| {block:Hidden} | |
| <!-- | |
| #### Video | |
| @see https://www.tumblr.com/docs/de/custom_themes#video-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Video} | |
| <figure class="{block:Caption}with-caption{/block:Caption}"> | |
| <div class="media-video"> | |
| {VideoEmbed-700} | |
| </div> | |
| {block:Caption} | |
| <figcaption class="post-description"> | |
| {Caption} | |
| </figcaption> | |
| {/block:Caption} | |
| </figure> | |
| {/block:Video} | |
| {block:Hidden} | |
| <!-- | |
| #### Answer | |
| @untested | |
| @see https://www.tumblr.com/docs/de/custom_themes#answer-posts | |
| --> | |
| {/block:Hidden} | |
| {block:Answer} | |
| <div class="post-description"> | |
| <div class="question"> | |
| <blockquote class="long"> | |
| {lang:Asker asked}: {Question} | |
| </blockquote> | |
| </div> | |
| <div class="answer"> | |
| {block:Answerer} | |
| <p><strong>{Answerer}</strong></p> | |
| {/block:Answerer} | |
| {Replies} | |
| </div> | |
| </div> | |
| {/block:Answer} | |
| {block:Hidden} | |
| <!-- | |
| #### Read More | |
| --> | |
| {/block:Hidden} | |
| {block:More} | |
| <p><a href="{Permalink}">{lang:Read more} ➯</a></p> | |
| {/block:More} | |
| <hr/> | |
| {block:PermalinkPage} | |
| <footer> | |
| {block:Hidden} | |
| <!-- | |
| #### Share Buttons | |
| Insert links to share the tumblr post on social networks | |
| like Facebook, Twitter, Pinterest and via Email. Using | |
| the Tumblr buttons to like and reblog the post. | |
| @see https://www.tumblr.com/docs/de/custom_themes#like_and_reblog_buttons | |
| --> | |
| {/block:Hidden} | |
| <dl> | |
| <dt>{lang:Share this}:</dt> | |
| {block:Date} | |
| <dd class="control like-control control-button"> | |
| {LikeButton} | |
| </dd> | |
| <dd class="control reblog-control control-button"> | |
| {ReblogButton} | |
| </dd> | |
| {/block:Date} | |
| <dd> | |
| <a href="http://facebook.com/sharer.php?u={URLEncodedPermalink}&t={URLEncodedTitle}" target="_blank">Facebook</a> | |
| </dd> | |
| <dd> | |
| <a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" target="_blank">Tweet</a> | |
| </dd> | |
| {block:Photo} | |
| <dd> | |
| <a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={PhotoURL-500}" target="_blank">Pinterest</a> | |
| </dd> | |
| {/block:Photo} | |
| {block:Video} | |
| {block:VideoThumbnail} | |
| <dd> | |
| <a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={VideoThumbnailURL}&is_video=true" target="_blank">Pinterest</a> | |
| </dd> | |
| {/block:VideoThumbnail} | |
| {/block:Video} | |
| <dd> | |
| <a href="mailto:?subject={URLEncodedShareString}&body={URLEncodedMailSummary}">Mail</a> | |
| </dd> | |
| </dl> | |
| {block:Hidden} | |
| <!-- | |
| #### Metadata | |
| Metadata is important! always! Beside the timestamp | |
| (it's above the post content) it includes tags and | |
| credentials for reblogs, original content source and | |
| submitter name. | |
| @see https://www.tumblr.com/docs/de/custom_themes#tags | |
| @see https://www.tumblr.com/docs/de/custom_themes#reblogs | |
| @see https://www.tumblr.com/docs/de/custom_themes#content-sources | |
| @see https://www.tumblr.com/docs/de/custom_themes#submissions | |
| --> | |
| {/block:Hidden} | |
| <dl> | |
| {block:Exif} | |
| <dt>{lang:Photo}</dt> | |
| <dd> | |
| {block:Camera}{Camera}{/block:Camera} | |
| {block:Aperture}{Aperture}{/block:Aperture} | |
| {block:Exposure}{Exposure}{/block:Exposure} | |
| {block:FocalLength}{FocalLength}{/block:FocalLength} | |
| </dd> | |
| {/block:Exif} | |
| {block:HasTags} | |
| <dt>{lang:Filed under}:</dt> | |
| {block:Tags} | |
| <dd><a href="{TagURL}">{Tag}</a></dd> | |
| {/block:Tags} | |
| {/block:HasTags} | |
| {block:RebloggedFrom} | |
| <dt>{lang:Reblogged}:</dt> | |
| <dd><a href="{ReblogParentURL}">{ReblogParentName}</a></dd> | |
| {/block:RebloggedFrom} | |
| {block:ContentSource} | |
| <dt>{lang:Source}:</dt> | |
| <dd><a href="{SourceURL}">{SourceTitle}</a></dd> | |
| {/block:ContentSource} | |
| {block:Submission} | |
| <dt>{lang:Submitter}:</dt> <!-- no official Submitter translation? --> | |
| <dd><a href="{SubmitterURL}">{Submitter}</a></dd> | |
| {/block:Submission} | |
| </dl> | |
| </footer> | |
| <aside> | |
| {block:Hidden} | |
| <!-- | |
| #### Comments | |
| If Disqus is enabled (shortname of the Disqus | |
| channel is configuraed) then the Disqus Javascript | |
| is imported, including the Disqus channel URL as | |
| fallback for disabled Javascript. | |
| This section demonstrates how text configuration | |
| options are used. | |
| --> | |
| {/block:Hidden} | |
| {block:IfDisqusShortname} | |
| <section id="comments"> | |
| <h2>{lang:Recent comments}</h2> | |
| <div id="disqus_thread"> | |
| <noscript> | |
| <p> | |
| Please enable JavaScript to | |
| <a href="https://disqus.com/home/forums/{text:Disqus Shortname}/">view the comments</a>. | |
| </p> | |
| </noscript> | |
| </div> | |
| <script type="text/javascript"> | |
| (function() { | |
| var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; | |
| dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js'; | |
| (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); | |
| })(); | |
| </script> | |
| </section> | |
| {/block:IfDisqusShortname} | |
| {block:Hidden} | |
| <!-- | |
| #### Tumblr Notes | |
| Notes section shows when the post was liked and | |
| reblogged by other Tumblr users. | |
| @see https://www.tumblr.com/docs/de/custom_themes#notes | |
| --> | |
| {/block:Hidden} | |
| {block:PostNotes} | |
| <section id="notes"> | |
| {block:NoteCount} | |
| <h2>{lang:Notes}</h2> | |
| {/block:NoteCount} | |
| {PostNotes-16} | |
| </section> | |
| {/block:PostNotes} | |
| </aside> | |
| {/block:PermalinkPage} | |
| </article> | |
| {block:IndexPage}</section>{/block:IndexPage} | |
| {/block:Posts} | |
| {block:Hidden} | |
| <!-- | |
| ### Pagination | |
| Navigation between pages of the Tumblr blog. Three different | |
| types are available: | |
| * Pagination over Index Pages | |
| * Pagination over Day Pages | |
| * Pagination between Permalink Pages | |
| @see https://www.tumblr.com/docs/de/custom_themes#navigation | |
| @see https://www.tumblr.com/docs/de/custom_themes#day-pages | |
| --> | |
| {/block:Hidden} | |
| {block:Hidden} | |
| <!-- Index Pagination --> | |
| {/block:Hidden} | |
| {block:IndexPage} | |
| {block:Pagination} | |
| <nav id="pagination" data-current-page="{CurrentPage}" data-total-pages="{TotalPages}"> | |
| <ol> | |
| {block:PreviousPage} | |
| <li><a href="{PreviousPage}">{lang:Previous}</a></li> | |
| {/block:PreviousPage} | |
| {block:JumpPagination length="5"} | |
| {block:CurrentPage} | |
| <li><strong>{PageNumber}</strong></li> | |
| {/block:CurrentPage} | |
| {block:JumpPage} | |
| <li><a href="{URL}">{PageNumber}</a></li> | |
| {/block:JumpPage} | |
| {/block:JumpPagination} | |
| {block:NextPage} | |
| <li><a href="{NextPage}">{lang:Next}</a></li> | |
| {/block:NextPage} | |
| </ol> | |
| </nav> | |
| {/block:Pagination} | |
| {/block:IndexPage} | |
| {block:Hidden} | |
| <!-- Day Pagination --> | |
| {/block:Hidden} | |
| {block:DayPage} | |
| <nav id="pagination"> | |
| <ol> | |
| {block:PreviousDayPage} | |
| <li><a href="{PreviousDayPage}">{lang:Previous day}</a></li> | |
| {/block:PreviousDayPage} | |
| {block:NextDayPage} | |
| <li><a href="{NextDayPage}">{lang:Next day}</a></li> | |
| {/block:NextDayPage} | |
| </ol> | |
| </nav> | |
| {/block:DayPage} | |
| {block:Hidden} | |
| <!-- Permalink Pagination --> | |
| {/block:Hidden} | |
| {block:PermalinkPagination} | |
| <nav id="pagination"> | |
| <ol> | |
| {block:PreviousPost} | |
| <li><a href="{PreviousPost}">{lang:Previous post}</a></li> | |
| {/block:PreviousPost} | |
| {block:NextPost} | |
| <li><a href="{NextPost}">{lang:Next post}</a></li> | |
| {/block:NextPost} | |
| </ol> | |
| </nav> | |
| {/block:PermalinkPagination} | |
| </main> | |
| <hr class="hideme" /> | |
| {block:Hidden} | |
| <!-- | |
| ## Sidebar Content | |
| Secondary content like your last likes and followed blogs on Tumblr. | |
| It is only inserted on Index pages. | |
| --> | |
| {/block:Hidden} | |
| {block:IndexPage} | |
| <aside id="sidebar"> | |
| {block:Hidden} | |
| <!-- | |
| ### Likes | |
| Showing some Tumblr posts that you liked. | |
| @see https://www.tumblr.com/docs/de/custom_themes#likes | |
| --> | |
| {/block:Hidden} | |
| {block:Likes} | |
| <section> | |
| <h2><a href="http://www.tumblr.com/liked/by/{Name}">{lang:Likes}</a></h2> | |
| {Likes limit="6" summarize="144"} | |
| </section> | |
| {/block:Likes} | |
| {block:Hidden} | |
| <!-- | |
| ### Following | |
| Showing Tumblr blogs that you follow. | |
| @see https://www.tumblr.com/docs/de/custom_themes#following | |
| --> | |
| {/block:Hidden} | |
| {block:Following} | |
| <section id="following"> | |
| <h2>{lang:Following}</h2> | |
| <ol> | |
| {block:Followed} | |
| <li> | |
| <a href="{FollowedURL}" target="_blank"> | |
| <img alt="" class="avatar " src="{FollowedPortraitURL-48}"> | |
| {FollowedName} | |
| </a> | |
| </li> | |
| {/block:Followed} | |
| </ol> | |
| </section> | |
| {/block:Following} | |
| {block:Hidden} | |
| <!-- | |
| ### Group Members | |
| If it is a group blog then show all members of the blog. | |
| @see https://www.tumblr.com/docs/de/custom_themes#group-blogs | |
| --> | |
| {/block:Hidden} | |
| {block:GroupMembers} | |
| <section id="groupblog"> | |
| <h2>{lang:Group members}</h2> | |
| <ol> | |
| {block:GroupMember} | |
| <li> | |
| <a href="{GroupMemberURL}" target="_blank" title="{GroupMemberTitle}"> | |
| <img alt="" class="avatar " src="{GroupMemberPortraitURL-48}"> | |
| {GroupMemberName} | |
| </a> | |
| </li> | |
| {/block:GroupMember} | |
| </ol> | |
| </section> | |
| {/block:GroupMembers} | |
| </aside> | |
| <hr class="hideme" /> | |
| {/block:IndexPage} | |
| {block:Hidden} | |
| <!-- | |
| ## Footer | |
| Ending the page with some links to your Social Network profiles, | |
| info about the running time of the blog and the parental website. | |
| Twitter is the only social network that has a very own template | |
| tag, all other networks might be included by addional option | |
| parameters for the theme. | |
| @see https://www.tumblr.com/docs/de/custom_themes#twitter | |
| @see https://www.tumblr.com/docs/de/custom_themes#basic_variables | |
| --> | |
| {/block:Hidden} | |
| <footer id="footer"> | |
| <ul id="profiles"> | |
| {block:IfFacebookUrl} | |
| <li><a href="{text:Facebook URL}">Facebook</a></li> | |
| {/block:IfFacebookUrl} | |
| {block:Twitter}<li><a href="https://twitter.com/{TwitterUsername}">Twitter</a></li>{/block:Twitter} | |
| </ul> | |
| <p> | |
| © {CopyrightYears} | |
| {block:IfWebsiteUrl} | |
| <a href="{text:Website URL}">{text:Website URL}</a> | |
| {/block:IfWebsiteUrl} | |
| </p> | |
| <p> | |
| <a href="http://eye48.com/go/vorlagetheme">{lang:Install this theme}: Vorlage Theme</a> | |
| </p> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment