Add Members-Only Live Commenting to ghost Sites

Om FastComments op de juiste manier aan Ghost toe te voegen, moeten we de thema-bestanden bewerken.

Laten we beginnen met het downloaden van je bestaande of gewenste thema.

Ga naar het dashboard van je site en klik op het tandwiel linksonder:

Open instellingen

Selecteer vervolgens de optie Design:

Selecteer Design

Hoewel we technisch gezien het thema niet veranderen, klik op Change Theme linksonder:

Wijzig thema

Selecteer rechtsboven Advanced:

Selecteer Geavanceerd

...en download vervolgens je huidige of gewenste thema:

Thema downloaden

Nu we het zipbestand hebben gedownload, pak het uit naar een map. Ik heb het standaard casper.zip gedownload en uitgepakt naar Downloads\casper op Windows.

Zorg er vervolgens voor dat je de LTS-versie of een nieuwere versie van NodeJS hebt geïnstalleerd. Je kunt die hier krijgen: https://nodejs.org/en/download/

Zodra NodeJS is geïnstalleerd, moet je een code-editor installeren.

We raden (en gebruiken) Webstorm aan, die je hier kunt krijgen met een proefperiode van 30 dagen (geen creditcard nodig): https://www.jetbrains.com/webstorm/

De volgende beste gratis optie is waarschijnlijk Visual Studio Code: https://code.visualstudio.com/download

Zodra je je editor hebt ingesteld en de thema-map in de editor hebt geopend, open je de terminal in de IDE en voer je het volgende uit:

Installeer het thema

Copy

1

2npm install

3

Een succesvolle uitvoer ziet er als volgt uit (je kunt waarschuwingen negeren):

Succesvolle uitvoer van npm install

Dit stelt de afhankelijkheden van het thema in voor de latere opdrachten die we zullen uitvoeren. Bovendien is de export afhankelijk van het feit dat de afhankelijkheden van het thema zijn geïnstalleerd; anders zal de herimport niet correct werken.

Nu we het thema in onze editor geopend hebben, open package.json en wijzig het veld name naar iets anders. In ons geval voegen we gewoon -fastcomments aan het einde toe:

Thema hernoemen

Als je een IDE gebruikt, slaat deze automatisch op nadat je deze wijziging hebt aangebracht.

We gaan nu de template openen die voor onze blogartikelen wordt gebruikt. Het heet post.hbs:

Open post.hbs

Vervolgens moeten we bepalen waar we de FastComments.com-widgetcode moeten toevoegen.

Als je het standaardthema casper gebruikt, zie je een sectie zoals deze op regel 82:

Uitgeschakelde reactiesectie

Als je andere thema's gebruikt, zie je dit niet en moet je deze code toevoegen na de laatste </section>:

Sectievoorbeeld

Copy

1

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

3</section>

4

Je zou iets zoals dit klaar moeten hebben:

Sjabloon klaar voor commentaarkode

Als je klaar bent, kopieer dan de FastComments.com-widgetcode:

Ghost FastComments.com Reactiecodefragment

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

...en het zou er zo uit moeten zien:

Voeg FastComments.com-reactiecode toe

Coderen voltooid. Nu hoeven we alleen nog ons thema opnieuw te importeren!

Nu moeten we de themabestanden weer in een zipbestand verpakken. Gebruik hiervoor de ingebouwde functies van Ghost.

Open opnieuw de terminal van je editor en voer npm run zip uit.

Exporteer je thema

Dit pakt het thema in een zipbestand in dist/casper-fastcomments.zip (als dat is wat je het thema hebt genoemd in Step Three).

Terug in het Ghost-dashboard, laten we ons thema uploaden:

Upload je thema

Bij mij staat het zipbestand op de volgende locatie. Let op de map dist:

Selecteer het zipbestand om te uploaden

Vergeet niet je nieuw geüploade thema te activeren (Ghost zou erom moeten vragen).

Nu zouden we FastComments Live Commenting ingeschakeld moeten hebben voor onze leden!

Succes!

Gefeliciteerd met het opzetten van FastComments met Ghost! Als je een Domain Error bent tegengekomen, of als je wilt leren hoe je het commentaargedeelte kunt aanpassen, lees verder!

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen of de configuratie wilt aanpassen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.