给memos添加第三方评论artalk twikoo

浪子
2023-10-22 / 5 评论 / 搜一下 / 305 阅读 / 正在检测是否收录...
AI摘要:本文介绍了如何给Memos添加第三方评论系统Twikoo和Artalk的代码。对于Twikoo评论系统,需要在Memos的单条页面插入相应的脚本,并设置相关参数。而对于Artalk评论系统,需要插入相应的JS代码,并设置页面元素和样式。通过这两种评论系统,可以为Memos添加评论功能,并实现自定义样式和功能。

代码来源@木木老师

给Memos添加Twikoo评论

2023.10.23更新脚本以适用于memos v0.16.1

// Memos v0.16.1 单条页面插入 Twikoo 评论
var twikooENV = 'https://你的.com/'
function addTwikooJS() { 
  var memosTwikoo = document.createElement("script");
  memosTwikoo.src = `https://cdn.staticfile.org/twikoo/1.6.22/twikoo.all.min.js`;
  var tws = document.getElementsByTagName("script")[0];
  tws.parentNode.insertBefore(memosTwikoo, tws);
};
function startTwikoo() {
  startTW = setInterval(function(){
    var nowHref = window.location.href;
    var twikooDom = document.querySelector('#twikoo') || '';
    if( nowHref.replace(/^.*\/(m)\/.*$/,'$1') == "m"){
      if(!twikooDom){
        addTwikooJS()
        setTimeout(function() {
          var memoTw = document.querySelector('.gap-2') || '';
          memoTw.insertAdjacentHTML('afterend', '<div id="mtcomment"></div>');
          twikoo.init({
            envId: twikooENV,
            el: '#mtcomment',
            path: nowHref.replace(/^.*=?(http.*\/m\/[0-9]+).*$/,'$1'),
            onCommentLoaded: function () {
              startTwikoo();
            }
          })
        }, 1500)
      }else{
        clearInterval(startTW)
      }
    }
  }, 2000)
}
startTwikoo();

给Memos添加Artalk评论

自定义样式

隐藏评论数

.text-sm.text-gray-500.ml-1{display:none !important;}

自定义代码

// 用 JS 向页面中插入 JS
function addArtalkJS() { 
    var memosArtalk = document.createElement("script");
    memosArtalk.src = `https://unpkg.com/artalk/dist/Artalk.js`;
    var artakPos = document.getElementsByTagName("script")[0];
    artakPos.parentNode.insertBefore(memosArtalk, artakPos);
};
// div
function startArtalk() {
    start = setInterval(function(){
        var artalkDom = document.getElementById('Comments') || '';
        var memoAt = document.querySelector('.resource-wrapper') || '';
        var memoLoading = document.querySelector('.action-button-container') || '';
        var memoLoadingA = document.querySelector('.action-button-container a') || '';
        if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && memoLoadingA){
        memoLoading.innerHTML = "评论加载中……"
        }
        if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && !artalkDom){
            addArtalkJS()
            if(memoAt){
                clearInterval(start)
                var cssLink = document.createElement("link");
                cssLink.rel = "stylesheet";
                cssLink.href = "https://unpkg.com/artalk/dist/Artalk.css";
                document.head.appendChild(cssLink);
                memoAt.insertAdjacentHTML('afterend', '<div id="Comments"></div>');
                setTimeout(function() {
                    Artalk.init({
                        el: '#Comments',
                        pageKey: location.pathname,
                        pageTitle: document.title,
                        server: 'https://artalk.loliko.cn',
                        site: 'memos',
                        darkMode: 'auto'
                    });
                    Artalk.on('list-loaded', function() {
                        // console.log('评论加载完成');
                        memoLoading.innerHTML = ''
                        startArtalk();
                    });
                }, 1000);
            }
        }
        //console.log(window.location.href);
    }, 1000)
}
startArtalk();

评论 (5)

取消
  1. 头像
    Kevin
    Windows 10 · Google Chrome

    0.20 似乎用不了了

    回复
    1. 头像
      浪子 作者
      MacOS · Google Chrome
      @ Kevin

      你用的是twikoo还是artalk ?

      回复
    2. 头像
      浪子 作者
      MacOS · Google Chrome
      @ Kevin

      artalk的话需要注意版本与js版本是否一致

      回复
      1. 头像
        Kevin
        Windows 10 · Google Chrome
        @ 浪子

        都是最新版,里面引用的js地址改了,然后控制台发现会无限加载js,且页面上评论框出不来,

        回复
        1. 头像
          浪子 作者
          Windows 10 · Google Chrome
          @ Kevin

          建议使用twikoo ,artalk升级2.8.2之后问题挺多的

          回复