Add Members-Only Live Commenting to ghost Sites

For at tilføje FastComments til Ghost korrekt, skal vi redigere temaets filer.

Så lad os begynde med at downloade dit nuværende eller ønskede tema.

Gå til dit sites kontrolpanel og klik på tandhjulet nederst til venstre:

Åbn indstillinger

Vælg derefter indstillingen Design:

Vælg Design

Selvom vi teknisk set ikke ændrer temaet, klik på Change Theme nederst til venstre:

Skift tema

Øverst til højre vælg Advanced:

Vælg Avanceret

...og download derefter dit nuværende eller ønskede tema:

Download tema

Nu hvor vi har downloadet zip-filen, udpak den til en mappe. Jeg har downloadet standard casper.zip og udpakket til Downloads\casper på Windows.

Dernæst bør du sikre dig, at du har LTS- eller en nyere version af NodeJS installeret. Du kan hente den her: https://nodejs.org/en/download/

Når NodeJS er installeret, skal du installere en kodeeditor.

Vi anbefaler (og bruger) Webstorm, som du kan få her med en 30-dages prøveperiode (intet kreditkort kræves): https://www.jetbrains.com/webstorm/

Det næstbedste gratis alternativ er sandsynligvis Visual Studio Code: https://code.visualstudio.com/download

Når du har sat din editor op og har temamappen åben i editoren, åbn terminalen i IDE'en og kør:

Installer temaet

Copy

1

2npm install

3

Succesfuldt output vil se sådan ud (du kan ignorere advarsler):

Succesfuldt npm install-output

Dette vil sætte temaets afhængigheder op til de kommandoer, vi kører senere. Eksporten afhænger også af, at temaets afhængigheder er installeret; ellers vil re-importen ikke fungere korrekt.

Nu hvor vi har temaet åbent i vores editor, åbn package.json og ændr name-feltet til noget andet. I vores tilfælde tilføjer vi blot -fastcomments i slutningen:

Omdøb tema

Hvis du bruger en IDE, vil den automatisk gemme, efter du har foretaget denne ændring.

Nu vil vi åbne den skabelon, der bruges til vores blogartikler. Den hedder post.hbs:

Åbn post.hbs

Nu skal vi identificere, hvor vi skal tilføje FastComments.com-widgetkoden.

Hvis du bruger standardtemaet casper, vil du se en sektion som denne på linje 82:

Deaktiveret kommentarsektion

Hvis du bruger andre temaer, vil du ikke se dette, og du bliver nødt til at tilføje denne kode efter den sidste </section>:

Eksempel på sektion

Copy

1

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

3</section>

4

Du bør have noget, der ligner dette, klar:

Skabelon klar til kommentarkode

Når du er klar, kopier FastComments.com-widgetkoden:

Ghost FastComments.com Kommentar-kodeudsnit

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

...og det skal se sådan ud:

Tilføj FastComments.com kommentarkode

Kodningen er færdig. Nu skal vi bare genimportere vores tema!

Nu skal vi pakke tema-filerne tilbage i en zip-fil. Brug de indbyggede funktioner i Ghost til dette.

Åbn din editors terminal igen og kør npm run zip.

Eksporter dit tema

Dette pakker temaet i en zip-fil i dist/casper-fastcomments.zip (hvis det er det, du har navngivet temaet i Step Three).

Tilbage i Ghost-dashboardet, lad os uploade vores tema:

Upload dit tema

For mig ligger zip-filen på følgende placering. Bemærk dist-mappen:

Vælg zip-fil til upload

Husk at aktivere dit nyligt uploadede tema (Ghost burde bede dig om det).

Nu burde vi have FastComments Live Commenting aktiveret for vores medlemmer!

Succes!

Tillykke med opsætningen af FastComments med Ghost! Hvis du er stødt på en Domain Error, eller gerne vil lære, hvordan du tilpasser kommentarfeltet, så læs videre!

FastComments er designet til at kunne tilpasses, så det passer til dit site.

Hvis du gerne vil tilføje brugerdefineret styling eller finjustere konfigurationen, Se vores dokumentation om tilpasning for at lære, hvordan.