鬼定制分页

我只是通过阅读幽灵主题文档来devise一个鬼博客平台的主题。 我现在需要的是定制分页。 文件说在partial文件夹里面创build一个pagination.hbs 。 但问题是我不知道标记应该如何。

Answer 1

这里有一个简短的post，说明在哪里可以findpagination.hbs文件的相关代码。 你实际上可以使用默认的分页代码作为你的模板。

正如这篇文章所说，你需要从Ghost源代码中的core/server/helpers/tpl/pagination.hbs中复制默认的分页代码，并使用它在你的主题的partials目录中创build你自己的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

我创build了一些扩展了默认Ghost分页的JavaScript代码。 它不是显示“第1页的X”，而是显示一排页码，包括上一个，下一个，第一个和最后一个button。 它也有一个网页中心的省略号。 它是从代码注入设置页面完全可定制的。

我的实现创build一个bootstrap分页组件，但是我敢肯定你可以输出任何你想要的类和创build的元素（ <nav>和<ul>元素）。

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

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

以下是我在我的网站上使用的自定义分页的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> 

这里是将分页添加到上面的HTML 的JavaScript代码 。

注意：由于这些链接是在客户端上创build的，因此索引期间search引擎将无法使用这些链接。 然而，我的理解是，search引擎利用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/" /> 

这使我相信，search引擎可以浏览页面并访问所有链接。 但是，我没有证实这一点，谁肯定会知道，所以做一些研究，如果你认为这可能是一个问题。

我也确保我提交我的Ghost站点地图链接到search引擎只是为了确保。

这使您在使用分页时可以使用另一个选项。

以下是我的博客上的全文，提供了更多的细节。

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