【cusdis】hugoで作ったブログでコメントができるようになったよ！

2023年7月2日

カテゴリ: 2023 技術

タグ: Hugo cusdis

追記：cusdis使うのをやめました・・・っていうかログインができなくなっちゃった！！！

またコメントシステム探すなりしたいかなぁ・・・

ブログにコメント機能をつけたい！！

万が一、億が一にもこのブログ投稿にコメントをしたいという人がいるかも知れないので、コメントを投稿しました。

(本当は、誰かコメントしてくれないかなーﾁﾗﾁﾗっていうのが本音)

色々コメント機能を付ける方法はあるみたい

ブログにコメント機能を付ける方法は色々あるみたいで、

disqus
giscus
valine

のようなサービスが有るようです。これらのサービスは僕が使っているhugoのテーマloveitでconfig.tomlを変更することで使えるようになるみたいです。

しかし・・・色々調べてみた感じ

disqus : 有料みたい・・・多分コメントが全く来ないのに有料なのはちょっと・・・
giscus : コメントをするにはgithubのアカウントにログインする必要があるみたい・・・ただでさえコメントをするのが面倒なのにハードルが上がるかも・・・
valine : よくわからん。日本語の情報が少ない。

といった感じで、うーむ、どうしたものかとなっていたところで、cusdisというサービスを見つけました。

どうやら、無料でも3つのウェブサイトまでなら利用することができるようです（いくつかの機能制限はあるみたいですが）

ですが、ログインしなくてもコメントを投稿することができるし、何より無料と言うことで試してみることにしました！

cusdisを使ってみる

Cusdis

こちらのサイトのstart for freeからアカウントを作ってログインをしました

その後、なにか入力するように言われたので、なんとなくwebsiteのurlを入れました。（何を示しているのか分かれば何を入れてもいいのかな？これ？）

その後、dashboardのembed codeをクリックすると、data-app-idが出てくるのでそれを控えておきます。

ここからはhugoでの作業ですね。

おそらく色々な方法はあるでしょうが自分はshortcodeを利用した方法をひとまず試してみることにします。

しかし、多分この方法はcusdisを使うことをやめた際に、cusdisのshortcodeを利用したブログ投稿のマークダウンファイルをすべて編集する必要がありそうな気もするのであんまりいい方法ではなさそうです。

そのあたりはご注意ください。あ、あと自己責任でお願いしますね。僕は何もわからない初心者ですので！！！

下のような感じで、layoutsディレクトリを作って、shortcodesディレクトリを作ってその中にショートコードを書いていきます。

僕はloveitというテーマをsubmoduleで取ってきて利用していてあんまりそのテーマの中を変更したくないので、このようにしています。（gitもわからない人です。以前テーマをいじってみようとしてsubmoduleでとってきたものを変更してわけがわからなくなったのでトラウマがあります）

cusdis.htmlの中身はこんな感じ

    text
    
  


1
2
3
4
5
6
7


<!-- Comments by Cusdis -->
 <h4>Comments:</h4>
 <div id="cusdis_thread" data-host="https://cusdis.com"
   data-app-id="See your dashbord on Cusdis"
   data-page-id="{{ .Page.File.UniqueID }}" data-page-url="{{ .Page.Permalink }}"
   data-page-title="{{ .Page.Title }}"></div>
 <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>