How to add Navigation buttons to my website

Question

I'm creating some 60+ HTML pages in my website. I would like to have a previous and next navigation button/link in all pages. I know that we can do it manually by hard-coding on each page, but that is too mainstream. I tried lots of pagination examples but I can't able achieve this. Can anyone suggest me how can I get this with some sort of script?

PS : Suggest with the combination of HTML + JS or anything frontend.

Answer 1

Best, you can use MVC like CodeIgniter... It's need some hard-code at starting. After that It's make easy. You can use Helpers, Library...

Otherwise,

Put Page-nation in common file. Just Include that file in all other pages. It's make sense.

Answer 2

These type of navigations are good when you use server side language like PHP or other.

Based on your question, below answer is not mainstream.

Note :
I believe you give each and every page with hard coded is lot better
Time taken for hardcodding ~ Time taken for `not mainstream`
Choose it wisely..

Below are the few steps, i have explained, hope you understand it clearly

1. Initialize an array and store page names.
2. find the size of array
3. set current pagename in variable
4. find its location

5. If current location is greater than 0, then show prev button
6. If current location is lesser than total pages show next button

Code Starts here

<script>
var pages = new Array("pageOne.html", "pageTwo.html", "PageThree.html", "PageFour.html", "PageFive.html", "PageSix.html");
var totalPages = pages.length;

var curPageName = "PageThree.html"; // Enter your page name here
var getCurPageLocation = pages.indexOf(curPageName);

console.log("Total Pages : " + totalPages);
console.log("Current Page Name : " + curPageName);
console.log("Position of Page in Array : " + getCurPageLocation );


/* To find prev and next page code starts from here */
if (getCurPageLocation > 0) {
    var prevPageLocation = getCurPageLocation - 1;
    var prevPageName = pages[prevPageLocation];
    console.log("Prev Page Name : " + prevPageName);
}

if (getCurPageLocation < totalPages) {
    var nextPageLocation = getCurPageLocation + 1;
    var nextPageName = pages[nextPageLocation];
    console.log("Next Page Name : " + nextPageName);
}
/* To find prev and next page code ends here */


</script>

And If you need more navigation buttons like below

Prev 1 2 3 4 Next

Please try it yourself..