FastComments.com

Ghost साइटों पर केवल-सदस्यों के लिए लाइव कमेंटिंग जोड़ें

FastComments के साथ हम Ghost से बनाई गई किसी भी साइट पर आसानी से लाइव, केवल-सदस्यों (members-only) के लिए कमेंटिंग जोड़ सकते हैं।

हम आपके सदस्यों के यूज़रनेम, अवतार अपने-आप इम्पोर्ट कर पाएंगे, और कमेंट रिप्लाई नोटिफिकेशन सेटअप कर पाएंगे।

ध्यान दें कि इस ट्यूटोरियल के लिए FastComments अकाउंट की आवश्यकता है। सलाह दी जाती है कि पहले साइन अप करें और फिर यहाँ वापस आएँ। आप यहाँ अकाउंट बना सकते हैं।

इस ट्यूटोरियल में हम Ghost से बनाए गए ब्लॉग को टारगेट करेंगे, लेकिन थोड़े ज्ञान के साथ यही निर्देश किसी भी प्रकार की साइट पर लागू होते हैं।

यह ट्यूटोरियल उस यूज़र के नज़रिए से शुरू होता है जो Ghost के लिए बिल्कुल नया है। थीम एडिट करने का अनुभव रखने वाले यूज़र्स सीधे Step 4 पर जा सकते हैं।

यदि आपको परेशानी हो रही है, तो अपनी एक्सपोर्ट की गई थीम टेम्पलेट अपने सपोर्ट प्रतिनिधि को भेजने में संकोच न करें (इसके लिए भी स्टेप्स 1 - 5 आवश्यक हैं)।

चरण 1: अपनी थीम डाउनलोड करें Internal Link

FastComments को Ghost में ठीक से जोड़ने के लिए, हमें थीम फ़ाइलों को संपादित करना होगा।

तो आइए अपनी मौजूदा, या इच्छित थीम डाउनलोड करके शुरू करें।

अपनी साइट के डैशबोर्ड पर जाएं और नीचे बाईं ओर गियर पर क्लिक करें:

सेटिंग्स खोलें
सेटिंग्स खोलें

इसके बाद Design विकल्प चुनें:

Design चुनें
Design चुनें

हालाँकि हम तकनीकी रूप से थीम नहीं बदल रहे हैं, नीचे बाईं ओर Change Theme पर क्लिक करें:

थीम बदलें
थीम बदलें

ऊपर दाईं ओर Advanced चुनें:

Advanced चुनें
Advanced चुनें

...और फिर अपनी वर्तमान या आदर्श थीम डाउनलोड करें:

थीम डाउनलोड करें
थीम डाउनलोड करें

चरण 2: अपनी थीम लोकल इंस्टॉल करें Internal Link

अब जब हमने zip फ़ाइल डाउनलोड कर ली है, इसे एक फ़ोल्डर में एक्सट्रैक्ट करें। मैंने डिफ़ॉल्ट casper.zip डाउनलोड किया और Windows पर Downloads\casper में एक्सट्रैक्ट किया।

इसके बाद, यह सुनिश्चित करें कि आपके पास NodeJS का LTS या नया संस्करण इंस्टॉल है। आप इसे यहाँ से प्राप्त कर सकते हैं: https://nodejs.org/en/download/

NodeJS इंस्टॉल होने के बाद, आपको एक कोड एडिटर इंस्टॉल करना चाहिए।

हम Webstorm की सिफारिश करते हैं (और उसी का उपयोग करते हैं), जिसे आप यहाँ से 30-दिन के ट्रायल के साथ प्राप्त कर सकते हैं (क्रेडिट कार्ड की आवश्यकता नहीं): https://www.jetbrains.com/webstorm/

इसके बाद सबसे अच्छा मुफ्त विकल्प संभवतः Visual Studio Code है: https://code.visualstudio.com/download

एक बार जब आपका एडिटर सेटअप हो जाए और थीम फ़ोल्डर एडिटर में खुल जाए, तो IDE में टर्मिनल खोलें और चलाएँ:

थीम इंस्टॉल करें
Copy Copy
1
2npm install
3

सफल आउटपुट इस तरह दिखेगा (आप चेतावनियों को अनदेखा कर सकते हैं):

सफल npm install आउटपुट
सफल npm install आउटपुट

यह उन बाद के कमांड्स के लिए थीम की डिपेंडेंसीज़ सेट अप करेगा जिन्हें हम चलाएँगे। साथ ही, एक्सपोर्ट थीम की डिपेंडेंसीज़ के इंस्टॉल होने पर निर्भर करता है, अन्यथा री-इंपोर्ट ठीक से काम नहीं करेगा।

चरण 3: नई थीम का नाम रखें Internal Link

अब जब हमने थीम अपने एडिटर में खोल ली है, package.json खोलें और name फ़ील्ड को किसी अन्य नाम में बदलें। हमारे मामले में हमने अंत में बस -fastcomments जोड़ा है:

