mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-24 10:01:38 +00:00
a7b1373990
* docs(pt-br): Add translation for Pug documentation This commit adds the translation for the Pug documentation from English to Brazilian Portuguese. The translated content includes an introduction to Pug, syntax examples for tags, attributes, JavaScript usage, loops, conditionals, including content, mixins, and additional resources. This translation aims to make the Pug documentation more accessible to Portuguese-speaking users. It covers the basic concepts and functionalities of Pug, providing a comprehensive guide for developers interested in using the Pug templating engine for HTML generation in their projects. * docs(pt-br): Add translation for Pug documentation Translate the last section "Additional Resources" * docs(pug): Update comments in Portuguese translation Update the comments to better reflect the behavior of the code. - Changed "Tags com filhos" to "Tags aninhadas" for clarity. * feat: Update Portuguese text in Pug guide Update Portuguese text in the Pug guide to improve readability and consistency with the rest of the document. - Changed "Hello there" to "Olá, pessoas" - Adjusted multi-line text from English to Portuguese for alignment. - Made sure all text aligns with the same language throughout the guide.
4.2 KiB
4.2 KiB
| language | contributors | filename | translators | lang | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Pug |
|
index-pt.pug |
|
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
//- Comentário de uma linha
//- Comentário de
várias linhas
//- ---TAGS---
//- Básico
div
//- <div></div>
h1
//- <h1></h1>
minha-propriaTag
//- <minha-propriaTag></minha-propriaTag>
//- Tags irmãs
div
div
//- <div></div>
<div></div>
//- Tags aninhadas
div
div
//- <div>
<div></div>
</div>
//- Textos
h1 Olá, pessoas
//- <h1>Olá, pessoas</h1>
//- Texto de várias linhas
div.
Oi,
tudo bem?
//- <div>
Oi,
tudo bem?
</div>
//- ---ATRIBUTOS---
div(class="minha-class" id="meu-id" meu-proprio-atributo="data" enabled)
//- <div class="minha-class" id="meu-id" meu-proprio-atributo="data" enabled></div>
//- Abreviações
span.minha-class
//- <span class="minha-class"></span>
.minha-class
//- <div class="minha-class"></div>
div#meu-id
//- <div id="meu-id"></div>
div#meu-id.minha-class
//- <div class="minha-class" id="meu-id"></div>
//- ---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)
//- <div class="class1 class2 class3"></div>
//- Estilos com Javascript
- const myStyles = {'color':'white', 'background-color':'blue'}
div(styles=myStyles)
//- <div styles="{"color":"white","background-color":"blue"}"></div>
//- Atributos com Javascript
- const myAttributes = {"src": "photo.png", "alt": "My Photo"}
img&attributes(myAttributes)
//- <img src="photo.png" alt="My Photo">
- let disabled = false
input(type="text" disabled=disabled)
//- <input type="text">
- disabled = true
input(type="text" disabled=disabled)
//- <input type="text" disabled>
//- Templates com Javascript
- const name = "Bob";
h1 Olá, #{name}
h1= name
//- <h1>Olá, Bob</h1>
//- <h1>Bob</h1>
//- ---LOOPS---
//- 'each' e 'for' tem a mesma função, aqui nós usaremos apenas 'each'.
each value, i in [1,2,3]
p=value
//-
<p>1</p>
<p>2</p>
<p>3</p>
each value, index in [1,2,3]
p=value + '-' + index
//-
<p>1-0</p>
<p>2-1</p>
<p>3-2</p>
each value in []
p=value
//-
each value in []
p=value
else
p Sem valores
//- <p>Sem valores</p>
//- ---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
//- <p>o número é 5</p>
- 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
//- <p class="warn">Seu pedido está em espera</p>
//- --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
//-
<html>
<body>
<h1>Indústrias ACME</h1>
<nav><a href="index.html">Início</a><a href="about.html">Sobre Nós</a></nav>
</body>
</html>
//- Importando Javascript e CSS
script
include scripts/index.js
style
include styles/theme.css
//- ---MIXIN---
mixin basic
div Olá
+basic
//- <div>Olá</div>
mixin comment(nome, comentario)
div
span.comment-name= nome
div.comment-text= comentario
+comment("Gil", "Tudo é divino, tudo é maravilhoso")
//-
<div>
<span class="comment-name">Gil</span>
<div class="comment-text">Tudo é divino, tudo é maravilhoso</div>
</div>