当我有这么多页面要分页时，如何处理分页？

Question

到目前为止，我知道分页只链接不同的页面。当我要显示的页面/帖子数量有限时，这可以很好地工作。但是，如果我有 30 或更多页要分页怎么办？创建不同的页面并将它们与分页链接不是一个坏主意吗？使用这种方法，在有这么多要链接的页面时，很难保持页面布局的一致性。有没有更好的设计，我只能显示一个页面（让我们称之为父页面），当单击导航时，它应该只带来内容（来自子页面）并将其替换为父页面中的上一个页？ 如果我没能让你明白我想说的话，请考虑以下情况。

HTML：

<div class="pagination">
  <a href="index/story0.html">&laquo;</a>
  <a href="index/story1.html">1</a>
  <a href="index/story2.html" class="active">2</a>
  <a href="index/story3.html">3</a>
  <a href="index/story4.html">4</a>
  <a href="index/story5.html">5</a>
  <a href="index/story6.html">6</a>
  <a href="index/story7.html">&raquo;</a>
</div>

在上面的方法中，我必须创建 7 个不同的页面来链接。为什么我为 7 个不同的故事创建了 7 个不同的 html 页面，其中有很多重复的内容？ 你能建议我一个更好的做法吗？ 请看下面的照片了解我打算建立什么样的页面。

Answer 1

嗯，你实际上是在尝试构建一些复杂的东西。

我认为这是一个个人项目，您不想使用像 Wordpress 这样的博客框架。

我也不知道您的编程背景是什么，但您似乎是初学者（如果我弄错了，请见谅）。

对于博客网站，您需要保存博客文章、cmets 和此类数据，您的应用程序需要数据库和后端应用程序（php 或 nodejs + express 可能是最容易设置的）数据。

对于前端开发，您应该使用已经提到的框架之一（Vue 似乎是最容易学习的），或者您可以依赖服务器端渲染。

我找到了这个(very, very) basic example（我不是作者，我和他没有关系），这只是一个演示，一个真实世界的应用程序需要更多的时间和精力，它可能会建立在一个大框架（后端和前端）的顶部

这里是一个技术列表，您可以查看评估它们并选择适合您需求的技术。

首先Wordpress，它是一个博客框架，您可能不需要进行任何类型的后端开发，但如果您想应用自定义主题，则需要进行一些前端开发。

如果想从头开始构建博客网站，您可能想学习其中一项技术

后端开发框架：

• Python -> Django
• 红宝石 -> Ruby on Rails
• PHP -> Laravel
• 节点 -> ExpressJS

前端开发框架：

• Angular
• React
• Vue
• Ember
• MarionetteJS

数据库：

• MongoDB
• MySQL

---

上一个答案

这是一个纯 javascript 实现，但正如我在评论中所说，最好使用像 handlebars.js 这样的模板引擎

var pageElement = document.querySelector('.pagination');
var totalPages = 8;
var pageText = ''

for (var currentPage = 0; currentPage < totalPages; currentPage += 1) {
    var content = currentPage;
    
    if (currentPage === 0) {
      content = '&laquo;';
    } else if (currentPage === totalPages - 1) {
      content = '&raquo';
    }
    
    
    pageText += '<a href="index/story' + currentPage + '.html">' + content + '</a>\n';

}
pageElement.innerHTML = pageText;

<div class="pagination">
</div>