How to display dynamic content?

Question

JavaScript

Hello, I'm doing a project using the Pug + JS stack.

The following question arose:
the project is a catalog site, that is, on the main page there are goods, by clicking on them we go to a detailed description of this product.

How I want to implement it:
- from the side of the project:
make a page "products.pug", in the folder "products" collect files with the names of these products, for example, "ruchka.pug" and for a given url in the file "products.pug" do include of the template is already the product itself.
- from the browser side:
in the browser, I would like to see that this page, with a detailed description of the product, would be stored at the address "/products?item=ruchka"

How else do I see the solution:
- from the project side:
we do not create a "products.pug" file, but immediately create a "products/ruchka.pug" file
- from the browser side:
there is a problem that we get the "/products/ruchka" link in the url. And here the question arises, how can you avoid the "/products/" link so that there is no empty page and the appeal is "/ruchka" and the file "products/ruchka.pug" would open on it?

I use only Pug and JS, there are no frameworks like Vue / Angular.

What problems do I want to solve for myself
?
2. The second problem that I have is if point 1 is not implemented in any way, then I would like to understand how you can make sure that the files are stored in the (products) folder, but they are accessed by file name? That is, "products/ruchka.pug" and referring to the pen exactly as " site.ru/ruchka "

I would be glad for any advice, if there are other solutions, please share them, we completely exclude the connection of Vue, Angular, React and similar frameworks - this the project is not configured for this.

Answer 1

And why for each product to make its own representation, with the condition that they will all be the same? So Pug is a template engine. Want to understand how it works? Tyk .