hexo 用の isso コメント システムを構築する

一草コメントシステム

イッソとは何ですか

Isso は、Disqus に似た軽量のコメント サーバーです。匿名のコメントが可能で、アイデンティティが維持され、管理が簡単です。JavaScript とクロスドメイン リソース共有を使用して、(静的) Web サイトに簡単に統合できます。

私がissoを選んだ理由

hexo ブログを再デプロイするときに、次のテーマでは、最初に使用していたコメント システムである Valine のサポートがバージョン 8.1.0 で削除されていることがわかりました。理由はセキュリティ上の問題だったので、別のコメント システムに置き換える必要がありました。コメントシステムの選択では、読者が便利にメッセージを残せることが最も重要であると考えているため、科学的にネットサーフィンをしたり、アカウントを登録したりする必要がある人は除外され、Issoが第一候補になります。

isso システムのサーバー側の展開

インストール

Isso をインストールするには、各 Linux ディストリビューションのパッケージ マネージャーからインストールする、pip を使用してインストールする、Isso リポジトリのクローンを作成する、自分でコンパイルしてインストールするなど、さまざまな方法があります。詳細については、Isso インストール ガイドを参照してください。個人的にお勧めします。pipを使用します

Isso-cnの設定方法も基本的に同じです。

# Debian/Ubuntu
sudo apt install isso

# pip
pip install isso

Isso 構成

構成ファイルが指定されていない場合、Isso は /etc/isso.conf を読み取り、それをデフォルトの構成ファイルとして実行します。

[general]
; 确保Isso进程对dbpath指向的db文件有读写权力
dbpath = /var/lib/isso/comments.db
; 需要添加Isso评论系统的网站地址(可以是ip也可以是网址)
host = https://tech.tu5039.cn/
; 本地监听地址,之后客户端的请求需要发送到这个地址
[server]
listen = http://0.0.0.0:1234/

上記の構成は Isso を実行するための最小要件を満たすことができますが、さらに多くの機能が必要な場合は、公式ドキュメントを確認してください。

さらに、各設定ファイルは Web サイトのコメント システムに対応しています。つまり、複数の Web サイトに同時にサービスを提供する必要がある場合は、異なる設定ファイルを使用する複数の Isso プロセスが必要です。公式 Web サイトでは、使用することを推奨しています。管理用のgunicornを使ってみましたが、うまくいきませんでした 成功した人がいたらアドバイスをお願いします。

サーバー構成

デプロイ中に、https Web サイトにアクセスすると、https 以外の js リクエストがブロックされることが判明したため、Isso にセキュリティ証明書を追加する必要があります。

具体的な手順は次のとおりです。

  1. isso.tu5039.cn などのドメイン名のセキュリティ証明書を申請します。
  2. nginx (または Apache) を http サーバーとして使用し、ステップ 1 のドメイン名を Isso のリスニング ポートに転送します。この記事では nginx を使用しており、証明書の展開と nginx リバース プロキシは拡張されません。

クライアント構成

通常の使用のみが必要な場合は、次の設定ファイルで Isso コメント システムを有効にします。

comments:
  active: isso
# ......
isso: https://tech.tu5039.cn//isso/ # Your isso server domain

hexo の次のテーマを変更する

ただし、クライアントで追加の設定が必要な場合もあるので、Isso コメント領域の生成に関連するファイルを見つけて変更するだけです。

まず、次のテーマのレイアウトテンプレートファイルがnjkファイルであることを説明し、Issoに対応するnjkを見つけると、修正が必要なjsファイルnext/source/js/third-party/comments/isso が分かります。js

