单页Memos添加Artalk评论,无限接近微博
书接上文《使用memos搭建独立微博,self-host三件套齐全了》
本文介绍:
1、Memos应用中添加Artalk评论
2、Typecho集成单页Memos并添加Artalk评论
Memos应用中添加Artalk评论
首先,你需要自建Artalk评论服务,可参考官网,此处不详细介绍了。
然后,在Memos的设置-系统
中添加自定义样式和自定义脚本。
1、在自定义脚本中追加如下代码
将代码中Artalk相关的参数配置,替换为自己的。
// artalk comments
// css
document.head.innerHTML += '<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.5.4/Artalk.css" type="text/css"/>';
// js
function addArtalkJS() {
var memosArtalk = document.createElement("script");
memosArtalk.src = `https://cdn.bootcdn.net/ajax/libs/artalk/2.5.4/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('.memo-wrapper') || ''; // 0.12.x的版本请将.memo-wrapper替换为.memo-container
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)
memoAt.insertAdjacentHTML('afterend', '<div id="Comments"></div>');
setTimeout(function() {
Artalk.init({
el: '#Comments',
pageKey: location.pathname,
pageTitle: document.title,
server: 'https://artalk.skyue.com',
site: '拾月微博',
darkMode: 'auto'
});
Artalk.on('list-loaded', function() {
// console.log('评论加载完成');
memoLoading.innerHTML = ''
startArtalk();
});
}, 1000);
}
}
//console.log(window.location.href);
}, 1000)
}
startArtalk();
2、在自定义样式中追加如下代码
a.time-text:after { content: ' 评论 💬 '; }
.atk-main-editor { margin-top: 20px; }
最终效果如下:
Typecho集成单页Memos并添加评论
先来欣赏下集成后效果,如下图所示。主要特点在于:评论框默认折叠,点击评论后评论框在当前页展开,无需跳转,类似微博。(点击这里线上体验)
网上有很多Memos单页应用示例代码,比如我用过一段时间木老师开发的版本。
我的博客是Typecho搭建的,有服务端,这次我直接在主题(我用的默认主题)文件夹新建了一个memos.php
的模板文件,并在服务端直接获取Memos数据并渲染,代码如下:
<?php $this->need('header.php'); ?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
/**
* Memos模板
*
* @package custom
*/
?>
<div class="col-mb-12 col-8" id="main" role="main">
<article class="post"><h2 class="post-title"></h2><article>
<?php
$url = 'https://memos.skyue.com/api/memo?creatorId=1&limit=300'; // 不限定内容类型
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查 SSL 加密算法是否存在
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 6);
$response = curl_exec($ch);
if($error=curl_error($ch)){
echo '微博加载错误';
}
curl_close($ch);
$array_data = json_decode($response,true)['data'];
for($i=1; $i<count($array_data); $i++)
{
$obj = $array_data[$i];
// 下面这个if判断,是只展示最近30天的Memos
if(time() - $obj['createdTs'] < 2592000){
$memo_id = $obj['id'];
$content = $obj['content'];
$create_time = date('Y-m-d H:i:s',$obj['createdTs']);
$resources = $obj['resourceList'];
$content_tag = preg_replace_callback('/#([^\s\n]+)(?=\s|\n|$)/', function ($matches) {
return '<span class="memo_tag">#' . $matches[1] . '</span>';
}, $content);
$content_html = Typecho_Widget::widget('Widget_Abstract_Contents')->markdown($content_tag); // 使用Typecho自带的Markdown解析器解析Memos
$body_html = sprintf('
<div class="memo-top-wrapper">拾月 · %s</div>
<div class="memo-content-wrapper">%s</div>', $create_time, $content_html);
if($resources){
$image_html = '<div class="resource-wrapper"><div class="images-wrapper"><div class="w-full memo-resource">';
for($j=0; $j<count($resources); $j++){
$image_html = $image_html.sprintf('<img src="%s" decoding="async" loading="lazy">', $resources[$j]['externalLink']);
}
echo '<article class="memo-wrapper">'.$body_html.$image_html.'</div></div></div><a style="cursor:pointer" onclick="loadArtalk(\''.$memo_id.'\')"><span id="btn_memo_'.$memo_id.'">评论</span>(<span id="ArtalkCount" data-page-key="/m/'.$memo_id.'"></span>)</a><div style="display: none;" id="memo_'.$memo_id.'"></div></article>';
}else{
echo '<article class="memo-wrapper">'.$body_html.'<a style="cursor:pointer" onclick="loadArtalk(\''.$memo_id.'\')"><span id="btn_memo_'.$memo_id.'">评论</span>(<span id="ArtalkCount" data-page-key="/m/'.$memo_id.'"></span>)</a><div style="display: none;" id="memo_'.$memo_id.'"></div></article>';
} // echo的html代码中,onclick属性调用下面的加载Artalk评论框代码,需要传memo_id参数
}
}
?> <!-- Memos数据处理结束 -->
<div class="memo-bottom">更多内容前往<a href="https://memos.skyue.com" target="_blank">微博主站</a></div>
</div>
<!-- artalk文件 -->
<link href="https://npm.elemecdn.com/artalk@2.5.4/dist/Artalk.css" rel="stylesheet">
<script src="https://npm.elemecdn.com/artalk@2.5.4/dist/Artalk.js"></script>
<!-- 下面这段JS,在页面上点击评论按钮时触发,支持展开评论和收起评论 -->
<script>
function loadArtalk(memo_id){
const commentDiv = document.getElementById('memo_'+memo_id);
const commentBtn = document.getElementById('btn_memo_'+memo_id);
if(commentDiv.style.display==='none'){
commentDiv.style.display='block';
commentBtn.innerHTML = '收起评论';
new Artalk({
el: '#memo_' + memo_id, // 绑定元素的 Selector
pageKey: '/m/'+memo_id, // 固定链接 (留空自动获取)
pageTitle: '拾月微博', // 页面标题 (留空自动获取)
server: 'https://artalk.skyue.com', // 后端地址
site: '拾月微博', // 在后端中创建的站点名
});
}
else{
commentDiv.style.display='none';
commentBtn.innerHTML = '评论';
}
}
</script>
<!-- 这段js,在未展开评论时,就展示评论数量 -->
<script>
Artalk.loadCountWidget({
server: 'https://artalk.skyue.com',
site: '拾月微博',
pvEl: '#ArtalkPV',
countEl: '#ArtalkCount',
});
</script>
<?php $this->need('footer.php'); ?>
上面这段代码实现两个功能:
- 通过api抓取Memos数据并直接在服务端渲染。
- 提供了两段javascript代码,一个实现展示评论数,一个实现评论框的展开和收起。
如果是Typecho博客程序,大概率能使用上述代码,只根据自己的情况修改Memos api地址以及loadArtalk中server
和site
两个参数。
关于点击「评论」按钮的功能,关键是下面三处:
- 模板中每条memo下面预留一个
div
容器,容器id
为memo_{memo_id}
,渲染后类似<div id="memo_1"></div>
。其作用是在对应的memo下方加载评论框。 - 为「评论」按钮添加
onclick
属性,调用loadArtalk
函数,调用时带上memo_id
参数。这段js执行时,会寻找上面提到的容器,加载评论框,并获取对应Memo的评论进行展示。展开状态再点击,又会收起。 - 「评论」按钮括号内的评论数,是
<span id="ArtalkCount" data-page-key="/m/'.$memo_id.'"></span>
起的作用。
下面是在主题文件夹style.css中追加的样式:
/* memo专用css */
article.memo-wrapper {
padding: 15px;
border: 1px solid darkgray;
margin: 20px 0px;
}
.memo-content-wrapper {
line-height: 1.6;
font-size: 17px;
word-wrap: break-word;
}
.memo-resource img {
width: auto;
max-width: 100%;
}
span.memo_tag {
color: cornflowerblue;
}
.memo-bottom {
margin: 50px 0px;
text-align: center;
}
.memo-top-wrapper {
color: gray;
}
以上,就这么点东西,周六晚上肝到凌晨4点,还好有ChatGPT。
另外,有些不完美的地方,比如:
- 现在图片是纵向平铺的,没有做九宫格缩略图。
- 没有详情页,从评论通知邮件打开Memos,还是memos.skyue.com站点。
留坑,有空再解决这两个问题,尤其是第2个,非常想在www.skyue.com主站实现memos详情页,技术上肯定可行,只是现在还不会。
大佬请问,
通过memos的自定义样式和脚本
可否能够实现点赞功能?
肯定可以复用artalk的点赞功能,不过我没有深入研究了,我也不是专业的,瞎折腾,哈哈。
请教下默认不点击展开评论怎么可以获取评论数,目前是加了这参数,但没点击评论就无法显示评论数,点击就正常显示了~~
Artalk.loadCountWidget({ server: 'xxx', site: 'xxx', pvEl: '#ArtalkPV', countEl: '#ArtalkCount', });也加了
但是无效~~使用的是hugo
页面上对应展示评论数的HTML元素,有没有加上id和data-page-key属性。比如我的代码中是这样的:
<span id="ArtalkCount" data-page-key="/m/'.$memo_id.'"></span>
data-page-key属性指定该条memo的key值,用以获取对应memo的评论数。
官方说明见:https://artalk.js.org/guide/frontend/config.html#%E5%8A%9F%E8%83%BD
加了,也是看了官方的这个文档。渲染出来的的页面也能正确的获取到memos 内容的链接/m/数字id,但不点击评论的时候就获取不到评论数。开始以为是/m/前面没加memos域名的原因,发现不是加了也没用。
https://koobai.com/memos/
在这个页面的评论icon边上,好像没看到显示评论数的元素。
你的页面URL是多少,我瞧瞧看,可以在Chrome的开发者工具上看下有没有相关的报错信息。
原先是在本地测试,现在同步上去了,空的时候麻烦帮忙看看,辛苦
https://koobai.com/memos/
在控制台也没见报错~
发现现在有时候打开页面可以显示评论,有时候不行,必须得点击评论按钮才会显示。包括点击页面下方的查看更多,加载出来的memos信息也不显示数字,必须得按评论按钮才行~
感谢大佬 请问 图片怎么做成九宫格呀 平铺 发长图 屏占比太大了😂
我不会改九宫格,可以等等看老莫讲的autophoto。
我自己最后是用了折叠的方式: https://www.skyue.com/memos.html
九宫格的方式,可以参考下老张这篇 https://laozhang.org/archives/3421.html 他复用了空白的代码,支持九宫格。
用插件可以解决这个问题,我今天刚好找到一个
您好 方便告知 是什么插件吗 谢谢
AutoPhotos图片自动排版.😂
好的 谢谢 我有空看看 方便给个链接 看看效果图吗 😂
http://www.manongjc.com/detail/61-dxzpqslaerwyjbh.html
不用插件也可以·看看这个
https://www.taozi1.com/kzxc.html跟这个差不多😂
我也不会,所以就退而求其次,平铺了,哈哈。
以前看这个项目,就觉得和flomo特别像,本来打算自己也搭建一个,以后在上面发短文,但奈何不懂前端,不知道怎么集成到模板,于是用了最朴素的办法,在一个文档里,用时间标题做分割,每段一个动态,可惜没有传统的评论和点赞,收不到反馈,只能看到整体页面。
记得以前用飞书文档干这个事情的时候,最可怕的是可以实时看到反馈,给自己的刺激太强了,文档上面直接显示有那些人,现在正在看文档,然后他们可以针对,每一句话留评论。
说起来,有没有一种可能,通过给typecho的模板里加一段JS代码,让它也在页面上显示,目前有那些人现在正在看博客,感觉这个对网站作者的刺激性,还是很大的。😎
技术上是可行的。
但独立博客的流量一般都不大,同一时间浏览的人很少。并且这个需要用户登录,成本比较高。
确实,http请求是单向一次性的,检测访客有没有关掉网页,哪怕不做用户账号系统,对网页也有性能压力。
另外,站长这个回复评论的速度很快啊,我比较好奇站长是怎么接收邮件提醒的?我之前自己的博客别人评论后,手机邮箱没提醒,当我看到后台评论,都几个月之后了。😂
还有一点,我设置了gravatar头像了,为啥没显示?是因为缓存问题?😂
哈哈,刚好在电脑边上😂,不过手机有收到邮件提醒,我的评论邮件提醒都还挺及时的。你是不是配置不对。
头像不知道怎么回事,有可能是缓存吧。但这个页面其它留言头像都是正常的。
插件提醒那个我已经配好了,可以很快的收到邮件,只是我以前没有看邮件的习惯,所以,我比较好奇站长用的邮件客户端是什么?网页版的收件箱?还是电脑手机自带的邮件客户端?😂
我以前每次看邮箱,都得打开网页,登陆邮箱的网址,进去才能看到邮件,所以,想问问有什么好的邮件客户端,或者接受邮件提醒的便利方法。🙏
头像估计是CDN缓存问题了,过几天可能会好。
我用的是Gmail,手机上用的官方App,电脑上是Chrome的gmail提醒插件,都是实时提醒。
没有提醒,我通常每天也会查看一次邮件,个人使用邮件频率挺高的。
好的,了解了,谢谢🙏
感谢大佬分享,先收藏起来。
我直接用typecho原生做了个memos。mrju.cn/talk
memos docker玩球不来,憋了800多行js给memos做出来了。支持tag标签,还有浏览器插件发布,以及后台登陆后直接在talk页面直接修改和删除某条哔哔。😂
你这个太强了,有没有开源?想研究一下。
右键查看源码。😂全是js。你去看看。
大家都开始添加评论功能,这手痒痒呀~
哈哈,搞起来。没有评论都不完整😂
不错不错!👍 教程拿走了。
看你的memos评论报错了,感觉是没有添加「可信域名」
嗯嗯,是的😂
看看https://github.com/kingwrcy/mblog-backend这个,多用户+评论的memos版!
上周也看到这个项目,且观察一段时间。
我对多用户没诉求,不过是想要评论,但mblog的评论需要登录,我还是喜欢Typecho这种填个邮箱就能评论的,不用注册登录。
看来我也要学习一下,怎么整起来?不知有没具体教程,业务人士😂
docker安装的话还是挺方便的。
https://www.skyue.com/23021116.html
我在上面这篇文章中简单介绍了docker安装memos的步骤。
这个不错,谢谢分享,参考一些代码,把我的 memos 也加上了评论。
在你的memos上尝试评论,返回如下错误:
{"success":false,"msg":"无效的请求, 无法获取
origin
","data":{}}遇到安全域名跨域问题。谢谢提醒!
Memos 应用上的评论代码有作业可以抄吗?
js如下:
css如下:
js有一些瑕疵,会导致memos设置中的系统设置界面排版出错,没去深究,但整体不影响使用。
把这部分:
修改为:
可以避免在后台加载 CSS 文件,只在 URL 中有
/m/
路径时才加载。后台就不会乱了。赞,把我的也修改了,现在舒服多了,哈哈。
另:url已修改。
Memos 0.13.0 版本好像不能用,改天再研究研究。
TG 的 Memos 广场置顶消息:
Memos 升级到最新的 1.3.0 版本,原来的 Twikoo 评论不能正常显示了。要把原来代码中的.memo-container 改为.memo-wrapper。
应该是 html 元素的 class 属性值变了,试试。
谢谢!