고스트 사용자 지정 페이지 매기기

Question

고스트 테마 문서를 읽으면 고스트 블로깅 플랫폼 용 테마를 디자인합니다. 지금 필요한 것은 페이지 매김을 사용자 지정하는 것입니다. 문서에 partial 폴더 안에 pagination.hbs을 만듭니다. 문제는 마크 업이 어떻게되어야하는지 모르겠다는 것입니다.

Answer 1

pagination.hbs 파일의 관련 코드 위치를 설명하는 here이라는 간단한 게시물이 있습니다. 실제로 기본 페이지 매김 코드를 템플릿으로 사용할 수 있습니다.

포스트 노트에서 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

기본 고스트 페이지 매김을 확장하는 일부 JavaScript 코드를 만들었습니다. "Page of of X"를 표시하는 대신 이전, 다음, 첫 번째 및 마지막 버튼이있는 페이지 번호 행을 표시합니다. 또한 페이지가 많은 사이트의 경우 줄임표가 중앙에 있습니다. 코드 삽입 설정 페이지에서 완전히 사용자 정의 할 수 있습니다.

내 구현에서는 부트 스트랩 페이지 매김 컴포넌트를 생성하지만 클래스와 생성 된 요소 (<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="prev" 및 link rel="next" 태그를 사용합니다. 여기

은 내 웹 사이트처럼 보이는 것입니다 :

<link rel="prev" href="https://cerkit.com/page/2/" /> 
<link rel="next" href="https://cerkit.com/page/4/" /> 

해당 검색 엔진이 페이지에 액세스 모든 링크를 탐색 할 수 있는게 틀림 없어 그. 그러나 확실히 알 수있는 사람에게는이 사실을 확인하지 않았으므로 이것이 문제가 될 수 있다고 생각되면 조사를 해보십시오.

나는 또한 검색 엔진에 내 고스트 사이트 맵 링크를 제출했는지 확인했습니다.

이렇게하면 페이지 매김 작업시 다른 옵션이 제공됩니다.

Here은 내 블로그에 몇 가지 세부 정보를 제공하는 전체 기사입니다.

내 웹 사이트 : cerkit.com에있는 모든 글꼴 (예 : 네비게이션 링크에 글꼴 굉장 아이콘을 바인딩하는 것과 같은 몇 가지 고스트 트릭)이 있습니다.