diff --git a/pt-br/pug-pt.html.markdown b/pt-br/pug-pt.html.markdown new file mode 100644 index 00000000..a74666fb --- /dev/null +++ b/pt-br/pug-pt.html.markdown @@ -0,0 +1,211 @@ +--- +language: Pug +contributors: + - ["Michael Warner", "https://github.com/MichaelJGW"] +filename: index-pt.pug +translators: + - ["Adaías Magdiel", "https://adaiasmagdiel.com/"] +lang: pt-br +--- + +## Começando com Pug + +Pug é uma pequena linguagem que compila para HTML. Possui uma sintaxe limpa +com algumas funcionalidades adicionais, como declarações if e loops. Também pode ser utilizada +como uma linguagem de templates no lado do servidor para tecnologias como o Node.js. + +### The Language +```pug + +//- Comentário de uma linha + +//- Comentário de + várias linhas + +//- ---TAGS--- +//- Básico +div +//-
+h1 +//-

+minha-propriaTag +//- + +//- Tags irmãs +div +div +//-
+
+ +//- Tags aninhadas +div + div +//-
+
+
+ +//- Textos +h1 Olá, pessoas +//-

Olá, pessoas

+ +//- Texto de várias linhas +div. + Oi, + tudo bem? +//-
+ Oi, + tudo bem? +
+ +//- ---ATRIBUTOS--- +div(class="minha-class" id="meu-id" meu-proprio-atributo="data" enabled) +//-
+ +//- Abreviações +span.minha-class +//- +.minha-class +//-
+div#meu-id +//-
+div#meu-id.minha-class +//-
+ + +//- ---JAVASCRIPT--- +- const lang = "pug"; + +//- Javascript em várias linhas +- + const lang = "pug"; + const awesome = true; + +//- Classes com Javascript +- const myClass = ['class1', 'class2', 'class3'] +div(class=myClass) +//-
+ +//- Estilos com Javascript +- const myStyles = {'color':'white', 'background-color':'blue'} +div(styles=myStyles) +//-
+ +//- Atributos com Javascript +- const myAttributes = {"src": "photo.png", "alt": "My Photo"} +img&attributes(myAttributes) +//- My Photo +- let disabled = false +input(type="text" disabled=disabled) +//- +- disabled = true +input(type="text" disabled=disabled) +//- + +//- Templates com Javascript +- const name = "Bob"; +h1 Olá, #{name} +h1= name +//-

Olá, Bob

+//-

Bob

+ +//- ---LOOPS--- + +//- 'each' e 'for' tem a mesma função, aqui nós usaremos apenas 'each'. + +each value, i in [1,2,3] + p=value +//- +

1

+

2

+

3

+ +each value, index in [1,2,3] + p=value + '-' + index +//- +

1-0

+

2-1

+

3-2

+ +each value in [] + p=value +//- + +each value in [] + p=value +else + p Sem valores + +//-

Sem valores

+ +//- ---CONDICIONAIS--- + +- const number = 5 +if number < 5 + p o número é menor do que 5 +else if number > 5 + p o número é maior do que 5 +else + p o número é 5 +//-

o número é 5

+ +- const orderStatus = "Aguardando"; +case orderStatus + when "Aguardando" + p.warn Seu pedido está em espera + when "Completado" + p.success Seu pedido foi completado. + when -1 + p.error Ocorreu algum erro + default + p Nenhum registro de pedido encontrado +//-

Seu pedido está em espera

+ +//- --INCLUINDO CONTEÚDOS-- +//- Caminho do arquivo -> "includes/nav.pug" +h1 Indústrias ACME +nav + a(href="index.html") Início + a(href="about.html") Sobre Nós + +//- Caminho do arquivo -> "index.pug" +html + body + include includes/nav.pug +//- + + +

Indústrias ACME

+ + + + +//- Importando Javascript e CSS +script + include scripts/index.js +style + include styles/theme.css + +//- ---MIXIN--- +mixin basic + div Olá ++basic +//-
Olá
+ +mixin comment(nome, comentario) + div + span.comment-name= nome + div.comment-text= comentario ++comment("Gil", "Tudo é divino, tudo é maravilhoso") +//- +
+ Gil +
Tudo é divino, tudo é maravilhoso
+
+ +``` + + +### Saiba Mais +- [Site Oficial](https://pugjs.org/) +- [Documentação](https://pugjs.org/api/getting-started.html) +- [Repositório no Github](https://github.com/pugjs/pug)