鬼定製分頁

Question

我只是通過閱讀鬼主題文檔來設計一個鬼博客平臺的主題。我現在需要的是定製分頁。該文件說在partial文件夾內創建一個pagination.hbs。但問題是我不知道標記應該如何。

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> 

你需要保存編輯看到的變化後重新啓動鬼。

Answer 2

我創建了一些擴展默認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="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。