Add Members-Only Live Commenting to ghost Sites

Para adicionar o FastComments ao Ghost corretamente, precisamos editar os arquivos do tema.

Então vamos começar baixando seu tema existente ou o tema desejado.

Navegue até o painel do seu site e clique no ícone de engrenagem no canto inferior esquerdo:

Abrir Configurações

Em seguida selecione a opção Design:

Selecionar Design

Embora tecnicamente não estejamos alterando o tema, clique em Change Theme no canto inferior esquerdo:

Alterar Tema

No canto superior direito selecione Advanced:

Selecionar Avançado

...e então baixe seu tema atual ou ideal:

Baixar Tema

Agora que baixamos o arquivo zip, extraia-o para uma pasta. Eu baixei o casper.zip padrão e extraí para Downloads\casper no 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:

Instalar o Tema

Copy

1

2npm install

3

A saída bem-sucedida será parecida com isto (você pode ignorar avisos):

Saída bem-sucedida do npm install

Isto configurará as dependências do tema para os comandos posteriores que iremos executar. Além disso, a exportação depende das dependências do tema estarem instaladas; caso contrário, a reimportação não funcionará corretamente.

Agora que temos o tema aberto no nosso editor, abra o package.json e altere o campo name para outra coisa. No nosso caso, nós apenas adicionamos -fastcomments ao final:

Renomear Tema

Se você estiver usando um IDE, ele salvará automaticamente depois que você fizer essa alteração.

Agora vamos abrir o template que é usado para os nossos artigos do blog. Ele se chama post.hbs:

Abrir post.hbs

A seguir, precisamos identificar onde adicionar o código do widget do FastComments.com.

Se você estiver usando o tema padrão casper, verá uma seção como esta na linha 82:

Seção de Comentários Desativada

Se você estiver usando outros temas, não verá isso, e precisará adicionar esse código após o último </section>:

Exemplo de Seção

Copy

1

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

3</section>

4

Você deve ter algo assim pronto:

Template Pronto Para Código de Comentários

Uma vez pronto, copie o código do widget do FastComments.com:

Trecho de código de comentário do FastComments.com para Ghost

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

...e deve ficar assim:

Adicionar Código de Comentários do FastComments.com

Código pronto. Agora só precisamos reimportar nosso tema!

Agora precisamos empacotar os arquivos do tema novamente em um arquivo zip. Para fazer isso, use os recursos integrados no Ghost.

Abra novamente o terminal do seu editor e execute npm run zip.

Exporte seu tema

Isso empacotará o tema em um arquivo zip em dist/casper-fastcomments.zip (se esse for o nome que você deu ao tema em Step Three).

De volta ao painel do Ghost, vamos enviar nosso tema:

Envie seu tema

No meu caso, o arquivo zip está no seguinte local. Observe a pasta dist:

Selecione o arquivo ZIP para enviar

Lembre-se de ativar o tema recém-enviado (o Ghost deve solicitar isso).

Agora devemos ter o FastComments Live Commenting habilitado para nossos membros!

Sucesso!

Parabéns por configurar o FastComments com o Ghost! Se você encontrou um Domain Error, ou gostaria de aprender como personalizar a área de comentários, continue lendo!

FastComments foi projetado para ser personalizado para se adequar ao seu site.

Se você quiser adicionar estilos personalizados ou ajustar a configuração, Confira nossa Documentação de Personalização para saber como.