Post escrito por Yeltsin Lima
Nota do Tradutor: Todo o texto foi traduzido por mim (Yeltsin Lima). Porém, todo o texto abaixo ainda está sobre os direitos do Tumblr, Inc. Apesar do blog estar sob licença Creative Commons. Na segunda parte dessa publicação, vou colar a resposta do e-mail que enviei ao Tumblr.
O Tumblr permite a customização completa da aparência do seu blog, editando o código HTML. Isso é recomendado apenas para usuários que se sintam confortáveis editando códigos HTML. Se você não é, existem centenas de ótimos temas para escolha em nosso “Theme Garden“.
Assim que você criar o tema, que você se sinta orgulhos, envie ele para o Theme Garden para compartilhar com todos que usam o Tumblr.
Para iniciar, clique no botão “Customizar” no seu Dashboard (existe uma tradução para isso. Mas, não acho Painel de Controles, um nome bem interessante para isso. Nem Painel). Clique na aba “Tema” e clique em “Use código HTML customizado“. Isso vai trazer uma caixa de texto com o código HTML do seu tema atual.
O Tumblr possui dois tipos de operadores especiais usados para renderizar conteúdo HTML. Variáveis são usadas para inserir dados dinâmicos como o título do seu blog ou a descrição.
<html>
<head>
<title>{Title}</title>
</head>
<body>
...
</body>
</html>
Blocos são usados tanto para renderizar um bloco de HTML para um conjunto de dados (como seus artigos), ou para renderizar condicionalmente blocos de HTML (como o link de “Página Anterior”)
<html>
<body>
<ol id="posts">
{block:Posts}
<li> ... </li>
{/block:Posts}
</ol>
</body>
</html>
Abaixo, um exemplo de um código completo de um tema.
<html>
<head>
<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}
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<ol id="posts">
{block:Posts}
{block:Text}
<li>
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li>
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div>{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li>
{Photoset-500}
{block:Caption}
<div>{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li>
"{Quote}"
{block:Source}
<div>{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li>
<a href="{URL}" {Target}>{Name}</a>
{block:Description}
<div>{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li>
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul>
{block:Lines}
<livariable" style="outline-color: initial;
outline-style: none; outline-width: 0px; ">
{Alt} user_{UserNumber}">
{block:Label}
<span>{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li>
{Video-500}
{block:Caption}
<div>{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li>
{AudioPlayerBlack}
{block:Caption}
<div>{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
</ol>
<p id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
<a href="/archive">Archive</a>
</p>
</body>
</html>
Nota: Como a estruturação de tabelas é interessante mas, não fica bem formatada no atual tema (preciso modificar o child theme e incluir as novas folhas de estilo para tabela, ou seja, vai demorar), resolvi colocar em listas. E caso os leitores prefiram a versão formatada, disponibilizarei no último artigo desta série, um arquivo em PDF com a documentação traduzida.
Exemplo:
<html>
<body>
...
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">Previous</a>
{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<span>{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}">Next</a>
{/block:NextPage}
{/block:Pagination}
</body>
</html>
Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.
Loading ...
Excelente, estava atrás disso!