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.
Related
I have found many solutions for this question through JavaScript, but I want to be able to have a website that does not require JavaScript so as to be friendly with non-JS web browsers. I am trying to have a navigation bar on multiple websites without needing to change every HTML page whenever I want to make an update. How can I achieve this? Could I load an HTML file without JS?
If you do not want to use javascript, the other option would be to use PHP to include the files on all the pages you would require the navbar. So essentially, you would copy the navbar snippet into a single file, then using PHP methods (require or include), to add the snippets on all other pages. This way, you only need to edit that navbar snippet you copied whenever you need to make a change and it'll take effect on any page you have either required or included. More info on how to use include and require here
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.
I'm new at HTML and need to do a simple site as an assignment. For the site navigation menu I guess it would be easy to simply copy and paste the navigation menu HTML onto all the pages in a header div. But is there a better way to do this?
for example, is there an easy way (that doesn't require scripting) to only write the code in one place and have it included on every page? I remember that I did something in Dreamweaver that created a template page that included the navigation menu. However I have a feeling that that was just copying html between pages.
Without scripting your HTML files will need to contain the menubar in full.
You are describing what a server side scripting language can do. Without one - your HTML files are served as they are. Therefore they must contain the HTML for the menubar within them.
The comments mention using an iframe - though very creative - I believe it doesn't satisfy as being "a better way to do this"
You have must use HTML code every page without HTML does't work Try to learn some basic PHP it will help
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.