Jade / Pug does not repeat the same code

Navigation
0

I would like to know how to do not need to repeat codes, I do not know if using for , for example I have this code below that corresponds to a card with data of an educator I will have several of these where I will only change the data but the I would like to learn some jade / pug feature where I leave the code cleaner without having to repeat it.

p> 

		//- 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
    
asked by anonymous 23.03.2017 / 18:34

1 answer

0

Use the mixin feature. 

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

To call the home page 

+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")

If svg / x.svg are fixed resources, you can leave them inside the mixin and remove the parameters, thus: 

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")
    
14.07.2017 / 02:23
Filter Search I can not start the oracle listener