我在我的网站上创建了大约 60 多个 HTML 页面。我想在所有页面中都有一个上一个和下一个导航按钮/链接。我知道我们可以通过在每个页面上进行硬编码来手动完成,但这太主流了。我尝试了很多分页示例,但我无法做到这一点。谁能建议我如何使用某种脚本来获得它?
PS:建议结合 HTML + JS 或任何前端。
我在我的网站上创建了大约 60 多个 HTML 页面。我想在所有页面中都有一个上一个和下一个导航按钮/链接。我知道我们可以通过在每个页面上进行硬编码来手动完成,但这太主流了。我尝试了很多分页示例,但我无法做到这一点。谁能建议我如何使用某种脚本来获得它?
PS:建议结合 HTML + JS 或任何前端。
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 下一页
请自己试一试。。
最好,你可以使用像 CodeIgniter 这样的 MVC ......在开始时需要一些硬代码。之后就很容易了。您可以使用助手、库...
否则,
将 Page-nation 放在公共文件中。只需将该文件包含在所有其他页面中即可。这是有道理的。