7

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

4

2 回答 2

18

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

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

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

<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 才能看到更改。

于 2013-11-02T22:27:58.867 回答
0

我创建了一些扩展默认 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;

这是我在我的网站上使用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 代码。

注意：由于这些链接是在客户端上创建的，因此在编制索引期间搜索引擎将无法使用它们。但是，据我了解，搜索引擎会利用 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 站点地图链接，以确保这一点。

这在使用分页时为您提供了另一种选择。

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

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

于 2016-02-07T03:09:44.093 回答