थीम का नाम बदलें
थीम का नाम बदलें

यदि आप किसी IDE का उपयोग कर रहे हैं, तो यह बदलाव करने के बाद अपने आप सेव हो जाएगा।

चरण 4: पोस्ट टेम्पलेट खोलें Internal Link

अब हम वह टेम्पलेट खोलेंगे जिसका उपयोग हमारे ब्लॉग लेखों के लिए किया जाता है। इसे post.hbs कहा जाता है:

post.hbs खोलें
post.hbs खोलें

चरण 5: FastComments कोड जोड़ें Internal Link

अब हमें यह पहचानना होगा कि FastComments.com विजेट कोड कहाँ जोड़ना है।

यदि आप डिफ़ॉल्ट casper थीम का उपयोग कर रहे हैं, तो आपको लाइन 82 पर इस तरह का एक सेक्शन दिखाई देगा:

अक्षम कमेंट सेक्शन
अक्षम कमेंट सेक्शन

यदि आप अन्य थीम का उपयोग कर रहे हैं, तो आपको यह नहीं दिखाई देगा, और आपको इस कोड को अंतिम </section> के बाद जोड़ना होगा:

सेक्शन उदाहरण
Copy Copy
1
2<section class="article-comments gh-canvas">
3</section>
4

आपके पास कुछ इस तरह तैयार होना चाहिए:

कमेंट कोड के लिए तैयार टेम्पलेट
कमेंट कोड के लिए तैयार टेम्पलेट

तैयार होने के बाद, FastComments.com विजेट कोड कॉपी करें:

Ghost FastComments.com कमेंट कोड स्निपेट
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 (function () {
6 let simpleSSO = null;
7
8 \{{#if access}}
9 \{{#if @member}}
10 simpleSSO = {
11 id: '\{{ @member.uuid }}',
12 email: '\{{@member.email}}',
13 username: '\{{@member.name}}',
14 avatar: '\{{ @member.avatar_image }}',
15 optedInNotifications: true,
16 optedInSubscriptionNotifications: true,
17 displayLabel: '\{{@member.labels}}'
18 }
19 \{{/if}}
20 \{{/if}}
21
22 window.fcConfigs = [{
23 target: '#fastcomments-widget',
24 tenantId: "demo",
25 urlId: window.location.pathname,
26 allowAnon: false,
27 simpleSSO: simpleSSO
28 }];
29 })();
30</script>
31

...और यह इस तरह दिखना चाहिए:

FastComments.com कमेंट कोड जोड़ें
FastComments.com कमेंट कोड जोड़ें

कोडिंग पूरी हुई। अब हमें बस अपनी थीम को फिर से इम्पोर्ट करना है!

चरण 6: अपनी थीम एक्सपोर्ट करें Internal Link

अब हमें थीम फ़ाइलों को वापस एक zip फ़ाइल में पैकेज करना होगा। इसके लिए, Ghost में उपलब्ध बिल्ट-इन सुविधाओं का उपयोग करें।

अपने एडिटर का टर्मिनल फिर से खोलें और npm run zip चलाएँ।

अपनी थीम एक्सपोर्ट करें
अपनी थीम एक्सपोर्ट करें

इससे थीम dist/casper-fastcomments.zip में एक zip फ़ाइल के रूप में पैकेज हो जाएगी (यदि आपने Step Three में थीम को यही नाम दिया है)।

चरण 7: थीम को Ghost पर अपलोड करें Internal Link

Ghost डैशबोर्ड पर वापस जाकर, आइए अपनी थीम अपलोड करें:

अपनी थीम अपलोड करें
अपनी थीम अपलोड करें

मेरे मामले में, zip फ़ाइल निम्नलिखित स्थान पर है। dist फ़ोल्डर पर ध्यान दें:

अपलोड करने के लिए Zip चुनें
अपलोड करने के लिए Zip चुनें

अपनी नई अपलोड की गई थीम को सक्रिय करना न भूलें (Ghost आपसे पूछेगा)।

सफलता! Internal Link

अब हमारे सदस्यों के लिए FastComments Live Commenting सक्षम हो जाना चाहिए!

सफलता!
सफलता!

Ghost के साथ FastComments सेट अप करने के लिए बधाई! यदि आपको Domain Error का सामना हुआ है, या आप कमेंट एरिया को कस्टमाइज़ करना सीखना चाहते हैं, तो आगे पढ़ें!

कस्टमाइज़ेशन Internal Link

FastComments को आपकी साइट से मेल खाने के लिए अनुकूलित करने के लिए डिज़ाइन किया गया है।

यदि आप कस्टम स्टाइलिंग जोड़ना चाहते हैं, या कॉन्फ़िगरेशन में बदलाव करना चाहते हैं, तो हमारी कस्टमाइज़ेशन दस्तावेज़ीकरण देखें और जानें कि कैसे।