7

ゴースト テーマのドキュメントを読んで、ゴースト ブログ プラットフォームのテーマを設計するだけです。今必要なのは、ページネーションをカスタマイズすることだけです。ドキュメントには、フォルダーpagination.hbs内に作成すると書かれています。partialしかし問題は、マークアップがどうあるべきか分からないことです。

4

2 に答える 2

18

pagination.hbs ファイルに関連するコードの場所を説明する短い投稿がここにあります。実際には、デフォルトのページネーション コードをテンプレートとして使用できます。

その投稿にあるように、デフォルトのページネーション コードをcore/server/helpers/tpl/pagination.hbsGhost ソース コードからコピーし、それを使用して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 を再起動して変更を確認する必要があります。

于 2013-11-02T22:27:58.867 に答える
0

デフォルトの Ghost ページネーションを拡張する JavaScript コードをいくつか作成しました。「Page 1 of X」を表示する代わりに、前、次、最初、最後のボタンを含むページ番号の行を表示します。また、ページ数の多いサイトの中央には省略記号があります。コード インジェクション設定ページから完全にカスタマイズできます。

私の実装では、ブートストラップ ページネーション コンポーネントが作成されますが、作成されたクラスと要素 (<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 サイトマップ リンクを検索エンジンに送信したことも確認しました。

これにより、ページネーションを操作するときに別のオプションが提供されます。

これが私のブログの完全な記事で、いくつかの詳細が記載されています。

私のウェブサイトcerkit.comには、これらすべて (および、Font Awesome アイコンを navbar リンクにバインドするなどの他のいくつかの Ghost トリック) があります。

于 2016-02-07T03:09:44.093 に答える