הוספת תגובות חיות לחברי האתר בלבד לאתרים של Ghost

כדי להוסיף את FastComments ל-Ghost כראוי, עלינו לערוך את קבצי התבנית.

נתחיל בהורדת התבנית הקיימת או הרצויה.

נווט ללוח הבקרה של האתר ולחץ על הסמל של ההגדרות בפינה השמאלית התחתונה:

פתח את ההגדרות

לאחר מכן בחר באפשרות Design:

בחר בעיצוב

למרות שבעצם איננו משנים את התבנית, לחץ על Change Theme בפינה השמאלית התחתונה:

שנה את התבנית

בפינה הימנית העליונה בחר ב-Advanced:

בחר במתקדם

...ואז הורד את התבנית הנוכחית או הרצויה:

הורד את התבנית

כעת, לאחר שהורדנו את קובץ ה-zip, חלצו אותו לתיקייה. הורדתי את casper.zip ברירת המחדל וחילצתי אותו אל Downloads\casper ב-Windows.

לאחר מכן, ודאו שמותקנת אצלכם גרסת ה-LTS של NodeJS או חדשה יותר. ניתן להוריד אותה כאן: https://nodejs.org/en/download/

לאחר התקנת NodeJS, תרצו להתקין עורך קוד.

אנו ממליצים (וגם משתמשים) ב-Webstorm, שניתן להשיג כאן עם ניסיון חינם ל-30 יום (ללא צורך בכרטיס אשראי): https://www.jetbrains.com/webstorm/

האפשרות החינמית הטובה הבאה היא כנראה Visual Studio Code: https://code.visualstudio.com/download

לאחר שהגדרתם את העורך ופתחתם את תיקיית הערכת העיצוב בעורך, פתחו את הטרמינל ב-IDE והריצו:

התקנת ערכת העיצוב

Copy

1

2npm install

3

פלט מוצלח ייראה כך (ניתן להתעלם מאזהרות):

פלט מוצלח של npm install

פעולה זו תגדיר את התלויות של ערכת העיצוב עבור הפקודות שנריץ בהמשך. בנוסף, הייצוא תלוי בכך שהתלויות של ערכת העיצוב מותקנות, אחרת הייבוא מחדש לא יעבוד כראוי.

כעת, כשהערכת הנושא פתוחה בעורך שלנו, פתח את package.json ושנה את השדה name למשהו אחר. במקרה שלנו פשוט נוסיף -fastcomments בסוף:

שנה את שם התבנית

אם אתה משתמש ב-IDE, הוא ישמור אוטומטית אחרי שתבצע את השינוי הזה.

כעת נפתח את התבנית המשמשת למאמרי הבלוג שלנו. היא נקראת post.hbs:

פתח את post.hbs

לאחר מכן עלינו לזהות היכן להוסיף את קוד הווידג'ט של FastComments.com.

אם אתה משתמש בערכת הנושא המוגדרת כברירת מחדל casper, תראה קטע כזה בשורה 82:

מדור תגובות מושבת

אם אתה משתמש בנושאים אחרים, לא תראה זאת, ותצטרך להוסיף קוד זה אחרי ה-</section> האחרון:

דוגמה לסעיף

Copy

1

2<section class="article-comments gh-canvas">

3</section>

4

עליך שיהיה משהו כזה מוכן:

התבנית מוכנה לקוד תגובות

לאחר שהכל מוכן, העתק את קוד הווידג'ט של FastComments.com:

קטע קוד תגובות Ghost של FastComments.com

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

הקידוד הושלם. עכשיו רק נשאר לייבא מחדש את ערכת הנושא שלנו!

עכשיו עלינו לארוז את קבצי התבנית חזרה לקובץ zip. כדי לעשות זאת, השתמשו בתכונות המובנות ב-Ghost.

פתחו שוב את הטרמינל של העורך שלכם והריצו npm run zip.

ייצא את התבנית שלך

זה יארוז את התבנית לקובץ zip ב-dist/casper-fastcomments.zip (אם זה השם שנתתם לתבנית ב-Step Three).

בחזרה בלוח הבקרה של Ghost, נעלה את ערכת העיצוב שלנו:

העלה את ערכת העיצוב שלך

אצלי הקובץ zip נמצא במיקום הבא. שים לב לתיקיית dist:

בחר קובץ Zip להעלאה

זכור להפעיל את ערכת העיצוב שהעלית זה עתה (Ghost אמור לשאול אותך).

כעת אמור להיות FastComments Live Commenting פעיל עבור החברים שלנו!

הצלחה!

מזל טוב על הגדרת FastComments עם Ghost! אם נתקלת ב־Domain Error, או ברצונך ללמוד כיצד להתאים אישית את אזור התגובות, המשך לקרוא!

FastComments נועד להיות מותאם אישית כדי להתאים לאתר שלך.

אם ברצונך להוסיף עיצוב מותאם אישית, או לכוונן את התצורה, עיין בתיעוד ההתאמות וההגדרות שלנו כדי ללמוד כיצד.