I can't find any info how the intended implementation of Bootstraps navbar is suppose to be done.
Right now I have downloaded the example, and cloned it for each of the button options, changed the menu so the shows the correct selected button, but this can't hardly be the correct way, as it is a lot of copy/paste maintenance.
Also I am guessing that is not the intended method, as it looks like navbar is a class in bootstrap.
Has anyone tried to use navbar and can tell me how they did it, or point me to the intended method?
It is outside of Bootstrap's scope how to implement it in an efficient way. That is the job of a server-side language.
When you have a situation where you do a huge copy/paste, then think template, and for small copy/paste think variable like in the case of the menu, where you have to change the active state.
Any modern server-side language have a template engine, where you put in skeleton of your page.
For the menu, you probably want to generate it, where you have the menu button names in a yaml file or perhaps database of some sort.
On the other hand is it popular to offline generate all possible html pages, and then serve them with a plain httpd or nginx. Jekyll and github pages are such examples.
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
TLDR: What is the standard/best practice to organize the different HTML sites/files, when using a navigation bar, that should be visible on every site?
Background: I'm starting for the first time to create a website. It should run on an ESP and I got some good results with Bootstrap 4. I've defined a Bootstrap navbar, just like in all the examples (for example here on w3schools). Though the examples only use do-nothing links; they don't show how these links are commonly used with the navbar and the different files (this must be a general principle, that I don't know).
The navbar should of course be visible on every site, while the content below it should change according to the clicked link. When I simply use a link in the navbar to a different html file without a navbar included it is of course not visible.
How are the different sites normally organized in relation to the navbar?
I have thought of different possibilities:
Having a navbar in every file (obviously a nightmare to maintain)
Having the navbar in an extra file, including it somehow in every other file
Managing all the content in the main file together with the navbar, including the other content files somehow
At my current knowledge I just don't know enough, so I also don't know what to search for. If there are already good information about this on the web, can you please provide me with search words or links?
If you are planning to use HTML then there is no other choice. You need to add a navigation bar to each page which is a nightmare as you have mentioned. But if you are planning to use server-side programming languages like PHP then they provide a keyword called include. Its syntax is include 'filename' now you can add a file like header.php inside include folder and you can use across multiple pages. You can have a look in this documentation
.But if you are using NodeJS, ExpressJS then they have their own templating-engines like ejs, handlebars, pug. They consist of partials So, that partials can be use across multiple pages. Here is the link for partials
Though the answer of kedar sedai is the correct one, I want to add my chosen way and further information as documentation for future readers.
kedar sedai is right, that I need to use some programming language. One problem is, that I cannot use server side programming languages, because the ESP does not support them. So I needed to move to client site programming, thus javascript.
I used the solution of this SO question to include another HTML file. I now serve only the main HTML file, which contains the navbar and the following part to load the correct HTML file dependent on the page parameter in the URL:
<div class="container-fluid" id="content" style="display:block;overflow:visible"><br>
<script>
$(function(){
var url = new URL(window.location.href);
var c = url.searchParams.get("page");
if(c != null){
$("#content").load(c+".html");
}
});
</script>
</div>
This works like a charm and I now have notion how I can organize my html files to be displayed with the navigation bar.
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here
I'm designing a simple website with no dynamic content that I want to be light and portable — no PHP or other server-side scripting needed, or wanted. I'm running into a question that I've had a few times before.
I'd love to be able to write common elements (head, foot, navigation) once and write the individual pages on the site with content only, then run this mysterious utility to compile everything it into a set of HTML files ready for uploading. A page might be written like this:
Title: Our Services
Top Navigation: Yes
Scripts: jquery, lightbox
<p>
Example, Inc. offers a wide range of…
It'd be great if the engine also had logic that lets me include or exclude elements (like Top Navigation above) from each page, and automate tasks like labelling the current page in the navbar:
<a href="/services"{page == 'services' ? ' class="current"' : ""}>Services</a>
Are there any engines out there like this?
I'd head directly towards Template-Toolkit for this. It comes with the ttree utility for building a static site.
You can handle the last part of your question with something like:
[%
INCLUDE 'navbar.tt'
page = 'services'
%]
To be honest, this is where things like PHP come in handy... to include common elements
Option 1: Use a language and enjoy it.
Option 2: Use the language to make the site... but then point a crawler at your site to grab the generated "static" content. e.g. WinHTTPTrack
Webby is fantastic for exactly this.
Another great option is Jekyll.
Adobe Dreamweaver's Templates do what you need if a non free tool is fine for you.
Basically you create a Template page where you define which parts are editable, then you create all your pages based on the template. If you change the template and save it all the associated pages are updates.
The templating system also has the ability to define default attributes and change them in a specific page. You can use this for labeling the current page, though for this IMHO a couple of lines of jquery code are much better.
You could write a program in any language you are familiar with that outputs static html files. You could have a basic structure and then for the customized stuff, you include it from a separate file.
I know that with a large site you would want to separate footers, menus, etc so that updating that file would push the update out to every page that contains the item.
Is the same recommended for a small site made purely in HTML/CSS, or is it simpler/easier/standard to code out the menu in each page and update each page when a change is needed?
I don't necessarily want to bring in PHP or etc onto this website, but the ease of updating menus would be nice. Any other suggestions? I've heard Server Side Includes might be one option... is that considered "pure html" or is more required to be set up on the server?
Thanks!
Unless you've got a site consisting of one page, do yourself a favor and have some separate files with your header/footer/other repeated elements.
That way you only have to make one change and its done. No matter how meticulous you think you are, you will inevitably forget a page somewhere on an update any other way. Its a human thing.
If its "just" HTML, and you're not using a server-side language, then you are correct in that you'll want to use server side includes. Check with your host to see if it will process SSI on regular *.htm/*.html files or if you need to use the *.shtm/*.shtml extension.
Server side includes isn't html, but it's not really coding either. It's probably your best option if you don't want to get PHP or some other coding solution involved.
It's mainly just a function of the webserver that you are using, and whether it's enabled for the site.
Here's a tutorial on them for Apache.
Here's documentation for IIS.
There are tons of different ways to approach this problem, but ultimately if you want to make changes on your side and have them reflected in lots of pages you're going to have to have either some kind of server side processing, which means PHP or JSP or something along those lines, or you're going to have to have some sort of process that generates your site statically updating lots of repeated items wherever they occur, but ultimately that would just be a compile time solution that's equivalent to some other server side approach.
If you're comfortable working in Java / JSP, then simple JSP includes might do everything you need. If they don't, then you could go for a full blown Portlets API application. I'm sure other languages have equally valid approaches, so ultimately its decideding what you're most comfortable with.
Server side includes would be "pure HTML" from the browser's standpoint, but then so would PHP.
If you didn't want to Server Side Includes, you could dynamically build them using JavaScript or a library such as jQuery, and just include a .js file in each of your pages.
If it's really small / mostly text-based content, you could just have one page with hidden DIVs that are switched in. Then it'll also be very snappy and self-contained if someone wants to view it offline.
It is very easy to do this with php. This is some sample index.php page i've built:
http://pastebay.com/51887
And for example in "includes/navigation.php" i have this:
http://pastebay.com/51888
So in everypage you have just put that from first link and when you want to edit navigation, just edit "includes/navigation.php". :)