M
M
midia212020-11-08 17:09:06
Pug
midia21, 2020-11-08 17:09:06

How to correctly create reusable sections in Pug (jade) connected via include on multi-page sites?

5fa7fbef8c233407669421.png
5fa7fbf7b8d03695141019.png

On the screenshots, the page-preview block is highlighted, which changes on different pages of the site (the text, design, etc. change). I created a separate _page-preview.pug file, in which I described the markup of this block for the blog page:

section.page-preview.page-preview_dash.container
        h2.page-preview__title Our Blog
        p.page-preview__text.
            Here's where we address the burning questions. From new tech, creative inspiration and new business wins to movie reviews. It's all here in our journal.


and included it in blog.pug via include.
Question: how now to connect _page-preview.pug to the second page, adding a few changes to it, namely:
1) add the page-preview_bg_blue modifier (I use BEM)
2) change the text of the block
3) remove the page-preview_dash modifier
4) possibly additionally add or remove some element from _page-preview.pug (for example, some button)

If you write in html, then there are no problems at all, but I can’t figure out how to create reusable blocks on pug.
I saw that this is done using mixins, passing title text, modifiers, etc. into arguments.
But it confuses me that in large sections you get a mixin with 999+ parameters. I would appreciate any ideas on how best to do this. So far I have settled on the fact that I simply created a separate _page-preview-in-approach.pug file into which I inserted the markup with changes.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
inkShio, 2020-11-08
@inkShio

Mixins are the best option. Look at another version of the mixin, you can have 10 parameters, in the final version you just specify +block({modify: 'myclass', title: 'mytitle'}) and it turns out that out of 10 parameters only 2 will be used.
You can also use it with _page
-preview.pug includes

section.page-preview.page-preview_dash.container(class= MYSUPERCLASS)
        h2.page-preview__title= MYSUPERTITLE
        p.page-preview__text.
            Here's where we address the burning questions. From new tech, creative inspiration and new business wins to movie reviews. It's all here in our journal.

and output
- var MYSUPERCLASS = 'pumpum';
- var MYSUPERTITLE = 'tarampampam';
include _page-preview

Test and see which option suits you best.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question