{# isso.njk #}
{
   
   { next_data('isso', theme.isso) }}
{
   
   { next_js('third-party/comments/isso.js') }}
// isso.js
/* global NexT, CONFIG */

document.addEventListener('page:loaded', () => {
    
    
  if (!CONFIG.page.comments) return;

  NexT.utils.loadComments('#isso-thread')
    .then(() => NexT.utils.getScript(`${
      
      CONFIG.isso}js/embed.min.js`, {
    
    
      attributes: {
    
    
        dataset: {
    
    
          isso: `${
      
      CONFIG.isso}`,
        }
      },
      parentNode: document.querySelector('#isso-thread')
    }));
});

次の設定ファイルのisso属性が js ファイルの${CONFIG.isso}に対応していることがすぐにわかります。したがって、他の Isso クライアント設定項目を追加する場合は、次の設定ファイルの両方を変更するだけで済みます。 isso.js同時に、1 つのファイルだけです。例は次のとおりです。

# _config.next.yml
isso: 
  url: https://tech.tu5039.cn//isso/ # Your isso server domain
  lang: zh # Set language
  # Set to true when spam guard is configured with reply-to-self = true.
  reply_to_self: "false" 
  # Set to true when spam guard is configured with require-author = true.
  require_author: "false" 
  # Set to true when spam guard is configured with require-email = true.
  require_email: "false" 
  # Set to true when reply notifications is configured with reply-notifications = true.
  reply_notifications: "false" 
  # Number of top level (or nested) comments to show by default. If some comments are not shown, an “X Hidden” link is shown.
  # Set to “inf” to show all, or “0” to hide all.
  max_comments_top: "10"
  max_comments_nested: "5"
  # Number of comments to reveal on clicking the “X Hidden” link.
  reveal_on_click: "5"
  # Enable or disable avatar generation.
  avatar: "true"
  # Set avatar background color. Any valid CSS color will do.
  avatar_bg: "#f0f0f0"
  # Set avatar foreground color. Up to 8 colors are possible. 
  # The default color scheme is based in this color palette. 
  # Multiple colors must be separated by space. 
  # If you use less than eight colors and not a multiple of 2, the color distribution is not even.
  avatar_fg: "#9abf88 #5698c4 #e279a3 #9163b6 ..."
  # Enable or disable voting feature on the client side.
  vote: "true"
  # List of vote levels used to customize comment appearance based on score. 
  # Provide a comma-separated values (eg. “0,5,10,25,100”) or a JSON array (eg. “[-5,5,15]”).
  vote_levels: ""
  # Enable or disable the addition of a link to the feed for the comment thread. 
  # The link will only be valid if the appropriate setting, in [rss] section, is also enabled server-side.
  feed: "false"
// isso.js
/* global NexT, CONFIG */

document.addEventListener('page:loaded', () => {
    
    
  if (!CONFIG.page.comments) return;

  NexT.utils.loadComments('#isso-thread')
    .then(() => NexT.utils.getScript(`${
      
      CONFIG.isso.url}js/embed.min.js`, {
    
    
      attributes: {
    
    
        dataset: {
    
    
          isso: `${
      
      CONFIG.isso.url}`,
          issoLang: `${
      
      CONFIG.isso.lang }`,
          issoReplyToSelf: `${
      
      CONFIG.isso.reply_to_self }`,
          issoRequireAuthor: `${
      
      CONFIG.isso.require_author }`,
          issoRequireEmail: `${
      
      CONFIG.isso.require_email }`,
          issoReplyNotifications: `${
      
      CONFIG.isso.reply_notifications}`,
          issoMaxCommentsTop: `${
      
      CONFIG.isso.max_comments_top }`,
          issoMaxCommentsNested: `${
      
      CONFIG.isso.max_comments_nested }`,
          issoRevealOnClick: `${
      
      CONFIG.isso.reveal_on_click }`,
          issoAvatar: `${
      
      CONFIG.isso.avatar }`,
          issoAvatarBg: `${
      
      CONFIG.isso.avatar_bg }`,
          issoAvatarFg: `${
      
      CONFIG.isso.avatar_fg }`,
          issoVote: `${
      
      CONFIG.isso.vote }`,
          issoVoteLevels: `${
      
      CONFIG.isso.vote_levels }`,
          issoFeed: `${
      
      CONFIG.isso.feed }`
        }
      },
      parentNode: document.querySelector('#isso-thread')
    }));
});

この記事は最初に「Building isso comment system for hexo」に掲載されました。

おすすめ

転載: blog.csdn.net/u013943146/article/details/117825163