幽灵自定义分页

Question

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

Answer 1

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

我的实现创建了一个引导分页组件，但我很确定您可以根据所创建的类和元素（<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 是我博客上的完整文章，其中提供了更多详细信息。

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

Answer 2

有一个简短的帖子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 才能看到更改。