hexo/posts/8828c81e.html

552 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/img/logo.png">
<meta name="author" content="浪子">
<meta name="subtitle" content="一个分享自己生活的博客">
<meta name="description" content="曾梦想仗剑走天涯;因太胖放弃原计划.">
<meta name="keywords" content=",DIY,黑苹果,分享,自由">
<link rel="alternate" href="/atom.xml " title="提剑追梦" type="application/atom+xml">
<title>给Memos添加Artalk评论 | 提剑追梦</title>
<link rel="stylesheet" href="/css/style.css" >
<link rel="stylesheet" href="/css/partial/dark.css" >
<link rel="stylesheet" href="/css/partial/highlight/atom-one-light.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.sgcd.net/lxgw-wenkai-screen-webfont/lxgwwenkaigbscreen.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/css/iconfont.css">
<script src="/js/todark.js"></script>
<meta name="generator" content="Hexo 6.3.0"></head>
</html>
<div class="nav index" style="height: 60px;">
<div class="title animated fadeInDown">
<div class="layui-container">
<div class="nav-title"><a href="/" title="提剑追梦">提剑追梦</a></div>
<div class="nav-list">
<button> <span class=""></span><span style="display: block;"></span><span class=""></span> </button>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">
<a href="/search/ ">
<i class=" fas fa-search-plus " style="color: rgb(3 169 244);"></i>
<span class="layui-nav-item-name">搜索</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/ ">
<i class=" fab fa-fort-awesome " style="color: rgb(255 107 107);"></i>
<span class="layui-nav-item-name">首页</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/archives/ ">
<i class=" fas fa-archive " style="color: rgb(10 189 227);"></i>
<span class="layui-nav-item-name">归档</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/tags/ ">
<i class=" fas fa-hashtag " style="color: rgb(254 202 87);"></i>
<span class="layui-nav-item-name">标签</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/fcircle/ ">
<i class=" fas fa-heart " style="color: rgb(29 209 161);"></i>
<span class="layui-nav-item-name">朋友圈</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/links/ ">
<i class=" fab fa-weixin " style="color: hsl(152deg 73% 45%);"></i>
<span class="layui-nav-item-name">友链</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/memos/ ">
<i class=" fas fa-coffee " style="color:#31c7c1;"></i>
<span class="layui-nav-item-name">说说</span>
</a>
</li>
<li class="layui-nav-item">
<a href="/about/ ">
<i class=" fab fa-grav " style="color: rgb(154 106 247);"></i>
<span class="layui-nav-item-name">关于</span>
</a>
</li>
<li class="layui-nav-item" id="btn-toggle-dark">🌙</li>
<span class="layui-nav-bar" style="left: 342px; top: 78px; width: 0px; opacity: 0;"></span>
</ul>
</div>
</div>
</div>
</div>
<header class="header">
<div class="logo">
<a href="/"><img src="https://img.imsun.org/avatar.jpg" onerror=this.onerror=null,this.src="/img/loading.gif"></a>
</div>
</div>
<div class="motto">
<span>曾梦想仗剑走天涯</span>
</div>
<div class="social">
<a class="social-icon" href="https://github.com/jkjoy" target="_blank" title="Github">
<i class="iconfont icon-GitHub" aria-hidden="true"></i>
</a>
<a class="social-icon" href="mailto:jkjoy@163.com" target="_blank" title="Email">
<i class="iconfont icon-email" aria-hidden="true"></i>
</a>
<a class="social-icon" href="/atom.xml" target="_blank" title="rss">
<i class="iconfont icon-rss" aria-hidden="true"></i>
</a>
</div>
</header>
<article id="post">
<div class="post-title">给Memos添加Artalk评论</div>
<div class="post-meta">
<div class="post-meta-item date">
<span title="发表于 2023.06.13"><i class="far fa-calendar-alt"></i> 2023.06.13</span>
</div>
<div class="post-meta-item updated">
<span title="更新于 2024.05.09"><i class="far fa-calendar-check"></i> 2024.05.09</span>
</div>
<div class="post-meta-item categories">
<i class="fas fa-inbox article-meta__icon"></i> <a href="/categories/%E5%88%86%E4%BA%AB/">分享</a>
</div>
<div class="post-meta-item wordcount">
<i class="fas fa-pencil-alt"></i> <span class="post-count">375 字</span>
<i class="far fa-clock"></i> <span class="post-count">2 分钟</span>
</div>
</div>
<div class="content">
<div><p>上文提到</p>
<p><a href="/2023/507a5d86.html">给Memos添加Twikoo评论</a></p>
<ul>
<li><p>2023.10.23更新以适用于memos v0.16.1版本<br>把’.resource-wrapper替换为.gap-2</p>
</li>
<li><p>2023.10.17更新memos0.16版本</p>
</li>
</ul>
<h2 id="自定义脚本"><a href="#自定义脚本" class="headerlink" title="自定义脚本"></a>自定义脚本</h2><p>把’.resource-wrapper替换为.memo-wrapper</p>
<h2 id="自定义样式"><a href="#自定义样式" class="headerlink" title="自定义样式"></a>自定义样式</h2><p>隐藏评论数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.text-sm.text-gray-500.ml-1&#123;display:none !important;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>2023.9.26更新提醒:适用于 memos 0.15.1版本以下</li>
</ul>
<h2 id="自定义脚本-1"><a href="#自定义脚本-1" class="headerlink" title="自定义脚本"></a>自定义脚本</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">// 用 JS 向页面中插入 JS</span><br><span class="line">function addArtalkJS() &#123; </span><br><span class="line"> var memosArtalk = document.createElement(&quot;script&quot;);</span><br><span class="line"> memosArtalk.src = `https://unpkg.com/artalk/dist/Artalk.js`;</span><br><span class="line"> var artakPos = document.getElementsByTagName(&quot;script&quot;)[0];</span><br><span class="line"> artakPos.parentNode.insertBefore(memosArtalk, artakPos);</span><br><span class="line">&#125;;</span><br><span class="line">// div</span><br><span class="line">function startArtalk() &#123;</span><br><span class="line"> start = setInterval(function()&#123;</span><br><span class="line"> var artalkDom = document.getElementById(&#x27;Comments&#x27;) || &#x27;&#x27;;</span><br><span class="line"> var memoAt = document.querySelector(&#x27;.memo-wrapper&#x27;) || &#x27;&#x27;;</span><br><span class="line"> var memoLoading = document.querySelector(&#x27;.action-button-container&#x27;) || &#x27;&#x27;;</span><br><span class="line"> var memoLoadingA = document.querySelector(&#x27;.action-button-container a&#x27;) || &#x27;&#x27;;</span><br><span class="line"> if(window.location.href.replace(/^.*\/(m)\/.*$/,&#x27;$1&#x27;) == &quot;m&quot; &amp;&amp; memoLoadingA)&#123;</span><br><span class="line"> memoLoading.innerHTML = &quot;评论加载中……&quot;</span><br><span class="line"> &#125;</span><br><span class="line"> if(window.location.href.replace(/^.*\/(m)\/.*$/,&#x27;$1&#x27;) == &quot;m&quot; &amp;&amp; !artalkDom)&#123;</span><br><span class="line"> addArtalkJS()</span><br><span class="line"> if(memoAt)&#123;</span><br><span class="line"> clearInterval(start)</span><br><span class="line"> var cssLink = document.createElement(&quot;link&quot;);</span><br><span class="line"> cssLink.rel = &quot;stylesheet&quot;;</span><br><span class="line"> cssLink.href = &quot;https://unpkg.com/artalk/dist/Artalk.css&quot;;</span><br><span class="line"> document.head.appendChild(cssLink);</span><br><span class="line"> memoAt.insertAdjacentHTML(&#x27;afterend&#x27;, &#x27;&lt;div id=&quot;Comments&quot;&gt;&lt;/div&gt;&#x27;);</span><br><span class="line"> setTimeout(function() &#123;</span><br><span class="line"> Artalk.init(&#123;</span><br><span class="line"> el: &#x27;#Comments&#x27;,</span><br><span class="line"> pageKey: location.pathname,</span><br><span class="line"> pageTitle: document.title,</span><br><span class="line"> server: &#x27;https://artalk.loliko.cn&#x27;,</span><br><span class="line"> site: &#x27;memos&#x27;,</span><br><span class="line"> darkMode: &#x27;auto&#x27;</span><br><span class="line"> &#125;);</span><br><span class="line"> Artalk.on(&#x27;list-loaded&#x27;, function() &#123;</span><br><span class="line"> // console.log(&#x27;评论加载完成&#x27;);</span><br><span class="line"> memoLoading.innerHTML = &#x27;&#x27;</span><br><span class="line"> startArtalk();</span><br><span class="line"> &#125;);</span><br><span class="line"> &#125;, 1000);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> //console.log(window.location.href);</span><br><span class="line"> &#125;, 1000)</span><br><span class="line">&#125;</span><br><span class="line">startArtalk();</span><br></pre></td></tr></table></figure>
<h2 id="自定义样式-1"><a href="#自定义样式-1" class="headerlink" title="自定义样式"></a>自定义样式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a.time-text:after &#123; content: &#x27; 评论 💬 &#x27;; &#125;</span><br><span class="line">.atk-main-editor &#123; margin-top: 20px; &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</div>
<div class="post-copyright">
<div class="copyright-item">
<span> 作者: 浪子</span>
</div>
<div class="copyright-item">
<span> 链接: <a href="https://blog.jkjoy.cn/posts/8828c81e.html">https://blog.jkjoy.cn/posts/8828c81e.html</a></span>
</div>
<div class="copyright-item">
<span> 声明: 本博客所有文章除特别声明外,均采用许可协议 <a target="_blank" rel="noopener" href="http://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a> 转载请注明出处!</span>
</div>
</div>
</div>
<div class="share-reward">
<div class="share">
<div class="social-share" data-sites="wechat,weibo,qq"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js"></script>
</div>
<div class="reward">
<div style="padding: 10px 0; margin-left: 20px; width: 90%; text-align: center;">
<div class="reward-content">
<ul id="donateBox" class="list pos-a">
<li id="PayPal"><a href="https://paypal.me/jkjoy" target="_blank" title="贝宝">贝宝</a></li>
<li id="AliPay" title="支付宝"><img data-img="https://blogcdn.loliko.cn/ali.png" onerror=this.onerror=null,this.src="/img/loading.gif"></img></li>
<li id="WeChat" title="微信"><img date-img="https://blogcdn.loliko.cn/wx.png" onerror=this.onerror=null,this.src="/img/loading.gif"></img></li>
</ul>
<div id="QRBox" class="pos-f left-100">
<div id="MainBox"></div>
</div>
</div>
</div>
</div>
</div>
<div class="post_tags">
<i class="fas fa-tag"></i> <a href="/tags/Memos/" class="tag">Memos</a>
</div>
<div class="post-nav">
<div class="post-nav-prev post-nav-item">
<a href="/posts/286ad0c6.html" >用Memos API实现hexo博客的动态说说页面<i class="fa fa-chevron-left"></i></a>
</div>
<div class="post-nav-next post-nav-item">
<a href="/posts/507a5d86.html" >给Memos添加Twikoo评论<i class="fa fa-chevron-right"></i></a>
</div>
</div>
<h3><i class="far fa-comment"></i> 评论</h3>
<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: 'https://t.jkjoy.cn',
el: '#tcomment',
})
</script>
</article>
<a id="gotop" href="javascript:" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
<div id="bottom-outer">
<div id="bottom-inner">
© 2020 <i class="fa fa-heart" id="heart"></i> 浪子
<br>
Powered by
<a target="_blank" rel="noopener" href="http://hexo.io">hexo</a> | Theme is <a target="_blank" rel="noopener" href="https://github.com/a2396837/hexo-theme-blank/">blank</a>
<div class="icp-info">
<a href="" target="_blank"> </a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-src@2.5.5/dist/layui.min.js"></script>
<script src="/js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script>
window.lazyLoadOptions = {
elements_selector: 'img',
threshold: 0
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script>
<script>
var images = $('img').not('.nav-logo img').not('.card img').not($('a>img')).not('.reward-content img')
images.each(function (i, o) {
var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
$(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${$(o).attr('alt')}" class="fancybox"></a>`)
})
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script>
<script>
$().fancybox({
selector: '[data-fancybox]',
loop: true,
transitionEffect: 'slide',
protect: true,
buttons: ['slideShow', 'fullScreen', 'thumbs', 'close']
})
</script>
<script>
jQuery(document).ready(function () {
var QRBox = $('#QRBox');
var MainBox = $('#MainBox');
var AliPayQR = 'https://blogcdn.loliko.cn/ali.png';
var WeChanQR = 'https://blogcdn.loliko.cn/wx.png';
function showQR(QR) {
if (QR) {
MainBox.css('background-image', 'url(' + QR + ')');
}
$('#donateBox').addClass('blur');
QRBox.fadeIn(300, function (argument) {
MainBox.addClass('showQR');
});
}
$('#donateBox>li').click(function (event) {
var thisID = $(this).attr('id');
if (thisID === 'AliPay') {
showQR(AliPayQR);
} else if (thisID === 'WeChat') {
showQR(WeChanQR);
}
});
MainBox.click(function (event) {
MainBox.removeClass('showQR').addClass('hideQR');
setTimeout(function (a) {
QRBox.fadeOut(300, function (argument) {
MainBox.removeClass('hideQR');
});
$('#DonateText,#donateBox,#github').removeClass('blur');
}, 600);
});
});
</script>
<div id="QPlayer">
<div id="pContent">
<div id="player">
<span class="cover"></span>
<div class="ctrl">
<div class="musicTag marquee">
<strong>Title</strong>
<span> - </span>
<span class="artist">Artist</span>
</div>
<div class="progress">
<div class="timer left">0:00</div>
<div class="contr">
<div class="rewind icon"></div>
<div class="playback icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="right">
<div class="liebiao icon"></div>
</div>
</div>
</div>
</div>
<div class="ssBtn">
<div class="adf"><i class="fas fa-music" style="color: #Fff;"></i></div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/css/audio.css">
<ol id="playlist"></ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery.marquee@1.5.0/jquery.marquee.min.js"></script>
<script>
var playlist = [];
playlist.push({title:'我要开花',artist:'二手玫瑰',mp3:'https://xy07-1251893119.cos.ap-beijing-1.myqcloud.com/%E4%BA%8C%E6%89%8B%E7%8E%AB%E7%91%B0%20-%20%E6%88%91%E8%A6%81%E5%BC%80%E8%8A%B1.mp3',cover:'https://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg'})
var isRotate = true;
var autoplay = false;
</script>
<script src="https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/js/player.js"></script>
<script>
function bgChange(){
var lis= $('.lib');
for(var i=0; i<lis.length; i+=2)
lis[i].style.background = 'rgba(246, 246, 246, 0.5)';
}
window.onload = bgChange;
</script>
<script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module" defer></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
<script>
!function (e, t, a) {
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-clipboard"></i><span>复制</span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);
</script>
<script>
var btntop = $('#gotop');
btntop.on('click', function (e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, '300');
});
var $table = $('.content table').not($('figure.highlight > table'))
$table.each(function () {
$(this).wrap('<div class="table-wrap"></div>')
})
</script>
</html>