Is there a way to display a html page both in another page and with its own URL?

I am working on a web app to display details on electronics boards based on a database.
I have two ways of displaying results to a search :

  • The first way is to click on a board and it makes you go on the detail page (so this page has its own URL an I can pass it to somebody else)
  • The second way is to compare multiple boards and the details are shown on the same page (just under the boards I selected to compare)

Both ways display the same html page called “details.html”

Here is my problem : To make the first way work, I used {% extends “base.html” %} and I created a block in the latter so I still have all the menus (that are in “base.html” file) the available in the details page.
first way

However, to make the second way work, I would like to put the html of “details.html” in a div so that it is displayed on the same page. But, because of the {% extends …%}, all the menus from “base.html” are also displayed… (which seems logical because I made it so it is displayed for the first way to work.)

I have no idea how to fix it (other than have 2 separate html pages), or how to change it so it works as well, knowing that I really need the two ways to work and I can’t change those ways of displaying.

Do you have any ideas ?

Answer

Use {% include %} template tag (doc). This will allow you to use the a common html snippet from two different templates.

You can combine both {% extends %} and {% include %} tags as necessary.

Alternatively, it is possible to do the composition in the client side with a little bit of JavaScript, AJAX/Fetch request, and <iframe> tag. Client side rendering may be desirable in some circumstances, as it produces better rendering isolation, so scripting and styling are cleaner and more reliable. But the drawback is also that the rendering in iframe are completely isolated, so scripting and styling between pages may become trickier if you need to do more than just displaying content.