Hexoの記事とLemmyのコメント欄を連動させた。
例 https://earphones.juggler.jp/2021/Moondrop-SSP/
おおむねHexo側のカスタマイズで実現している。Lemmy側は何も変更しておらずAPIを普通に呼びだしてるだけだ。
記事データの最後に {% lemmyComment %}
を書いておく。記事ごとにタグを書くのは面倒くさいが、現状Hexoのサイト生成処理でasyncできるのは拡張タグだけだ。HTTPリクエストなどを行う必要上、他の手はない。
hexoの作業フォルダの下にscripts/lemmyCommentTag.js
を用意する。hexoは初期化時にそれを読むので拡張タグを実装できる。
拡張タグの登録。
hexo.extend.tag.register('lemmyComment', function(args){
const self = decycle(this);
for( const key of ["date", "updated", "raw","tags","content","categories","site"] ){
self[key]=`(${typeof self[key]})`;
}
if(verbose) console.log(`self=${ JSON.stringify(self, null, 2)}`)
return lemmyCommentImpl(self,args);
}, {async: true});
呼び出された関数のthis
オブジェクトに記事の情報が色々入っている。args
には拡張タグの引数が渡される。サイト設定 _config.yml
の内容は hexo.config
で参照できる。
async function lemmyCommentImpl()
の内容を大雑把に書くと:
postId
(lemmyサイトの投稿ID)がなければ検索したりログインして投稿したりしてpostId
を用意する。用意したら lemmyComment.png に保存しておく。lemmy側を改造せずにオリジン間リソース共有(CORS)の制約を突破するため、単純な中継APIを用意する。
(A)ブログのサーバにnodejsで簡単なHTTPサーバを書く。 postIdを指定すると GET https://lemmy.juggler.jp/api/v2/post?id=xxx してその内容を返す。
(B)ブログのサーバのnginxを設定して /api/ へのアクセスを上記HTTPサーバに中継する。
hexo のtheme/{themeName}/layout/_partial/head.ejs
の下の方に以下の内容を追記する。
<script src="/markdownToHtml.js"></script>
<script src="/hexo-comment-lemmy.js"></script>
<link rel="stylesheet" href="/hexo-comment-lemmy.css">
hexoのsourceフォルダに以下のファイルを追加する。
markdownToHtml.js
は npmのmarkedモジュールをbrowserifyで適当にブラウザ用スクリプトに変換したもの。
hexo-comment-lemmy.css
はコメント表示部分のスタイルを適当に。
hexo-comment-lemmy.js
に定義した関数は拡張タグの変換結果から呼び出される。
(2)で用意したプロクシAPIを非同期に呼び出して、応答に含まれるコメントデータをDIV要素に追加する。
まだちゃんと動作確認していない。
もし自動投稿が不要なら拡張タグは必要ない。記事のfront matterにlemmyPostIdを定義して、theme中のejsでそれを見てDOM要素を追加すれば済む。
deleted by creator