Movabletype: Paginierung von Bootstrap verwenden

Movabletype verwendet eine sehr "rustikale" Anzeige wenn man zwischen den Seiten bei Kategorien und Suchergebnissen navigiert. Ich habe die Gestaltung des Bootstrap Frameworks durch folgenden einfache Änderungen eingefügt,

201205-mt-pager-before-bootstrap.png201205-mt-pager-after-bootstrap.png

Kategorien und Monatsarchive

Entry Listing Template: Ersetze

<div class="content-nav">
    <mt:ArchivePrevious>
    <a href="<$mt:ArchiveLink$>">&laquo; <$mt:ArchiveTitle$></a> |
    </mt:ArchivePrevious>
    <a href="<$mt:Link template="main_index"$>">Hauptseite</a> |
    <a href="<$mt:Link template="archive_index"$>">Archive</a>
    <mt:ArchiveNext>
    | <a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> &raquo;</a>
    </mt:ArchiveNext>
</div>

Durch

<div class="pager">
    <mt:ArchivePrevious>
    <a href="<$mt:ArchiveLink$>"> <$mt:ArchiveTitle$></a>
    </mt:ArchivePrevious>
    <a href="<$mt:Link template="main_index"$>">Hauptseite</a>
    <a href="<$mt:Link template="archive_index"$>">Archive</a>
    <mt:ArchiveNext>
    <a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$></a>
    </mt:ArchiveNext>
</div>

Suchergebnissse

Im System Template "Search results" ersetze:

 <div class="content-nav">
        <mt:IfPreviousResults>
         <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; Previous</a>&nbsp;&nbsp;
        </mt:IfPreviousResults>
        <mt:PagerBlock>
          <mt:IfCurrentPage>
              <$mt:Var name="__value__"$>
          <mt:Else>
              <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a>
          </mt:IfCurrentPage>
          <mt:Unless name="__last__">&nbsp;</mt:Unless>
        </mt:PagerBlock>
        <mt:IfMoreResults>&nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">Next &gt;</a></mt:IfMoreResults>
    </div>

Durch

<div class="pagination">
        <mt:IfPreviousResults>
    <li> <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">«</a></li>
         </mt:IfPreviousResults>
         <mt:PagerBlock>
            <mt:IfCurrentPage>
             <li class="active"> <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$> </a></li>
              <mt:Else>
             <li> <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a> </li>
            </mt:IfCurrentPage>
            <mt:Unless name="__last__"></mt:Unless>
          </mt:PagerBlock>
          <mt:IfMoreResults>
    <li>  <a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">»</a></li>
          </mt:IfMoreResults>
    </div>


 

18.5.12 Weitere Beiträge zu: Bootstrap Movabletype

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License