भूत कस्टम पेजिनेशन

Question

मैं भूत थीम दस्तावेज़ों को पढ़कर भूत ब्लॉगिंग प्लेटफार्म के लिए एक थीम तैयार करता हूं। अब मुझे पेजिनेशन को अनुकूलित करना है। दस्तावेज़ partial फ़ोल्डर के अंदर pagination.hbs बनाएं। लेकिन समस्या यह है कि मुझे नहीं पता कि मार्कअप कैसे होना चाहिए।

Answer 1

एक संक्षिप्त पोस्ट here है जो बताता है कि आपके पेजिनेशन.hbs फ़ाइल के लिए कोड का प्रासंगिक बिट कहां मिलना है। आप वास्तव में डिफ़ॉल्ट टेम्पलेट कोड को अपने टेम्पलेट के रूप में उपयोग करने में सक्षम होंगे।

पोस्ट नोट्स के रूप में, आपको भूत स्रोत कोड में core/server/helpers/tpl/pagination.hbs से डिफ़ॉल्ट पेजिनेशन कोड कॉपी करने की आवश्यकता है और अपनी थीम की partials निर्देशिका में अपनी खुद की पेजिनेशन.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

मैंने कुछ जावास्क्रिप्ट कोड बनाया है जो डिफ़ॉल्ट घोस्ट पेजिनेशन बढ़ाता है। "एक्स का पृष्ठ 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 कि उपर्युक्त एचटीएमएल में अंकन जोड़ देगा।

नोट: चूंकि ये लिंक क्लाइंट पर बनाए जाते हैं, वे इंडेक्सिंग के दौरान खोज इंजन के लिए उपलब्ध नहीं होंगे। हालांकि, यह मेरी समझ है कि खोज इंजन 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।