0

Gostaria de saber como fazer para não precisar repetir códigos, não sei se usando o for, por exemplo tenho esse código abaixo que corresponde a um card com dados de um educador vou ter varios desses onde so mudarei os dados mas a estrutura do código é a mesma, vou precisar criar um slide com esses cards, na tela vai poder aparecer de 4 em 4, gostaria de aprender algum recurso do jade/pug onde eu deixo o código mais limpo sem precisar ficar repetindo ele.

		//- CARD 4
		div.card-educator.item
			ul.educator
				li.educator-photo
					figure
						img(src="img/eunice.png", alt="Eunice Magalhães Fonseca")
						figcaption Eunice Magalhães Fonseca
				li.hr
					hr
				li.icons.icon-boy-girl
					svg
						use(xlink:href='svg/myicons.svg#boy-girl')
					span 252 alunos
				li.icons.icon-gamepad
					svg
						use(xlink:href='svg/myicons.svg#gamepad')
					span 252 alunos
				li.icons.icon-question-list
					svg
						use(xlink:href='svg/myicons.svg#question-list')
					span 252 alunos
				li.button
					button(type='button') Selecionar

1 Resposta 1

0

Utilize o recurso mixin.

mixin loop-lista(photourl,nome,svg-bg-url,totalbg,svg-gamepad-url,totalgp,svg-ql,totalql)
    li.educator-photo
       figure
           img(src=photourl, alt=nome)
            figcaption 
                =nome
            li.hr hr
            li.icons.icon-boy-girl
                svg
                    use(xlink:href=svg-bg-url)
                span =totalbg
            li.icons.icon-gamepad
                svg
                    use(xlink:href=svg-gamepad-url)
                span totalgp
            li.icons.icon-question-list
                svg
                    use(xlink:href=svg-ql)
                span totalql
            li.button
                button(type='button') Selecionar 

Para chamar na pagina principal

+loop-lista("img/eunice.png","Eunice Magalhães Fonseca","svg/myicons.svg#boy-girl","250 Alunos","svg/myicons.svg#gamepad","210 Alunos","svg/myicons.svg#question-list","200 Alunos")
+loop-lista("img/maria.png","Maria José Fonseca","svg/myicons.svg#boy-girl","250 Alunos","svg/myicons.svg#gamepad","210 Alunos","svg/myicons.svg#question-list","200 Alunos")

Se svg/x.svg forem recursos fixos, pode deixá-los dentro do mixin e remover dos parâmetros, ficando assim:

mixin loop-lista(photourl,nome,totalbg,totalgp,totalql)
    li.educator-photo
       figure
           img(src=photourl, alt=nome)
            figcaption 
                =nome
            li.hr hr
            li.icons.icon-boy-girl
                svg
                    use(xlink:href='svg/myicons.svg#boy-girl')
                span =totalbg
            li.icons.icon-gamepad
                svg
                    use(xlink:href='svg/myicons.svg#gamepad')
                span totalgp
            li.icons.icon-question-list
                svg
                    use(xlink:href='svg/myicons.svg#question-list')
                span totalql
            li.button
                button(type='button') Selecionar 

+loop-lista("img/eunice.png","Eunice Magalhães Fonseca","250 Alunos","210 Alunos","200 Alunos")
+loop-lista("img/maria.png","Maria José Fonseca","250 Alunos","210 Alunos","200 Alunos")

Você deve fazer log-in para responder a esta pergunta.