Add Members-Only Live Commenting to ghost Sites

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

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

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

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

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

בחר בעיצוב

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

שנה את התבנית

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

בחר במתקדם

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

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

Now that we've downloaded the zip file, extract it to a folder. I've downloaded the default casper.zip and extracted to Downloads\casper on Windows.

Next, you'll want to make sure you have the LTS or newer version of NodeJS installed. You can get that here: https://nodejs.org/en/download/

Once NodeJS is installed, you'll want to install a code editor.

We recommend (and use) Webstorm, which you can get here with a 30-day trial (no credit card needed): https://www.jetbrains.com/webstorm/

The next best free option would probably be Visual Studio Code: https://code.visualstudio.com/download

Once you have your editor setup, and the theme folder open in the editor, open the terminal in the IDE and run:

התקן את התבנית

Copy

1

2npm install

3

Successful output will look like this (you can ignore warnings):

פלט התקנה מוצלח של npm

This will set up the theme's dependencies for later commands we will run. Also, the export depends on the theme's dependencies being installed, otherwise the re-import will not work properly.

כעת, כשהערכת הנושא פתוחה בעורך שלנו, פתח את 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 נועד להיות מותאם אישית כדי להתאים לאתר שלך.

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