TechブログのHUGOテーマを拡張してコメント投稿システムである『COMMPOST』を利用できるようにした話

 

izewfktvy533です。

前回の記事では、このTechブログにコメント機能を追加するために開発したコメント投稿システム『COMMPOST』を紹介しました。

本稿では、HUGOのテーマを拡張して『COMMPOST』を利用できるようにしましたのでそのお話をさせて頂きます。

本ブログではHUGOのテーマである anatole を拡張して利用しています。

今まではTwitterのOGPに対応させたり、レイアウトを変更したりしました。

今回はコメント投稿システム『COMMPOST』を利用できるに拡張していきます。

 

まず、layouts/partialsディレクトリ 下に『COMMPOST』のフロントエンドを表示する下記のHTMLファイルを配置します。

 

<div id="commpost"></div>
<script type="text/javascript">
    (function() {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'https://commpost.on-going.jp/js/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

         var dlq = document.createElement('link');
         dlq.rel = 'stylesheet'; dlq.type = 'text/css'; dlq.href = 'https://commpost.on-going.jp/assets/css/embed.css';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dlq);
    })();
</script>

 

次に layouts/_default/single.html ファイルを編集します。

適当なところに下記を追加します。

下記のように設定することで、HUGOの設定ファイルに対して params セクションに “commpost” というパラメータに “true” と設定することで コメント投稿システム『COMMPOST』を利用できるようなります。

 

{{ if eq .Site.Params.commpost true }}
{{ partial "commpost.html" . }}
{{ end }}

 

最後にHUGOの設定ファイルである config.toml を編集します。

params セクション下に “commpost = true” というパラメータを追加します。

 


[params]
title = "on-going's Tech Blog"
author = "techblog.on-going."
profilePicture = "images/profile.jpg"
thumbnail = "images/profile.jpg"
twitter = "izewfktvy533"
commpost = true

 

これでいつものようにhugoコマンドを実行することですべてのブログ記事でコメント投稿システム『COMMPOST』が使えるようになりました。