Question

我在我的网站上创建了60多个HTML页面。我想在所有页面中都有一个上一个和下一个导航按钮/链接。我知道我们可以通过在每个页面上进行硬编码来手动完成，但这太主流了。我尝试了许多分页示例，但我无法实现这一点。任何人都可以建议我如何通过某种脚本获得这个？

P.S：建议使用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>

如果您需要更多导航按钮，如下所示

请自己尝试..

如何在我的网站上添加导航按钮

2 个答案: