So erstellen Sie ein Paginierungssystem in Hexo

Question

Ich liebe mit Hexo .. :)

Ich habe benutzerdefinierte Seite eingerichtet. Ist es möglich, alle Beiträge auf meiner Seite als paginiert zu zeigen?

Mit site.posts bekam ich alle Post ohne Seitenumbruch.

Was soll ich tun, um alle Beiträge von Seiten paginiert zu bekommen?

Danke.

Answer 1

In der Hauptkonfigurationsdatei _config.yml gibt es eine per_page Variable, mit der Sie auswählen können, wie viele Beiträge Sie pro Seite anzeigen möchten.

Erstellen Sie eine Vorlage, index.ejs zum Beispiel:

<% page.posts.each(function(post) { %> 
    <article> 
    // do what you have to do to display each post 
    </article> 
<% }) %> 
<%- partial('pagination', {type: 'page'}) %> 

Wie Sie sehen können, benutzen wir die page Variable 7 Beiträge zu bekommen. Danach erstellen Sie eine andere Vorlage pagination.ejs, mit denen Sie durch die Seite navigieren:

<div class="pagination-bar"> 
    <ul class="pagination"> 
     <% if (page.prev) { %> 
     <li class="pagination-prev"> 
      <% if (page.prev === 1) { %> 
       <a class="btn btn--default btn--small" href="<%- url_for(' ') %>"> 
      <% } else { %> 
       <a class="btn btn--default btn--small" href="<%- url_for(page.prev_link) %>"> 
      <% } %> 
       <i class="fa fa-angle-left text-base icon-mr"></i> 
        <span><%= __('pagination.newer_posts') %></span> 
      </a> 
     </li> 
     <% } %> 
     <% if (page.next) { %> 
     <li class="pagination-next"> 
      <a class="btn btn--default btn--small" href="<%- url_for(page.next_link) %>"> 
        <span><%= __('pagination.older_posts') %></span> 
       <i class="fa fa-angle-right text-base icon-ml"></i> 
      </a> 
     </li> 
     <% } %> 
     <li class="pagination-number"><%= _p('pagination.page', page.current) + ' ' + _p('pagination.of', page.total) %></li> 
    </ul> 
</div> 

ich ein Hexo Thema geschrieben: Tranquilpeak, empfehle ich Ihnen, den Quellcode zu überprüfen, um zu verstehen, wie ich es gebaut und von Natürlich lesen Sie die offizielle Hexo documentation

Answer 2

Dies ist eine späte Antwort, aber ich habe das Gefühl, es gibt eine einfache Antwort auf Paginierung mit den aktuellen Hexo-Bibliotheken. Sie sollten jedoch mit der Standardinitialisierung kommen.

Werfen Sie einen Blick auf hexo-generator-index, es verwendet hexo-pagination, um ein Array von Seiten zu generieren.

Jede dieser Seiten enthält posts für diese Seiten. Ihre Seiten erhalten auch die .prev und .next Eigenschaften, unter anderem durch hexo-pagination ausgeführt werden. Seiten werden auch automatisch zum Renderer gesendet. Sie brauchen nur dieses Modul für Pakete mit

npm install hexo-generator-index

Hexo sucht automatisch zu installieren mit hexo-* und require s diese Module bei der Initialisierung beginnt. Achten Sie auf config.index_generator.path im Code. Sie können mit hexo init a-blog in Ihrem _config.yml Standard Blogs initialisiert angeben jetzt kommen mit dem folgenden yaml

# Home page setting 
# path: Root path for your blogs index page. (default = '') 
# per_page: Posts displayed per page. (0 = disable pagination) 
# order_by: Posts order. (Order by date descending by default) 
index_generator: 
path: '' 
per_page: 10 
order_by: -date 

Diese Stellen in Ihren Vorlagen zugänglich sein wird. Verwenden Sie einfach page.posts. Haben Sie sich die Zeile angesehen, in der layout: ['index', 'archive'] erscheint? Dies bedeutet, dass index.ejs als Vorlage für Ihre Seiten verwendet wird. Wenn es index.ejs nicht finden kann, wird archive.ejs als Sicherung verwendet. Das Standardprojekt wird eine index.ejs haben, die als Teil die themes/layouts/_partial/archive.ejs Datei aufruft. Hier ist ein Beispiel aus der _partial/archive.ejs Datei, Beiträge einer Seite zuzugreifen:

<% page.posts.each(function(post){ %> 
    <%- partial('article', {post: post, index: true}) %> 
    <% }) %> 

Ein Tipp obwohl die page.posts kein Array ist. Es ist eigentlich ein umgebrochenes Array (ein Query-Objekt, um genau zu sein; Lookup-Warehouse, das Datenbank-Backend für Hexo, wenn Sie interessiert sind).Deshalb ist eine page.posts.each möglich, wobei das native javascript jede Funktion Array.prototype.forEach ist.

In der gleichen Datei, werden Sie auch

finden

<% if (page.total > 1){ %> 
    <nav id="page-nav"> 
    <% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;"%> 
    <%- paginator({ 
     prev_text: prev_text, 
     next_text: next_text 
    }) %> 
    </nav> 
<% } %> 

Siehe the paginator helper und the source code. Im Grunde ist es eine Funktion, die ein JavaScript-Objekt verwendet und eine Zeichenfolge schreibt, die <a> Tags codiert. Sie können auch Ihren eigenen Helfer registrieren und beliebig paginieren.

Zurück zum Indexgenerator. Beachten Sie, dass Sie unabhängig davon, was Sie für das Feld path verwenden, eine index.html-Datei erhalten, die in diesem Pfad für Sie generiert wird. Wenn Sie also path: cats eingeben, können Sie es unter yoursite.com/cats/ besuchen, da nach dem Generieren Ihres öffentlichen Ordners eine index.html-Datei in cats/index.html existiert. Seite zwei, wenn Sie nichts für config.pagination_dir (oder nur pagination_dir in Ihrem _config.yml) liefern, kann unter yoursite.com/cats/page/2/ besucht werden.

hexo-generate-index indexiert alle Ihre Beiträge. Es gibt weitere Module für die Indexierung von Beiträgen und wird für Tags und Kategorien paginiert. Schauen Sie sich die plugins an und geben Sie "generat" ein.