DISQUS を利用して、静的ページにコメント欄をつける

2015/04/21

ブログなので簡単なコメントシステムが欲しい。

静的ページでも使える DISQUS を導入する。

DISQUS のコメント欄を設置する

DISQUS のアカウントを取得する

DISQUS にアクセスして、右上の Sign Up よりアカウントを作成してください。

管理するページを登録する

アカウントを取得したのち、画面遷移し、ページを設定する。 対象のページの設定をしてください。

記載するコードを取得する

ページの Settings -> Install を選択すると各種環境向けのアイコンが表示されると思う。 Universal Code を選択すると JavaScript が表示されるので、 そのコードを適宜ページに貼り付ける。

特定のページのみに設置する

layout.html は Jinja2 記法を使えるので、以下のように startswith でページを判定した。

僕はファイル名に blog/%Y%m%dN_name としているので、以下で問題無かった。

{%- if pagename.startswith('blog/20') %}
...
{%- endif %}

サイドバーの位置調整

僕の場合、 DISQUS 向け div を設置するとサイドバーが画面の下の方に 移動してしまった。

対応するため、 document クラスに position: relative をつけ、 サイドバーに positoin: absolute; top: 0; right: 0; の設定をした。

具体的には下記となる。

div.document {
  width: 980px;
  position: relative;
}

div.sphinxsidebar {
  width: 240px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  float: none;
}

終わりに

上記の手順で問題なく DISQUS を導入できた。

参考になればうれしい。

参考