Início » 2014 » Janeiro » 27 » Como desenvolver um template para uCoz
16:16:54
Como desenvolver um template para uCoz

Criar um template no uCoz não é um bicho de sete cabeças, mas você precisa definir algumas marcações para que o sistema interprete e crie os blocos globais para você posteriormente poder editar e personalizar o template.

Ao criar o esqueleto do template você deve usar comentários HTML e palavras-chave específicas. Vejamos elas agora:

 

Comentários HTML reservados

Comentários HTML Descrição
<!-- <header> -->
<!-- </header> -->		 Parte superior da página. Alguns projetos podem não conter a parte superior claramente definida.
<!-- <footer> -->
<!-- </footer> -->		 Parte inferior da página.
<!-- <container> -->
<!-- </container> -->		 Container esquerdo e/ou direito. Número de containers depende do estilo do desenho (2 o 3 colunas).
<!-- <block> -->
<!-- </block> -->		 Um bloco com o tag "<!-- <container> -->". Se o design dos blocos irá ser o mesmo em todos os containers, então é suficiente formar um único bloco e criar o segundo container vazio. Um bloco tem dois códigos reservados: "TITLE" e "CONTENT".
<!-- <sblock_menu> -->
<!-- </sblock_menu> -->		 Bloqueia "Menu" estático. O mesmo que a tag "<!-- <block> -->", mas fora de "<!-- <container> --> tag". Se utiliza só nos design onde um bloco "Menu" tem seu próprio design individual.
<!-- <middle> -->
<!-- </middle> -->		 A parte do projeto que não será utilizado no módulo "Fórum". Esta é geralmente a parte central de um site entre o topo e os blocos de fundo.
<!-- <popup> -->
<!-- </popup> -->		 Um bloco, que forma o design para a página de "Mensagens Privadas" e outras páginas que se abrem em uma nova janela, tem duas palavras-chave reservadas: "[TITLE]" e "[BODY]".

 

Códigos reservados

Os códigos reservados tem a função de serem substituídos por códigos HTML e variáveis do sistema. Agora alguns códigos reservados e sua descrição.

Códigos Descrição
[TITLE] Título da página.
[CSS_URL] URL que aponta para o CSS do site. Algumas pessoas usam o URL direto "/_st/my.css".
[BODY] É onde fica o conteúdo da página como as postagens.
[COPYRIGHT] É aquela frase que pode ser editada quando o construtor do site está ativado: "Copyright MySite © 2014"

 

Frases reservadas

Mesmo em inglês, as frases reservadas são traduzidas para o idioma do site (definido em Configurações Gerais). Vejamos quais as frases reservadas:

Frases reservadas Descrição
SITE LOGO Apesar de funcionar como um código reservado, nele aparece "Meu Site" e pode ser editado ao ativar o Construtor do site.
You logged in as Em português ela é traduzido como "Entrou como", porem as frases podem ser editada em Substituição das frases padrão.
Group Em português é traduzido para "Grupo"
Hello Em português é traduzido para "Bem-vindo"
Site home Em português é traduzido para "Início"
Profile page Em português é traduzido para "Meu perfil"
Register now Em português é traduzido para "Registar-se"
Log out Em português é traduzido para "Sair"
Log in Em português é traduzido para "Login"
Current date Usa as seguintes variáveis "$WDAY$, $DATE$, $TIME$". Lembrando que as configurações do formato de exibição da data e hora são alteradas em Configurações Gerais.

 

Referência gráfica de como montar um template

Estrutura de blocos HTML de templates do uCoz

 

Exemplo de um template

<html>

<head>
 <title>[TITLE]</title>
 <link type="text/css" rel="StyleSheet" href="[CSS_URL]" />
</head>

<body style="padding:5px;margin:0;">

 <!-- <header> -->
 <div align="center" style="border:1px solid black;padding:5px;font-size:20pt;">
 <b> SITE LOGO</b>
 </div>
 <div style="padding-top:5px"></div>
 <!-- </header> -->

 <!-- <middle> -->
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td valign="top">
 <!-- <container> -->

 <!-- <block> -->
 <div style="border:1px solid black;padding:3px;width:200px;">
 <div align="center"><b>TITLE</b>
 </div>CONTENT</div>
 <br/>
 <!-- </block> -->

 <!-- </container> -->
 </td>
 <td valign="top" width="80%" style="padding:0 5px;">
 <div style="border:1px solid black;padding:5px">[BODY]</div>
 </td>
 <td valign="top">
 <!-- <container> -->
 <!-- </container> -->
 </td>
 </tr>
 </table>
 <!-- </middle> -->

 <!-- <footer> -->
 <div style="padding-top:5px"></div>
 <div align="center" style="border:1px solid black;padding:5px;">[COPYRIGHT]
 <br/>$POWERED_BY$</div>
 <!-- </footer> -->

</body>

</html>

<!-- <popup> -->
<div style="border:1px solid black;padding:3px;">
 <div align="center"><b>[TITLE]</b>
 </div>
 [BODY]
</div>
<!-- </popup> -->

 

Resultado

Template criado com uCoz

Bônus

Usando menus personalizado

<?substr($NMENU_1$,58,-69)?>

imprime

<li><a class=" uMenuItemA" href="/"><span>Início</span></a></li>
<li><a href="/index/0-2"><span>Informação do site</span></a></li>

Ao invés de

<div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot">
<li><a class=" uMenuItemA" href="/"><span>Início</span></a></li>
<li><a href="/index/0-2"><span>Informação do site</span></a></li></ul></div>
Categoria: uCoz | Visualizações: 1260 | Adicionado por : ShZlot | Ranking: 0.0/0
Total de comentários: 0
Somente usuários registrados podem adicionar comentários.
[ Registrar-se | Login ]