Add Live Discussions to Super.So Sites

Πρώτα πρέπει να ανοίξουμε τον επεξεργαστή κώδικα. Αν θέλετε να προσθέσετε το FastComments σε όλες τις σελίδες, απλώς επιλέξτε Κώδικας κάτω αριστερά:

Άνοιγμα ρυθμίσεων κώδικα

If you want to add it to a specific page, then select Edit Custom Code in that page's settings.

Now let's select the Body tab. Αυτό είναι σημαντικό!. Installing the code snippet in Head δεν λειτουργεί.

Επιλέξτε την καρτέλα Body

Now you're ready for step 2.

Στο επόμενο βήμα πρέπει να αντιγράψετε τον προκατασκευασμένο κώδικα widget παρακάτω.

Όσο είστε συνδεδεμένοι στο FastComments.com, το παρακάτω απόσπασμα κώδικα θα περιέχει ήδη τις πληροφορίες του λογαριασμού σας. Ας το αντιγράψουμε:

Κώδικας Super.so FastComments Collab Chat

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

3<script>

4 (function () {

5 let currentPathname = window.location.pathname;

6 let currentWidget = null;

7 let currentTopBar = null;

8

9 function load() {

10 if (!window.FastCommentsCollabChat) {

11 console.log('...no script, trying again...');

12 return setTimeout(load, 100);

13 }

14

15 const target = document.querySelector('.super-content');

16 if (!target || !target.innerHTML || target.innerHTML.length < 100) {

17 console.log('...no content, trying again...');

18 return setTimeout(load, 100);

19 }

20

21 // Καθαρισμός υπάρχουσας περίπτωσης

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Καθαρισμός υπάρχουσας πάνω γραμμής αν υπάρχει

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Δημιουργία νέας πάνω γραμμής

32 const topBarTarget = document.createElement('div');

33 target.parentNode.insertBefore(topBarTarget, target);

34 topBarTarget.style.maxWidth = 'var(--layout-max-width)';

35 topBarTarget.style.margin = '0 auto';

36 currentTopBar = topBarTarget;

37 currentWidget = target;

38

39 // Αρχικοποίηση FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Ενημέρωση τρέχοντος pathname

46 currentPathname = window.location.pathname;

47 }

48

49 // Αρχικό φόρτωμα

50 load();

51

52 // Έλεγχος για αλλαγές κάθε 500ms

53 setInterval(() => {

54 // Επαναφόρτωση αν το pathname άλλαξε

55 if (window.location.pathname !== currentPathname) {

56 console.log('Pathname changed, reloading...');

57 load();

58 return;

59 }

60

61 // Επαναφόρτωση αν το widget αφαιρέθηκε

62 if (currentWidget && !currentWidget.parentNode) {

63 console.log('Widget removed, reloading...');

64 load();

65 return;

66 }

67

68 // Επαναφόρτωση αν το container αδειάστηκε

69 const target = document.querySelector('.super-content');

70 if (target && target.innerHTML.length < 100) {

71 console.log('Container emptied, reloading...');

72 load();

73 }

74 }, 500);

75 })();

76</script>

77

Now paste in the Body area:

Επικολλημένος κώδικας

If you see a "this is a demo message" after pasting the code:

• Βεβαιωθείτε ότι είστε συνδεδεμένοι στο λογαριασμό σας στο fastcomments.com.
• Βεβαιωθείτε ότι έχετε ενεργοποιημένα τα cookies τρίτων.
• Έπειτα ανανεώστε αυτή τη σελίδα και αντιγράψτε ξανά το απόσπασμα κώδικα. Θα πρέπει να έχει το tenantId συμπληρωμένο με το αναγνωριστικό του tenant σας.

Προσθήκη widget ζωντανών σχολίων στα άρθρα Notion του Super.so σας

Εκτός από το Collab Chat, μπορείτε να προσθέσετε ένα παραδοσιακό widget σχολίων στο κάτω μέρος των άρθρων Notion σας. Αυτό επιτρέπει στους αναγνώστες να αφήνουν σχόλια και να συζητούν για ολόκληρο το άρθρο.

Βήματα εγκατάστασης

Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον στην ενότητα Body των ρυθμίσεων του site σας στο Super.so:

Widget ζωντανών σχολίων FastComments για Super.so

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<script>

4 (function () {

5 let currentPathname = window.location.pathname;

6 let currentWidget = null;

7

8 function load() {

9 if (!window.FastCommentsUI) {

10 console.log('...no script, trying again...');

11 return setTimeout(load, 100);

12 }

13

14 const contentArea = document.querySelector('.notion-root');

15 if (!contentArea || !contentArea.innerHTML || contentArea.innerHTML.length < 100) {

16 console.log('...no content, trying again...');

17 return setTimeout(load, 100);

18 }

19

20 // Καθαρισμός υπάρχουσας παρουσίας

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Δημιουργία νέου στόχου

26 const target = document.createElement('div');

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Αρχικοποίηση FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Ενημέρωση του τρέχοντος pathname

37 currentPathname = window.location.pathname;

38 }

39

40 // Αρχική φόρτωση

41 load();

42

43 // Έλεγχος για αλλαγές κάθε 500ms

44 setInterval(() => {

45 // Επαναφόρτωση εάν το pathname άλλαξε

46 if (window.location.pathname !== currentPathname) {

47 console.log('Pathname changed, reloading...');

48 load();

49 return;

50 }

51

52 // Επαναφόρτωση εάν το widget αφαιρέθηκε

53 if (currentWidget && !currentWidget.parentNode) {

54 console.log('Widget removed, reloading...');

55 load();

56 return;

57 }

58

59 // Επαναφόρτωση εάν το container αδειάστηκε

60 const contentArea = document.querySelector('.notion-root');

61 if (contentArea && contentArea.innerHTML.length < 100) {

62 console.log('Container emptied, reloading...');

63 load();

64 }

65 }, 500);

66 })();

67</script>

68

Σημαντικές Σημειώσεις

• Το widget σχολίων θα εμφανίζεται στο κάτω μέρος των άρθρων Notion σας
• Κάθε σελίδα αποκτά το δικό της μοναδικό νήμα σχολίων βάσει της διαδρομής URL
• Βεβαιωθείτε ότι έχετε αντικαταστήσει το "demo" με το πραγματικό tenant ID από τον λογαριασμό σας στο FastComments
• Το widget διαχειρίζεται αυτόματα τη δυναμική φόρτωση σελίδων του Super.so

Το FastComments έχει σχεδιαστεί ώστε να προσαρμόζεται για να ταιριάζει στον ιστότοπό σας.

Εάν θέλετε να προσθέσετε προσαρμοσμένο στυλ ή να προσαρμόσετε τις ρυθμίσεις, Δείτε την τεκμηρίωση προσαρμογών μας για να μάθετε πώς.