まず

こんにちわ、やんしーですー。

さて、今回もGhostについてですよ。

Ghostとはなんぞや?というかたは、他の記事#ghostを確認してみてくださいな。

とりあえず、ひとことで説明すると、「Ghost」はブログサービスです。

このブログはその「Ghost」というブログサービスを利用しています。
「Ghost」は編集機能がMediumのように特化していたり、閲覧ページもシンプルで見やすくなっているんですが、カスタマイズしない場合、あまり多機能ではありません。

そのため、コメントをするような機能はデフォルトで備わっていないんですね。。

残念です。

ただ、あくまでカスタマイズしない場合なので、カスタマイズすれば実現は可能でござんす。

今回は、.hbsというテンプレートファイルを直接操作し、コメント機能をつけてみたいと思います。

コメント機能のサービスの選定

選定するにあたり重要視するのは「コメントの管理」としました。

わたしはYouTubeで、動画配信を行っているのですが、各ページに遷移しなくてもコメントの確認や返信ができ、かつスパムとかの場合は承認制にするなど、簡単に管理できるのが魅力です。

なので「コメントの管理」に特化したものを使いたいと思いました。

Facebook Comment

facebook_logo

まずはじめに思いつくのはFacebookのコメント機能。

原則実名のアカウントを利用するので、おかしなコメントがつくことも少ないですし、けっこう他サイトでよく見かけますね。

広く使われています。

でも、ちょっと普通すぎて使いたくありません。。。

Disqus

disqus-logo-icon-750

これ有名なんですね。ちょっとぐぐったらでてきました。

登録してみたらびっくり。
基本的なコメント管理機能に加えて、Analyticsがあったり、Filterが設定できたり、Webhookもあったり、結構便利そうです。

Disqusに決定(はやっ)

他にもいろいろありそうですが、Disqusに決めましたw

Disqusの設定方法(Ghost)

ではここからは設定方法です。

Disqusのアカウントつくるなどは割愛します。

  1. まずはじめに「install disqus」を選択しやす
  2. そして、「Ghost」を選択

ちなみに、以前は「Ghost」なかったみたいなのですが、2018年9月5日現在、選択することが可能になっています。

disqus1

ページ遷移後は、手順が4つのステップで記されています。
その内容をひとつづつ引用して見ていきますね。

Find the post.hbs file located in your current theme's directory, for example
yourghostdir/content/themes/casper/

さて、いきなり「テーマディレクトリ」の「post.hbs」を見つけろって言われましたね。
なので、SaaSで契約してるかたは残念・・・。SaaS版を使ったことないので、どこまでできるのか正直わかりませんが、OSS版を使っているかた限定にお話ししていきます。

自分でインストールされた方はわかるでしょう。ubuntuであれば、だいたい以下にあるかと思います。
/var/www/ghost/content/themes/casper

テーマを変えてる人はcasper以外を選んでくださいね。

Copy and paste the Universal Embed Code somewhere between the opening {{#post}} and closing {{/post}} helpers.

これ少しわかりずらいんですよね。。
{{#post}}{{/post}}の間であればsomewhereどこでもって言ってるんですよね。。

最初自分は{{content}}の直下に配置しました。
そしたらうまく表示されなかったーーなんでやねん

Universal Embedの問題かと思ってつまづきました・・・
色々試したり調査にかなり時間がかかってしまった。

ちなみにそういうわけじゃなかったんですね。
post-contetdivクラスの中じゃなければ大丈夫だったんです。
え?CSSの問題・・?

まあ、とりあえず、解決したので根本原因は確認しません。

で、post-contetdivの外ということで、
どこに配置しようかなーと思ったら最適な場所発見しました。

    {{!--
    <section class="post-full-comments">
        If you want to embed comments, this is a good place to do it!
    </section>
    --}}

完璧です。「ここがいい場所だぜ!」って言ってくれてますw

なのでコメントアウトの{{!----}を外して、以下のように追記しました。
追記するUniversal EmbedはDisqusで確認できます。

    <section class="post-full-comments">
        <div id="disqus_thread"></div>
        <script>

        /**
        *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
        *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/

// 1. 以下コメントアウトされているのですが、外してください
        var disqus_config = function () {
// 2. PAGE_URLは使わないのでコメントアウトします。
        // this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
// 3. PAGE_IDENTIFIERを以下のように書き換えます。
        this.page.identifier = "ghost-{{comment_id}}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };

        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://yan-c-blog.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>


    </section>

Change PAGE_IDENTIFER to be"ghost-{{comment_id}}" (including quotes).

これはPAGE_IDENTIFERをクォート含めた"ghost-{{comment_id}}"に変えてねってことで、上の記述を参考にしてください。

Restart Ghost.

Ghostを再起動しろってさ

ghost restartコマンドを打って完了です。

以上です。

毎度ですが自己責任でおなしゃす。

環境

最後に環境だけ、

ubuntuです。
ghost2.0にしてます。
themeはcasperです。
・・・ちなみにサーバはKagoyaのVPSです

おわり

まだ、誰もコメントしてないので、気軽にコメントどうぞ。
リアクションだけでもおk

ではまた。