如何向我的網站添加導航按鈕

Question

我在網站上創建了60多個HTML頁面。 我希望所有頁面上都有上一個和下一個導航按鈕/鏈接。 我知道我們可以通過在每個頁面上進行硬編碼來手動完成此操作，但這太主流了。 我嘗試了很多分頁示例，但無法實現。 誰能建議我如何使用某種腳本來實現這一目標？

PS：建議結合使用HTML + JS或任何前端。

Answer 1

最好，您可以使用CodeIgniter之類的MVC ...開始時需要一些硬代碼。 之后，一切變得簡單。 您可以使用助手，庫...

除此以外，

將Page-nation放在通用文件中。 只需在其他所有頁面中包含該文件即可。 有道理。

Answer 2

當您使用服務器端語言（如PHP或其他語言）時，這些類型的導航非常有用。

根據您的問題，以下答案不是主流。

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..

我已經解釋了以下幾個步驟，希望您能清楚理解

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

代碼從這里開始

<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>

並且如果您需要更多導航按鈕，如下所示

上一頁1 2 3 4下一頁

請自己嘗試。