Essentially what the question says - is there some way to achieve the equivalent of Angular's ng-if or just the html's visibility: hidden; and toggle it in Jekyll?
Please understand what Jekyll is: It is a static site generator that outputs static HTML on change (not on request, like PHP does). There is no such thing as hiding or unhiding things in Jekyll. All tabs should exists in the the HTML/DOM that Jekyll generates. Some of them can initially be hidden, but that is as far as Jekyll goes.
The actual switching between the visible elements should be done by javascript, as javascript can change the HTML/DOM after the request.
So, to answer your question: You can create/generate different tabs in Jekyll, but you should toggle them using javascript.
Does that answer your question?
Related
In Jekyll markdown, I'm trying to create an HTML link without duplicating the HTML link.
This is the currently documented approach to creating a link to another website.
[some text](https://example.com/some/link)
So in practice if I want to have the URL show up in my text I end up with:
[https://jekyllrb.com/docs/liquid/tags/#linking-to-posts](https://jekyllrb.com/docs/liquid/tags/#linking-to-posts)
This, to me, is undesirable because it makes a long URL twice as long and makes the original markup harder to follow.
My question is: Does Jeykll have a syntax that makes the text display the same as the URL?
Searching for solution
I found the following that were useful but did not answer my question
Jekyll docs - https://jekyllrb.com/docs/liquid/tags/#linking-to-posts
Post saying how external links can be made https://mademistakes.com/mastering-jekyll/how-to-link/#when-do-you-use-absolute-urls
Question about links within your Jekyll website.
jekyll markdown internal links
The HTML tag shorthand would be <https://jekyllrb.com/docs/liquid/tags/#linking-to-posts/>, see also this post.
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
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 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