Question

因此，我的Tumblr上没有通常的上一页和下一页链接，我希望有一些方向键作为我的导航。

是的，我设法显示所有箭头以及指向索引页面，存档和下一页的链接。但是，您可能都知道Tumblr具有在第一页上禁用“上一页”按钮而在最后一页上禁用“下一页按钮”的代码。但是，我希望它们可见。

代码就是你到处都可以看到的。我只是不知道该调整什么。

{block:PreviousPage}
<a href="{PreviousPage}" class="jump_page">◄</a>
{/block:PreviousPage}

{block:NextPage}
<a href="{NextPage}" class="jump_page">►</a>
{/block:NextPage}

对于CSS来说，我几乎是一个新手，所以我很抱歉，如果这个话题的答案已经存在，我很抱歉。但实际上，我找不到它，也许我甚至不知道如何正确搜索，但我尝试过，现在我需要帮助。

好的，感谢阅读，我希望有人在这里得到答案。

Answer 1

当上一页可用时，隐藏当前页面：

  <!-- some styling -->
  <style>
    #PageNavi{
      position:relative;
      width:50%;
      height:50px;
      margin:0;
      padding:0;
      font-size:30px;
    }
    #PageCurr{
      float:left;
      width:50%;
      background-color:red;
    }
    #PagePrev{
      float:left;
      width:50%;
      background-color:green;
    }
    #PageNext{
      float:left;
      width:50%;
      background-color:yellow;
    }
  </style>

  <!-- the tumblr blocks | if the outer div '#PageNavi' is placed
  inside the 'block:JumpPagination length="2"}' it will break, the
  pages also dont show up in the tumblr editor, go live to see it -->
  <DIV ID="PageNavi">
  {block:JumpPagination length="2"}

    {block:CurrentPage}

      {block:PreviousPage}

      <!-- this is the previous page, its allways
      rendered if current page greater than 1 -->
      <DIV ID="PagePrev">
      <a href="{PreviousPage}">{PageNumber}</a>
      </DIV>

        <!-- when previous page available, this block is also rendered
        too!! so overwrite #PageCurr by 'styling' it display none. -->
        <style>
        #PageCurr{ display:none; line-height:0; }
        </style>

      {/block:PreviousPage}

    <!-- this is the current page, allways rendered, BUT set 
    to display none if the previous page block is renderd so
    the “Previous Page” Button visible on the first page -->
    <DIV ID="PageCurr">
    <a href="{URL}">{PageNumber}</a> 
    </DIV>

    {/block:CurrentPage}

    {block:JumpPage}

      <!-- this is the next page, its the next page. :P -->
      <DIV ID="PageNext">
      <a href="{URL}">{PageNumber}</a>
      </DIV>

    {/block:JumpPage}

  {/block:JumpPagination}
  </DIV>

或者在渲染块时覆盖url，因此不需要隐藏任何内容：

  <!-- some styling -->
  <style>
    #PageNavi{
      position:relative;
      width:50%;
      height:50px;
      margin:0;
      padding:0;
      font-size:30px;
    }
    #PagePrev{
      float:left;
      width:50%;
      background-color:green;
    }
    #PageNext{
      float:left;
      width:50%;
      background-color:yellow;
    }
  </style>

  <!-- the tumblr blocks | if the outer div '#PageNavi' is placed
  inside the 'block:JumpPagination length="2"}' it will break, the
  pages also dont show up in the tumblr editor, go live to see it -->
  <DIV ID="PageNavi">
  {block:JumpPagination length="2"}

    {block:CurrentPage}
    <DIV ID="PagePrev">
    <!-- magically overwrite current page with the previous page on block render, tada!! -->
    <a {block:PreviousPage}href="{PreviousPage}"{/block:PreviousPage} href="{URL}">{PageNumber}</a> 
    </DIV>
    {/block:CurrentPage}

    {block:JumpPage}
    <DIV ID="PageNext">
    <a href="{URL}">{PageNumber}</a>
    </DIV>
    {/block:JumpPage}

  {/block:JumpPagination}
  </DIV>

如果有人在DIV之外思考，也可以推断更多方式。 ;）

Tumblr：我如何制作＆＃34;上一页＆＃34;按钮在第一个网站上可见？

1 个答案: