HTML Tumblr主题脚手架

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML Tumblr主题脚手架相关的知识，希望对你有一定的参考价值。

<html>
    <head>
      <meta name="color:Background" content="#3b627e">
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
        
        <style type="text/css">
          html { }
          body { width: 900px; margin: 0 auto; }
          #title { }
          #wrapper { }
          #posts { float: left; padding: 30px; width: 520px; }
          #side { float: left; width: 200px; }
          #footer { clear: both; }
          {CustomCSS}
        </style>
    </head>
    
    <body>
        <h1 id="title">{Title}</h1>
        
        <div id="wrapper">
          <ol id="posts">
              {block:Posts}
                  {block:Text}
                      <li class="post text">
                          {block:Title}
                              <h3><a href="{Permalink}">{Title}</a></h3>
                          {/block:Title}

                          {Body}
                      </li>
                  {/block:Text}

                  {block:Photo}
                      <li class="post photo">
                          <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                          {block:Caption}
                              <div class="caption">{Caption}</div>
                          {/block:Caption}
                      </li>
                  {/block:Photo}
                
                  {block:Photoset}
                      <li class="post photoset">
                          {Photoset-500}

                          {block:Caption}
                              <div class="caption">{Caption}</div>
                          {/block:Caption}
                      </li>
                  {/block:Photoset}

                  {block:Quote}
                      <li class="post quote">
                          "{Quote}"

                          {block:Source}
                              <div class="source">{Source}</div>
                          {/block:Source}
                      </li>
                  {/block:Quote}

                  {block:Link}
                      <li class="post link">
                          <a href="{URL}" class="link" {Target}>{Name}</a>

                          {block:Description}
                              <div class="description">{Description}</div>
                          {/block:Description}
                      </li>
                  {/block:Link}

                  {block:Chat}
                      <li class="post chat">
                          {block:Title}
                              <h3><a href="{Permalink}">{Title}</a></h3>
                          {/block:Title}

                          <ul class="chat">
                              {block:Lines}
                                  <li class="{Alt} user_{UserNumber}">
                                      {block:Label}
                                          <span class="label">{Label}</span>
                                      {/block:Label}

                                      {Line}
                                  </li>
                              {/block:Lines}
                          </ul>
                      </li>
                  {/block:Chat}

                  {block:Video}
                      <li class="post video">
                          {Video-500}

                          {block:Caption}
                              <div class="caption">{Caption}</div>
                          {/block:Caption}
                      </li>
                  {/block:Video}

                  {block:Audio}
                      <li class="post audio">
                          {AudioPlayerBlack}

                          {block:Caption}
                              <div class="caption">{Caption}</div>
                          {/block:Caption}
                      </li>
                  {/block:Audio}
                
                  {NoteCountWithLabel}
              {/block:Posts}
            
              {block:SearchPage}
              {block:NoSearchResults}
          </ol>
        
          <div id="side">
            {block:Description}
                <p id="description">{Description}</p>
            {/block:Description}
            
            <img id="avatar" src="{PortraitURL-64}" alt="User Avatar" />
          
            <form id="search" action="/search" method="get">
                <input type="text" name="q" value="{SearchQuery}"/>
                <input type="submit" value="Search"/>
            </form>
          </div>

          <p id="footer">
              {block:PreviousPage}
                  <a id="back_button" href="{PreviousPage}">« Previous</a>
              {/block:PreviousPage}

              {block:NextPage}
                  <a href="{NextPage}">Next »</a>
              {/block:NextPage}

              <a href="/archive">Archive</a>
          </p>
        </div>
    </body>
</html>

Tumblr主题脚手架

