ColorlibHQ / gentelella

Free Bootstrap 4 Admin Dashboard Template
https://colorlib.com/polygon/gentelella/index.html
MIT License
21.05k stars 6.87k forks source link

How make Same menu in all pages #751

Closed lucabassplayer89 closed 4 years ago

lucabassplayer89 commented 5 years ago

Hi, i noted that the menu on the left of every page is the same. Is there a method to create a file "menu.html" and load it in all pages? This could be helpful for exemple if i want to remove a single point in menu list: in this case i can comment the line in "menu.html".

William-H-M commented 5 years ago

Well, to do that is in of the framework you're gonna implement that, most of the frameworks, (Laravel, CodeIgniter, Django, MVC 5 C#) allow you to have "Master Pages" that are the ones that allow you to share it across the system

lucabassplayer89 commented 5 years ago

I use python tornado but i don't find examples about this "problem"

martinmurciego commented 5 years ago

I used a template engine to generate the html. For example I use Handlebars.js where I created a template file to save the structure of the menu and then using an element called "partial" I include it in another template file that then the framework allows me to inject data as objects to generate the html . In case of generating dynamic menus that are stored in the database, the template engine has a helper #each iterator to generate the <li></li> or other structure in a repetitive way. To read multilevel or nested menus that were stored with reflexive relationships and a lot to many I have created a javascript helper that can be called from the template file created in handlebars (hbs). A template engine (handlebars / ejs / pug / smarty / etc.) Has many resources to structure dynamic pages where there is common or different content that is expanded.

I do not program in Python but can read this: https://www.fullstackpython.com/template-engines.html

Try using a template engine to generate html code that is the same or varies in different pages: http://jinja.pocoo.org/ https://stackoverflow.com/questions/28437844/best-practice-for-nested-menus-in-jinja2-templates

sublimedatasys commented 4 years ago

As @William-H-M mentioned, there are many framework like (Laravel, CodeIgniter, Django, MVC 5 C#, Angular) allow you to have "Master Pages" that are the ones that allow you to share it across the system.

Also, you can acheive by using below :

Step 1) Script.js file which i'll load on every page:

$(document).ready(function () {
    $("#navbar-frame").load("/navbar.html");
});

Step 2) Loaded in every html page (i want the navbar in every page):

<!--adding my own JS script file-->
<script src="js/script.js"></script>

Step 3) And then right after the tag of my pages i have this simple div:

<!--navbar div with the id-->
<div id="navbar-frame"></div>

And navbar.html contains all the code used by the navbar, there is a .css file too used by the navbar.html.

cristianraiber commented 4 years ago

Feel free to comment on this issue if you're still facing problems and we'll reopen.