在网站上导航上一篇/下一篇文章的最佳方式答案

【问题标题】：the best way to navigation previous/next article on a website在网站上导航上一篇/下一篇文章的最佳方式
【发布时间】：2020-01-06 10:09:35
【问题描述】：

在一个网站上我打算有一个文章列表

//主页面

<body>
<a href="/article1_name.html">article1 title</a> 
<a href="/article2_some_other_name.html/">article2 title</a> 
<a href="/article3_another_name.html/">article3 title</a> 
...
<a href="/article10_yet_another_name.html/">article10 title</a> 
</body>

一旦点击article1标题并重定向到article1页面，我希望在每个文章页面中实现这样的上一页/下一页导航：

但是我不希望在每个页面上硬编码上一个和下一个超链接。做这个的最好方式是什么？我不确定搜索此类问题的正确术语。分页似乎指的是其他东西（主页上显示多少篇文章），而我的问题涉及如何在文章列表中动态识别上一页和下一页。谢谢。

【问题讨论】：

将文章存储在服务器上，并让服务器使用任何后端语言自动为您插入正确的链接。您还可以通过 ID 唯一标识文章，并链接到例如/article/123，您的服务器可以回复正确的文章
我确信这可行，但我更不熟悉如何让服务器自动插入链接。有没有适合初学者的前端解决方案？
一个优雅的通用解决方案将需要一个后端。（当然，如果你愿意，你可以继续硬编码……）

标签： jquery html

【解决方案1】：

您也可以尝试这种方法。

需要将 class="currentArticle" 添加到当前正在查看的文章中。


<html>
    <head>
        <script>    

            function prevPage(){
                var currentArticle = document.getElementsByClassName("currentArticle");
                currentArticle[0].previousElementSibling.click();
            }

            function nextPage(){
                var currentArticle = document.getElementsByClassName("currentArticle");
                currentArticle[0].nextElementSibling.click();
            }           

        </script>
    </head>

<body>  
      <div onClick="prevPage()">arrow left image placeholder</div>
      <a href="/article1_name.html" >article1 title</a> 
      <a href="/article2_some_other_name.html/" class="currentArticle">article2 title</a> 
      <a href="/article3_another_name.html/">article3 title</a> 
      ...
      <a href="/article10_yet_another_name.html/">article10 title</a> 
      <div onClick="nextPage()">arrow right image placeholder</div>
</body>

</html>

【讨论】：

【解决方案2】：

从技术上讲，您可以这样做：

var parts = window.location.href.split('/'); //Splits the url by /
var articleString = parts[parts.length - 1].split('_')[0]; //Finds last / and first string before the _
var matches = articleString.match(/\d+$/); //Gets the string form of the number
var currentArticleNum = parseInt(matches[0]); //Parses the number.

但是，这真的很 hacky，正如 burriko 所说，你应该在服务器端做这个。

【讨论】：