Question

我只是通过阅读鬼主题文档为鬼博客平台设计一个主题。我现在需要的只是定制分页。文档说在pagination.hbs文件夹中创建partial。但问题是我不知道标记应该如何。

Answer 1

有一篇简短的帖子here，说明了在哪里可以找到pagination.hbs文件的相关代码。您实际上可以使用默认的分页代码作为模板。

正如该帖子所述，您需要从Ghost源代码中的core/server/helpers/tpl/pagination.hbs复制默认分页代码，并使用它在主题的partials目录中创建自己的pagination.hbs文件。

您将看到需要在那里编辑的标记，即：

<nav class="pagination" role="pagination">
    {{#if prev}}
        <a class="newer-posts" href="{{pageUrl prev}}">&larr;</a>
    {{/if}}
   <span class="page-number">Page {{page}} of {{pages}}</span>
    {{#if next}}
        <a class="older-posts" href="{{pageUrl next}}">&rarr;</a>
    {{/if}}
</nav>

保存编辑后，您需要重新启动Ghost以查看更改。

Answer 2

我创建了一些扩展默认Ghost分页的JavaScript代码。它不显示“第1页的X”，而是显示一行带有上一个，下一个，第一个和最后一个按钮的页码。它还在中心有一个省略号，用于包含大量页面的站点。它可以从代码注入设置页面完全自定义。

我的实现创建了一个bootstrap分页组件，但我很确定你可以根据创建的类和元素（<nav>和<ul>元素）输出你想要的任何内容。

以下是我在{{ghost_foot}}之前添加的一些代码。这样，我可以覆盖代码注入的页脚部分中的一些设置：

var prev;
var pages;
var page;
var next;
var pageUrlPrev;
var pageUrlNext;
var numbersSurroundingEllipses = 3;
var useSimplePagination = false;

以下是我在我的网站上使用的customized pagination的pagination.hbs：

<script type="text/javascript">
    // set the values that we'll use in the bootstrap-pagination.js file
    {{!if there is no value for the variable, display a 0}}
    prev = {{#if prev}}{{prev}}{{else}}0{{/if}};
    pages = {{#if pages}}{{pages}}{{else}}0{{/if}};
    page = {{#if page}}{{page}}{{else}}0{{/if}};
    next = {{#if next}}{{next}}{{else}}0{{/if}};
    pageUrlPrev = '{{pageUrl prev}}';
    pageUrlNext = '{{pageUrl next}}';
    pageUrlFirst = '{{pageUrl 1}}';
    pageUrlLast = '{{pageUrl pages}}';
</script>
<nav>
  <ul class="pagination bootstrap-pagination">
  </ul>
</nav>

Here is the javascript code会将分页添加到上面的HTML中。

注意：由于这些链接是在客户端上创建的，因此在索引编制期间它们将无法用于搜索引擎。但是，据我了解，搜索引擎使用Ghost为每个索引页输出的link rel="prev"和link rel="next"标记。

以下是我们网站的内容：

<link rel="prev" href="https://cerkit.com/page/2/" />
<link rel="next" href="https://cerkit.com/page/4/" />

这让我相信搜索引擎可以在页面之间导航并访问所有链接。但是，我没有向任何肯定知道的人证实这一点，如果你认为这可能是一个问题，那么做一些研究。

我还确保将我的Ghost站点地图链接提交给搜索引擎以确保。

在处理分页时，这为您提供了另一种选择。

Here是我博客上的完整文章，提供了更多详细信息。

我在我的网站cerkit.com上拥有所有这些（以及一些其他Ghost技巧，例如将Font Awesome图标绑定到导航栏链接）。

幽灵自定义分页

2 个答案: