Projet: Mise en Œuvre Des Commentaires Dans Le Thème Hugo Papermod

Pour ce projet, j’ai utilisé plusieurs ressources Internet répertoriées ci-dessous :

Jusqu’à récemment, mon site n’avait pas de section de commentaires, j’ai décidé de changer cela et après quelques recherches, je suis arrivé à cette page :

Hugo Comments Alternatives

Vous trouverez ici quelques alternatives à Disqus (une solution cloud qui nécessite une inscription et éventuellement un abonnement). Après avoir lu et examiné les alternatives, j’ai trouvé que remarque42 était simple et facile à installer. J’ai aussi adoré le fait qu’il soit open source et auto-hébergé.

Installation

Pour l’installation, j’ai opté pour l’installation avec le binaire, j’ai créé un conteneur lxc Debian 11 dans Proxmox en tant que plate-forme et téléchargé le dernier exécutable depuis leur site de publication : https://github.com/umputun/remark42/releases

wget https://github.com/umputun/remark42/releases/download/v1.11.3/remark42.linux-amd64.tar.gz

Extrayez l’exécutable, déplacez-le dans le dossier des exécutables :

tar xzf remark42.linux-amd64.tar.gz
mv remark42.linux-amd64 /usr/local/bin
rm remark42.linux-amd64.tar.gz

Ensuite, nous devons ajouter l’utilisateur du système remark42 et creer le repertoire du serveur.

useradd -r remark42
mkdir -m 770 /var/www/remark42
chown :remark42 /var/www/remark42

Avec votre éditeur préféré, créez le fichier d’environnement :

nano /var/www/remark42/remark42.conf

REMARK_URL=http://remark42.cabivr.net
SECRET=une-phrase-secrete
SITE=www.cabivr.net
AUTH_ANON=true # Cela permet les commentaires anonymes.

Il s’agit d’une configuration simple sur laquelle j’ai construit le reste.

Pour que notre service s’exécute au démarrage, créez un nouveau fichier de service :

nano /etc/systemd/system/remark42.service

[Unit]
Description=remark42 comment engine
After=network.target

[Service]
User=remark42
Group=remark42
EnvironmentFile=/var/www/remark42/remark42.conf
WorkingDirectory=/var/www/remark42
Restart=always
RestartSec=5
ExecStart=/usr/local/bin/remark42.linux-amd64 server

[Install]
WantedBy=multi-user.target

Démarrez le service :

systemctl enable --now remark42

Parametrage du Theme Hugo PaperMod

La façon dont le thème est créé, il n’y a que deux fichiers qui dovent être modifiés. Une fois le thème PaperMod installé, copiez le fichier comment.html du dossier themes/papermod/layouts/partials en conservant la même structure de dossiers dans votre dossier layouts/partials/.

|-- archetypes
|   |-- default.md
|   `-- page.md
|-- config.yaml
|-- content
|   |-- about.md
|   |-- archives.md
|   `-- search.md
|-- data
|-- index.json
|-- layouts
|   |-- _default
|   |   |-- archives.html
|   |   |-- list.html
|   |   |-- search.html
|   |   `-- single.html
|   |-- partials
|   |   |-- comments.html # cabivr/layouts/partials/comments.html
|   |   |-- footer.html
|   |   |-- home_info.html
|   |   `-- template
|   `-- shortcodes
|       |-- columns.html
|       |-- columns.scss
|       `-- hint.html
|-- resources
|   `-- _gen
|       `-- images
`-- themes
    `-- PaperMod
        |-- LICENSE
        |-- README.md
        |-- go.mod
        |-- images
        |   |-- screenshot.png
        |   `-- tn.png
        |-- layouts
        |   |-- 404.html
        |   |-- _default
        |   |   |-- _markup
        |   |   |   `-- render-image.html
        |   |   |-- archives.html
        |   |   |-- baseof.html
        |   |   |-- index.json
        |   |   |-- list.html
        |   |   |-- rss.xml
        |   |   |-- search.html
        |   |   |-- single.html
        |   |   `-- terms.html
        |   |-- partials
        |   |   |-- anchored_headings.html
        |   |   |-- author.html
        |   |   |-- breadcrumbs.html
        |   |   |-- comments.html # cabivr/themes/papermod/layouts/partials/comments.html

Après avoir copié le fichier, remplacez le contenu.

nano layouts/partials/comments.html

{{ if (and .Site.Params.remark42SiteID .Params.comments) }}
<div id="remark42"></div>
<script>
   var remark_config = {
       host: {{ .Site.Params.remark42Url }},
       site_id: {{ .Site.Params.remark42SiteID }},
       url: {{ .Permalink }},

   };
</script>

<script>
   !(function (e, n) {
       for (var o = 0; o < e.length; o++) {
           var r = n.createElement("script"),
               c = ".js",
               d = n.head || n.body;
           "noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
           (r.defer = !0),
           (r.src = remark_config.host + "/web/" + e[o] + c),
           d.appendChild(r);
       }
   })(remark_config.components || ["embed"], document);
</script>
{{ end }}

Puis dans votre fishier de configuration :

nano config.yaml

params:
  ...
  remark42SiteId: "cabivr.net"
  remark42Url: "https://remark42.cabivr.net"

En ce moment, vous avez besoin d’un dernier processus pour que tout fonctionne, et c’est l’authentification. Le serveur fonctionne via un système de connexion fourni par google, github et autres. Cela permet aux utilisateurs qui souhaitent commenter et suivre une discussion d’être avertis lorsqu’ils ont une réponse.

Configuration du proxy inverse

J’utilise NPM https://nginxproxymanager.com/ dans un conteneur, il a donc été facile de configurer le proxy inverse et le certificat ssl via Let’sEncript. Mais une configuration simple ressemble à ceci :

server {
    listen      80;
    server_name remark42.cabivr.net;

    location / {
         proxy_redirect          off;
         proxy_set_header        X-Real-IP $remote_addr;
         proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header        Host $http_host;
         proxy_pass              http://127.0.0.1:8080/; # Si vous utilisez plusieurs machines, mettez ici l'adresse IP de la machine qui exécute remarque42.
    }
}

Activez les fournisseurs OAuth.

Github

Allez sur https://github.com/ cliquez sur nouvelle application OAuth entrez le nom du site Web comme nom d’application
Définissez l’URL de la page d’accueil sur la même valeur que REMARK_URL dans le fichier d’environnement : http://remark42.cabivr.net
Définissez l’URL de rappel en ajoutant auth/github/callback à REMARK_URL : http://remark42.cabivr.net/auth/github/callback_
Notez l’ID client et le secret client et ajoutez-les au fichier de configuration de l’environnement /var/www/remark42/remark42.conf :

nano /var/www/remark42/remark42.conf

AUTH_GITHUB_CID=xxxxxxxxxxxxwwwwwwwwwwwzzzzzzzz
AUTH_GITHUB_CSEC=zzzzzzzzzxxxxxxxxxxxxxxxxxsssssssss

Google

Accédez à console.developers.google.com
Créer un nouveau projet
Ouvrez le menu de navigation et accédez à API et services
Cliquez sur l’écran de consentement Oauth et mettez à jour les informations. Définissez le nom du site Web comme nom de l’application.
Accédez aux informations d’identification dans le volet de navigation et cliquez sur créer des informations d’identification.
Créez un ID client OAuth avec le type d’application Web.
Définissez l’origine autorisée sur la même valeur que REMARK_URL dans le fichier d’environnement : http://remark42.myserveraddress.com
Définissez les URI de redirection autorisés en ajoutant auth/google/callback à REMARK_URL : http://remark42.myserveraddress.com/auth/google/callback
Notez l’ID client et le secret client et ajoutez-les au fichier de configuration de l’environnement /var/www/remark42/remark42.conf :

nano /var/www/remark42/remark42.conf

AUTH_GOOGLE_CID=xxxxxxxxxxxxwwwwwwwwwwwzzzzzzzz
AUTH_GOOGLE_CSEC=zzzzzzzzzxxxxxxxxxxxxxxxxxsssssssss

Ajouter des modérateurs

Une fois que vous avez au moins un fournisseur OAuth, vous pouvez ajouter des modérateurs à vos sections de commentaires. L’ajout de modérateurs est aussi simple que de se connecter et d’écrire l’identifiant de connexion dans le fichier de configuration. Plusieurs modérateurs sont pris en charge en séparant les identifiants par des virgules.

Connectez-vous au système de commentaires.
Notez l’identifiant en cliquant sur le nom d’utilisateur et en copiant les informations.
Ajoutez l’identifiant au fichier de configuration de l’environnement /var/www/remark42/remark42.conf :

nano /var/html/remark42/remark42.conf

ADMIN_SHARED_ID=github_a2e5deaad3604d46f7fc02525d278f09a4e83b79,google_790dd42e3e8d8bef44878dafee761efa16a070a2

Basculement automatique de la couleur du thème

J’ai remarqué qu’avec les paramètres par défaut, la couleur de la zone de commentaire restait la même même si je changeais la couleur du thème de clair à foncé et inversement. Ainsi, après quelques recherches et en essayant différentes options, je suis tombé sur cet ancien article de git et j’ai apporté les modifications. https://github.com/adityatelange/hugo-PaperMod/discussions/566

{{ if (and .Site.Params.remark42SiteID .Params.comments) }}
<div id="remark42"></div>
<script>
    var remark_config = {
        host: {{ .Site.Params.remark42Url }},
        site_id: {{ .Site.Params.remark42SiteID }},
        url: {{ .Permalink }},
        locale: {{ .Site.Language.Lang }}
        <!-----Basculement de thème---->
        theme: document.body.className.includes("dark")? "dark": "light",   
    };
</script>

<script>
    !(function (e, n) {
        for (var o = 0; o < e.length; o++) {
            var r = n.createElement("script"),
                c = ".js",
                d = n.head || n.body;
            "noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
            (r.defer = !0),
            (r.src = remark_config.host + "/web/" + e[o] + c),
            d.appendChild(r);
        }
    })(remark_config.components || ["embed"], document);

    <!-----Basculement de thème---->
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            localStorage.setItem("pref-theme", 'light');
            window.REMARK42.changeTheme('light');
        } else {
            localStorage.setItem("pref-theme", 'dark');
            window.REMARK42.changeTheme('dark');
        }
    })


</script>
{{ end }}

Cet article présente les bases de la configuration de Remark42 pour des commentaires heureux sur un site Hugo. Si vous avez des questions, n’hésitez pas à laisser un commentaire.

Installation #

Parametrage du Theme Hugo PaperMod#

Configuration du proxy inverse#

Activez les fournisseurs OAuth.#

Github#

Google#

Ajouter des modérateurs #

Basculement automatique de la couleur du thème#