лучший способ навигации предыдущая / следующая статья на сайте - PullRequest
Новая
       1

лучший способ навигации предыдущая / следующая статья на сайте

1 голос
/ 06 января 2020

На веб-сайте у меня есть список статей

// главная страница 

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

После нажатия на заголовок статьи1 и перенаправления на страницу статьи1 я надеюсь реализовать переход на предыдущую / следующую страницу подобен этому на каждой странице статьи: enter image description here

Однако я не буду sh жестко кодировать предыдущую и следующую гиперссылку на каждой странице. Каков наилучший способ сделать это? Я не уверен, правильный термин для поиска такой проблемы. Похоже, что разбиение на страницы относится к чему-то другому (сколько статей показывать на главной странице), тогда как моя проблема касается того, как динамически идентифицировать предыдущую и следующую страницу в списке статей. Спасибо.

Ответы [ 2 ]

2 голосов
/ 06 января 2020

Вы также можете попробовать этот подход.

Требуется добавить 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>
1 голос
/ 06 января 2020

Технически вы могли бы сделать это так: 

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.

Однако, это действительно глупо, и, как сказал Буррико, вы должны сделать это на стороне сервера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...