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

Next we need to identify where to add the FastComments.com widget code.

If you're using the default casper theme, you'll see a section like this at line 82:

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

If you're using other themes, you won't see this, and will need to add this code after the last </section>:

דוגמה ל-

Copy

1

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

3</section>

4

You should have something like this ready:

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

Once ready, copy the FastComments.com widget code:

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

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.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 FastCommentsUI(document.getElementById('fastcomments-widget'), {

23 tenantId: "demo",

24 urlId: window.location.pathname,

25 allowAnon: false,

26 simpleSSO: simpleSSO

27 });

28 })();

29</script>

30

...and it should look like this:

הוסף את קוד התגובות של FastComments.com

Coding done. Now we just have to re-import our theme!

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

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