Ghost構成3——コメントシステムの追加

Ghostで最初の文章を発表した後、突然一つの問題に気づいた.この商品には評論システムがないのか.
公式サイトの説明を見て、彼らは主な精力をブログシステムの基礎機能に置いて、周辺機能に対して第三者機能を導入することで実現することができます.例えばコードのハイライトの問題はhighlightを使用することができる.jsなどのコンポーネントで実現される[ここを見て].

Valineの選択

サードパーティのコメントシステムについては,ネットワーク上では多説を例に説明することが多い.しかし、長年にわたって使用率1位のサードパーティシステムとして、コメントシステムへのアクセスが閉鎖されていることが多い.現在知られているサードパーティシステムには、次のようなものがあります.

畅言--捜狐出品,现在国内ユーザー量第一

来比力--もう一つの国産第三者評論システム

Disqus--Ghostが推奨するコメントシステムは、壁

によく使われています.
ネット上のフィードバックによると、第一のアイデアはスムーズな言葉を使うことです.結局捜狐出品なので、品質も機能も保証できます.しかし、サービスの持続可能性を考えると、占有率1位の多さが利益でサービスを維持できないと言っている以上、いつサービスを停止されても驚くことはありません.
迷いながらValineが見えてきました.純フロントエンド、バックエンドデータサポートはLeanCloudによって実現される.これは私の最大の疑問を解消し、簡潔なスタイルも私の審美によく合っています.

Valineのインストール

Valineのインストールは非常に簡単で、公式サイトを参照すれば実現できます.
なお、Valineのjsコードは、コード注入の設定で参照できるが、body側のコードはpostにドロップする必要がある.hbsテンプレートファイルでのみ可能です.(通常のコード注入はfooterにのみ注入され、グローバルなすべてのページであるため、コメントコンポーネントの場所を指定することも、すべてのページにコメントコンポーネントを導入する必要もあります.)

ファイルのインポート

//    ghost/content/themes/casper/default.hbs
...
    {{# if post}}
        
        
        
    {{/if}}
...

//    ghost/content/themes/casper/post.hbs
//  
   
...
  

    

        {{content}}
    
    //          
    

    
        new Valine({
            el: '#vcomments',
            appId: '<AppId>',
            appKey: '<AppKey>',
            notify:false,
            verify:false,
            avatar:'mm',
            placeholder: '       '
        })
    


...

変更後ファイルを保存しghostを再起動し、ページをリフレッシュします.初回使用は、コメントコンポーネントの下の位置にアプリケーション初期化を表示し、3分待ちます.3分後、コメントシステムが使えます.

Valineのスタイル変更

valineは正常に使用できますが、フォント表示は非常に小さく、ほとんど見えません.開発者ツールを開くと、フォントは0.875 remのサイズに設定されています.
他のブログシステムではわかりませんが、Ghostシステムでは、このようなフォントサイズではほとんど字が読めません.CSSスタイルを追加することで、コメントシステムのフォントサイズを再調整できます.

/*    ghost/content/themes/casper/assets/css/valine.css */ 
.v .vinput {
  font-size: 1.5rem !important;
}

.v .veditor {
  font-size: 1.5rem !important;
}

.v .vbtn {
  font-size: 1.5rem !important;
}

.v .vinfo .col {
  font-size: 1.5rem !important;
}

.v .vinfo .vcount .vnum {
  font-size: 1.5rem !important;
}

.v .power {
  display: none !important;
}

.v .vlist .vcard .vhead .vnick {
  font-size: 1.5rem !important;
}

.v .vlist .vcard .vhead .vsys {
  font-size: 1.2rem !important;
}

.v .vlist .vcard .vh .vtime {
  font-size: 1.2rem !important;
}

.v .vlist .vcard .vh .vat {
  font-size: 1.2rem !important;
}

.v .vlist .vcard .vcontent {
  font-size: 1.5rem !important;
}

Ghostを再起動してからページを更新して、すべてできました!