This is a bare-bones, centered Tumblr layout with no styling, and a right-aligned sidebar. It has blocks for every content type, so completing this with your custom styling should be quick and easy.
  1. <html>
  2.     <head>
  3.       <meta name="color:Background" content="#3b627e">
  4.         <title>{Title}</title>
  5.         <link rel="shortcut icon" href="{Favicon}">
  6.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.         {block:Description}
  8.             <meta name="description" content="{MetaDescription}" />
  9.         {/block:Description}
  10.  
  11.         <style type="text/css">
  12.           html { }
  13.           body { width: 900px; margin: 0 auto; }
  14.           #title { }
  15.           #wrapper { }
  16.           #posts { float: left; padding: 30px; width: 520px; }
  17.           #side { float: left; width: 200px; }
  18.           #footer { clear: both; }
  19.           {CustomCSS}
  20.         </style>
  21.     </head>
  22.  
  23.     <body>
  24.         <h1 id="title">{Title}</h1>
  25.  
  26.         <div id="wrapper">
  27.           <ol id="posts">
  28.               {block:Posts}
  29.                   {block:Text}
  30.                       <li class="post text">
  31.                           {block:Title}
  32.                               <h3><a href="{Permalink}">{Title}</a></h3>
  33.                           {/block:Title}
  34.  
  35.                           {Body}
  36.                       </li>
  37.                   {/block:Text}
  38.  
  39.                   {block:Photo}
  40.                       <li class="post photo">
  41.                           <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  42.  
  43.                           {block:Caption}
  44.                               <div class="caption">{Caption}</div>
  45.                           {/block:Caption}
  46.                       </li>
  47.                   {/block:Photo}
  48.  
  49.                   {block:Photoset}
  50.                       <li class="post photoset">
  51.                           {Photoset-500}
  52.  
  53.                           {block:Caption}
  54.                               <div class="caption">{Caption}</div>
  55.                           {/block:Caption}
  56.                       </li>
  57.                   {/block:Photoset}
  58.  
  59.                   {block:Quote}
  60.                       <li class="post quote">
  61.                           "{Quote}"
  62.  
  63.                           {block:Source}
  64.                               <div class="source">{Source}</div>
  65.                           {/block:Source}
  66.                       </li>
  67.                   {/block:Quote}
  68.  
  69.                   {block:Link}
  70.                       <li class="post link">
  71.                           <a href="{URL}" class="link" {Target}>{Name}</a>
  72.  
  73.                           {block:Description}
  74.                               <div class="description">{Description}</div>
  75.                           {/block:Description}
  76.                       </li>
  77.                   {/block:Link}
  78.  
  79.                   {block:Chat}
  80.                       <li class="post chat">
  81.                           {block:Title}
  82.                               <h3><a href="{Permalink}">{Title}</a></h3>
  83.                           {/block:Title}
  84.  
  85.                           <ul class="chat">
  86.                               {block:Lines}
  87.                                   <li class="{Alt} user_{UserNumber}">
  88.                                       {block:Label}
  89.                                           <span class="label">{Label}</span>
  90.                                       {/block:Label}
  91.  
  92.                                       {Line}
  93.                                   </li>
  94.                               {/block:Lines}
  95.                           </ul>
  96.                       </li>
  97.                   {/block:Chat}
  98.  
  99.                   {block:Video}
  100.                       <li class="post video">
  101.                           {Video-500}
  102.  
  103.                           {block:Caption}
  104.                               <div class="caption">{Caption}</div>
  105.                           {/block:Caption}
  106.                       </li>
  107.                   {/block:Video}
  108.  
  109.                   {block:Audio}
  110.                       <li class="post audio">
  111.                           {AudioPlayerBlack}
  112.  
  113.                           {block:Caption}
  114.                               <div class="caption">{Caption}</div>
  115.                           {/block:Caption}
  116.                       </li>
  117.                   {/block:Audio}
  118.  
  119.                   {NoteCountWithLabel}
  120.               {/block:Posts}
  121.  
  122.               {block:SearchPage}
  123.               {block:NoSearchResults}
  124.           </ol>
  125.  
  126.           <div id="side">
  127.             {block:Description}
  128.                 <p id="description">{Description}</p>
  129.             {/block:Description}
  130.  
  131.             <img id="avatar" src="{PortraitURL-64}" alt="User Avatar" />
  132.  
  133.             <form id="search" action="/search" method="get">
  134.                 <input type="text" name="q" value="{SearchQuery}"/>
  135.                 <input type="submit" value="Search"/>
  136.             </form>
  137.           </div>
  138.  
  139.           <p id="footer">
  140.               {block:PreviousPage}
  141.                   <a id="back_button" href="{PreviousPage}">&#171; Previous</a>
  142.               {/block:PreviousPage}
  143.  
  144.               {block:NextPage}
  145.                   <a href="{NextPage}">Next &#187;</a>
  146.               {/block:NextPage}
  147.  
  148.               <a href="/archive">Archive</a>
  149.           </p>
  150.         </div>
  151.     </body>
  152. </html>

以上是关于HTML Tumblr主题脚手架的主要内容，如果未能解决你的问题，请参考以下文章

HTML 控制台Tumblr主题

HTML Tumblr自定义主题框架

控制台Tumblr主题

Tumblr自定义主题框架

Tumblr 和 HTML5 - Square Grid 的画布？

更改 Tumblr 默认主题显示页面链接的方式