Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convencoes do PIGUI
=> Estrutura do zip:
nome_do_layout.zip
index.html <= TEM CONVENÇÕES
style.css
style-estilo1.css
style-estilo2.css
images/
estilo1/
screenshot.png (imagem de demonstração do layout)
(imagens do estilo 1)
estilo2/
screenshot.png (imagem de demonstração do layout)
(imagens do estilo 2)
(imagens do layout)
=> CONVENÇÕES DO index.html
=> Como deve ser mandado?
- O index.html deve ter somente o que seria o body da página, não devem existir as tags html,head ou body, somente o que estaria dentro do body.
- O index.html deve obrigatoriamente ter {conteudo} e {menu-de-artigos}
- O index.html não pode ter nenhuma div de id "conteudoDoLayout" ou "renderDaView" ou "renderMenu"
=> Inserir Conteudo
Para inserir o conteudo, utilize ${conteudo}. Por exemplo:
<div class="Content">${conteudo}</div>
=> Inserir o Menu de Artigos
Para inserir o menu de artigos, utilize ${menu-de-artigos}. Por exemplo:
<div class="artigos">${menu-de-artigos}</div>
=> Links Para Conteudos
Para linkar para as paginas do usuario, utilizar ":TIPO_DO_CONTEUDO" como href do anchor por exemplo:
<a href=":home">Home</a>
atualmente estão disponíveis as convenções:
:home
:profissional
:area_de_atuacao
:publicacao
:artigos
:contato
=> Inserir dados do Usuario
Para inserir dados do usuario, utilize: ${usuario.NOME_DO_DADO}. Por exemplo:
<span class="endereco">${usuario.endereco}</span>
atualmente estão disponíveis as convenções:
usuario.nome
usuario.login
usuario.email
usuario.cpf
usuario.telefone
usuario.endereco
=> Inserir dados do Contato
Para inserir dados do contato, utilize $[] para indicar o html que esta relacionado com o dado e dentro especifique o dado usando: ${contato.NOME_DO_DADO}.
Por exemplo:
$[<span class="telefone">Telefone: ${contato.telefone}</span>]
atualmente estão disponíveis as convenções para dados:
contato.nome
contato.complemento-do-nome
contato.email
contato.telefone
contato.logradouro
contato.numero
contato.complemento
contato.bairro
contato.cidade
contato.uf
contato.pais
contato.cep
=> Para inserir links do Facebook,Twitter a convenção é:
:facebook
:twitter
=> Imagens
-> Padrão
Qualquer path que esteja no atributo "src" da tag "img" terá como origem o diretório do layout, por exemplo:
<img src="imagens/logo.png/>
irá se tornar:
<img src="layouts/nomeDoHtml/nomeDoEstilo/imagens/logo.png" />
-> Imagens Globais
Para pegar imagens da pasta public/images/ é preciso adicionar :: na frente da path, por exemplo:
<img src="::logo.png/>
irá se tornar:
<img src="/images/logo.png/>
=> Head Extra
Para adicionar tags no head da página de um layout específico, basta adicionar uma tag <head-extra> em cima do index.html. Tudo dentro dele irá aparecer no <head> da página do layout.
Ex.:
<head-extra>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
</head-extra>
<div id="tudo">
<!-- conteudo -->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.