为博客添加Memos滚动轮播及Memos聚合页

  • 📝教程
  • 4262 阅读
  • 2023年11月01日
  • 4 条评论
  • 全文共804字, 阅读大约需要3分钟
  • 搜索引擎已收录

首页 / 📝教程 / 正文

AI摘要
Gemini Pro
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
反馈

用上Memos已经很长时间了,经过这段时间的使用,感觉还是非常不错的,不了解 Memos 的可以去官方仓库看看,至于Memos的搭建和使用后面抽时间再写教程(主要欠的坑太多了),或者看看其他博主的相关文章。下面就开始把Memos集成到博客中的操作。

添加Memos动态滚动轮播

这个功能就是将你的Memos动态像网站滚动公告一样展示给访客,挺方便的,查看效果请看本页头图下面。

核心Html代码

<div id="bber-talk"></div>
<!--引入相对时间 Lately 插件-->
<script src="//tokinx.github.io/lately/lately.min.js"></script>

CSS

#bber-talk {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    line-height: 35px;
    height: 45px;
    max-width: 960px;
    text-align: left;
    padding: 5px 10px;
    margin: 0;
    position: relative;
    background-color: var(--light-header);
    border-radius: 8px;
    font-size: 15px;
    overflow: hidden;
    font-weight: 700;
    border: 1px solid var(--light-background-secondary)
}

.dark #bber-talk {
    border: 1px solid var(--dark-background-secondary)
}

#bber-talk svg {
    fill: currentColor;
    vertical-align: middle;
    display: inline;
    margin-right: 5px;
    margin-top: -4px
}

.talk-wrap {
    width: 96%
}

.talk-list {
    margin: 0;
    height: 35px
}

.talk-list li {
    list-style: none;
    margin-bottom: 10px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    zoom:1}

.talk-list li .datetime {
    margin-right: 2px
}

.talk-list li a {
    text-decoration: none
}

.dark #bber-talk {
    background-color: var(--dark-header)
}

.dark .talk-list {
    color: var(--dark-color)
}

@media only screen and (max-width: 683px) {
    #bber-talk {
        margin:2em 1em 1em;
        width: 94%
    }
}

JS

//头部 bb
var bbDom = document.querySelector('#bber-talk') || '';
if(bbDom){memoTalks();}
function memoTalks(){
var bbUrl = "https://mos.nieyun.live/api/v1/memo?creatorId=101&rowStatus=NORMAL&limit=10" //修改为自己的Memos地址
fetch(bbUrl).then(res => res.json()).then( resdata =>{
    var result = '',resultAll="",data = resdata
    for(var i=0;i < data.length;i++){
        var bbTime = new Date(data[i].createdTs * 1000).toLocaleString()
        var bbCont = data[i].content
        var newbbCont = bbCont.replace(/!\[.*?\]\((.*?)\)/g,' <a href="$1" target="_blank">🌅</a> ').replace(/\[(.*?)\]\((.*?)\)/g,' <a href="$2" target="_blank">$1 🔗</a> ')
        result += `<li class="item"><span class="datetime">${bbTime}</span>: <a href="say.html">${newbbCont}</a></li>`;
    }
    var bbBefore = `<span class="index-talk-icon"><svg viewBox="0 0 1024 1024" width="24" height="24"><path d="M184.32 891.667692c-12.603077 0-25.206154-2.363077-37.809231-7.876923-37.021538-14.966154-59.864615-49.624615-59.864615-89.009231v-275.692307c0-212.676923 173.292308-385.969231 385.969231-385.969231h78.76923c212.676923 0 385.969231 173.292308 385.969231 385.969231 0 169.353846-137.846154 307.2-307.2 307.2H289.083077l-37.021539 37.021538c-18.904615 18.116923-43.323077 28.356923-67.741538 28.356923zM472.615385 195.347692c-178.018462 0-322.953846 144.935385-322.953847 322.953846v275.692308c0 21.267692 15.753846 29.144615 20.48 31.507692 4.726154 2.363077 22.055385 7.876923 37.021539-7.08923l46.473846-46.473846c6.301538-6.301538 14.178462-9.452308 22.055385-9.452308h354.461538c134.695385 0 244.184615-109.489231 244.184616-244.184616 0-178.018462-144.935385-322.953846-322.953847-322.953846H472.615385z"></path><path d="M321.378462 512m-59.076924 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"></path><path d="M518.301538 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"></path><path d="M715.224615 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153846 0 59.076923 59.076923 0 1 0-118.153846 0Z"></path></svg></span><div class="talk-wrap"><ul class="talk-list">`
    var bbAfter = `</ul></div>`
    resultAll = bbBefore + result + bbAfter
    if(bbDom){
      bbDom.innerHTML = resultAll;
    }
    //相对时间
    window.Lately && Lately.init({ target: '.datetime' });
});
setInterval(function() {
    for (var s, n = document.querySelector(".talk-list"), e = n.querySelectorAll(".item"), t = 0; t < e.length; t++)
    setTimeout(function() {
      n.appendChild(e[0])
    },1000)
},2000)
}

请修改上述JS代码中的 mos.nieyun.live 为你的Memos地址。

部署到博客

部署到博客非常简单,将上面代码放到你想要他出现的位置你就能看到效果了。

以Typecho博客放置到首页为例,只需要打开Typecho模板,复制上面的核心代码到 index.php 文件里,将CSS代码复制到 header.php 文件中的 </header> 代码之前记(用 <style></style> 包裹),将JS代码复制到 footer.php 文件中的 </body> 之前(用<script></script> 包裹),然后刷新首页,OVER。

或者将上面的核心代码,CSS和JS放置到一个PHP文件中,例如 assets/talk.php

<style>
CSS代码.......
</style>
<div id="bber-talk"></div>
<!--引入相对时间 Lately 插件-->
<script src="//tokinx.github.io/lately/lately.min.js"></script>
<script>
JS代码....
</script>    

然后在 index.php 文件中用下面代码嵌入即可。

<?php $this->need('assets/talk.php'); ?>

添加Memos聚合页面

为博客添加这个Memos聚合页面相当于给博客加了一个朋友圈,这样在这一个页面就可以快速浏览好友的Memos动态,不必一个一个翻着看了。演示请看:https://nie.su/bbs.html

下载JS代码

首先下载核心的JS代码 https://immmmm.com/bbs-lmm.js?v=231022

修改JS代码

然后打开这个js文件修改里面25~71行中的如下信息为你需要展示的Memos信息,每个用户一行,末尾英文逗号结尾,最后一行没有逗号,不会改的看下面代码解释。

  {home:"https://immmmm.com/",host:"https://me.edui.fun/",apiV1:'v1/',creatorId:"101",comment:'1',twiEnv:'https://metk.edui.fun/',imgsrc:cdnGravatar+"ba83fa02fc4b2ba621514941307e21be",endpoint:'https://api-emaction.immmmm.com',reacttargetid:"id-edui-memo-",availablearraystring:"👍,thumbs-up;🎉,party-popper;🚀,rocket;😄,smile-face;😎,cool;❤️,red-heart;"},

代码解释
home:"https://immmmm.com/" 主页地址(不是memos地址哦)
host:"https://me.edui.fun/" Memos地址
apiV1:'v1/' 这个默认不用改
creatorId:"101" Memos用户ID,老版本是101,新版是1
comment:'1' 是否开启评论
twiEnv:'https://metk.edui.fun/' Twikoo评论地址
imgsrc:cdnGravatar+"ba83fa02fc4b2ba621514941307e21be" 头像地址,用Gravatar直接修改后面引号中的值或者直接删除cdnGravatar+然后在引号中填入头像直连
endpoint:'https://api-emaction.immmmm.com' 这个是点赞的API地址
reacttargetid:"id-edui-memo-",availablearraystring:"👍,thumbs-up;🎉,party-popper;🚀,rocket;😄,smile-face;😎,cool;❤️,red-heart;" 这个是要展示的点赞图标

CSS代码

#bbs{padding: 2rem 0;}
#bbs-urls{margin-top: 2rem;}
.bbs-urls{position: relative;display:inline-block;background: #eaeaea;border-radius:50%;margin:0 .4rem 5px 0;padding:3px;width:3rem;height:3rem;cursor: pointer;}
.dark .bbs-urls,.dark .bbs-url:before{background:#4a4b50;}
.bbs-url:before{content:"";background:#eaeaea;width:5px;height:5px;border-radius:50%;position:absolute;top:0;right:0;}
.bbs-url.liveon:before{background:#42b983;animation-name: light-a;animation-duration:2s;animation-timing-function: linear;animation-iteration-count: infinite;animation-direction: alternate;}
@keyframes light-a {
  from{opacity:0.6}
  to{opacity:0.1;}
}
@keyframes light-b {
  from{opacity:1}
  to{opacity:0.4;}
}
.bbs-urls img{border-radius:50%;width:100%;height:100%;}
.bbs-urls.url-now{background:#42b983;transition: 0.6s;animation-name: light-b;animation-duration:1s;animation-timing-function: linear;animation-iteration-count: infinite;animation-direction: alternate;}
.urls-button svg.icon{padding:10px;width:100%;height: 100%;}
.bbs-timeline ul {margin:0;}
.bbs-timeline ul li{list-style-type:none;position:relative;}
.bbs-timeline{max-width:1200px;margin:0 auto;}
.bbs-timeline ul li .bbs-outlink {
    position: absolute;
    right: 2px;
    opacity: 0.1;
    z-index: 999;
}
.bbs-avatar{position: relative;}
.bbs-avatar img{width:24px;height:24px;border-radius:50%;margin-right:8px;margin-bottom: 13px;}
.bbs-creator,.bbs-date,.bbs-dot{position:relative;top:-5px;}
.bbs-dot{font-weight: 800;margin:0 .5rem;}
.bbs-content {margin-bottom: 3rem;}
.bbs-text,.resour{background: #eaeaea;border-radius: 8px;font-size: 1em;padding:10px 14px;position: relative;}
.resour{font-size: 0.9rem;margin-top: 2px;padding: 5px 14px;}
.bbs-text{overflow:hidden;max-height:90vh;}
.bbs-text blockquote{font-family: KaiTi,STKaiti,STFangsong;margin:0 0 0 1rem;padding:.25rem 2rem;position: relative;border-left:0 none;}
.bbs-text blockquote::before{line-height: 2rem;content: "“";font-family: Georgia, serif;font-size: 28px;font-weight: bold;position: absolute;left: 10px;top:5px;}
.bbs-text p{margin:0;}
.bbs-text pre p{display: inline-block;}
.bbs-text pre p:empty{display: none;}
.tag-span{color: #42b983;}
#load button.load-btn{width:100%;padding:8px 0;border: none;}
#bb-footer{letter-spacing:8px;margin:5rem auto 1rem;text-align:center;}
.dark .bbs-text,.dark .resour{background:#4a4b50;}
.dark .bbs-text p{color:#fafafa;}
.bbs-coment-svg{margin-left: 0.5rem;cursor: pointer;}

.loader {position: relative;margin:3rem auto;width: 100px;border: none;}
.loader::before {content: '';display: block;padding-top: 100%;border: none;}
.circular {animation: rotate 2s linear infinite;height: 100%;transform-origin: center center;width: 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.path {stroke-dasharray: 1, 200;stroke-dashoffset: 0;animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;stroke-linecap: round;}
@keyframes rotate {100% {transform: rotate(360deg);}}
@keyframes dash {
  0% {stroke-dasharray: 1, 200;stroke-dashoffset: 0;}
  50% {stroke-dasharray: 89, 200;stroke-dashoffset: -35px;}
  100% {stroke-dasharray: 89, 200;stroke-dashoffset: -124px;}
}
@keyframes color {
  100%,0% {stroke: #d62d20;}40% {stroke: #0057e7;}66% {stroke: #008744;}80%,90% {stroke: #ffa700;}
}
.bbs-content p > img{cursor:pointer;border:1px solid #3b3d42;}
.bbs-content p:has(img.img){display: inline-block;}
.bbs-text p > img {display: block;max-width: 100%;}
.bbs-text p > img:first-child:nth-last-child(n+2),.bbs-text p > img:first-child:nth-last-child(n+2) ~ img {display: inline-block;max-width: 100%;}

.bbs-content p > img.square{height:180px;width:180px;object-fit:cover;}
.resimg.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows:auto;
    gap: 4px;
    width: calc(100%* 2 / 3);
    box-sizing: border-box;
    margin: 4px 0 0;
}
.resimg.grid-2{
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
}
.resimg.grid-4{
  grid-template-columns: repeat(2, 1fr);
  width: calc(80% * 2 / 3);
}
.resimg.grid figure.gallery-thumbnail {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  cursor: zoom-in;
}
.resimg figure{
  text-align: left;
  max-height:50%;
}
.resimg figure img{
  max-height:50vh;
}
.resimg.grid figure, figcaption {
  margin: 0 !important;
}
.resimg.grid figure.gallery-thumbnail > img.thumbnail-image {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.video-wrapper{position:relative;padding-bottom:55%;width:100%;height:0}
.video-wrapper iframe{position:absolute;height:100%;width:100%;}

Html代码

<div id="bbs"></div>
<script src="https://fastly.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/Tokinx/ViewImage/view-image.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/Tokinx/Lately/lately.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<script src="https://immmmm.com/bbs-lmm.js?v=231022"></script> //这里修改为你修改后的js文件地址

部署到博客

部署和前面的滚动轮播是一个原理,不过这次是要新建一个页面,然后将上面的Html、CSS、JS代码引入即可,这里就不重复写了。如果有什么不清楚的地方可以留言询问。

总结

上面就是怎么把memos动态集成到博客中的两种方式,所有代码都来自于 @木木木木木 大佬,当然你也可以参考这里,添加一个只展示自己Memos的单页。因为Memos是开放API的,可玩性还是很大的,所以你也可以自己手搓一个。总之将Memos动态集成到博客中能极大的丰富博客内容,增加访客留存率(手动滑稽😂)等等等等,编不下去了,主要就是自己记录一下过程,省的以后忘了。

 赞  赏

如果觉得我的文章对你有用,请随意打赏

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开  或者  扫一扫,即可进行扫码赞赏哦

原创文章,版权属于:涅槃博客 - love2wind
本文最后更新于2023年11月02日17时20分38秒,已超过263天没有更新,若内容或图片失效,请留言反馈
本文链接:https://niepan.org/archives/2239.html(转载时请注明本文出处及文章链接)
作品采用:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

发表评论

已有 4 条评论

  1. 汲墨 Lv.1     Win 10 /    Chrome 说道:

    老师您好,我将Memos添加到独立页面后,点击分类时无法跳转到对应的memos内容分类,实际页面跳转到了 https://www.lniaen.com/index.php/undefined/api/v1/memo?creatorId=1&tag=% E6%97% A5% E5% B8% B8&rowStatus=NORMAL&limit=50,而不是memos.lniaen.com。
    请问这是我配置有问题吗?

    1. 【站长】 love2wind Lv.6     Win 10 /    Chrome 说道:

      应该是在配置的时候哪里不对,仔细检查下,尤其是js。
      另外,现在不是很推荐继续用这个版本了。可以看看@木木大佬最新的Memosbbs项目,集成Cloudflare AI,Google Gemini Pro,比这个更好用,功能更多。
      https://github.com/lmm214/memobbs

  2. 空空裤兜 Lv.1     Win 10 /    Chrome 说道:

    搬板凳,等教程

    1. 【站长】 love2wind Lv.6     Win 10 /    Chrome 说道:

      :滑稽:教程已更新,板凳坐好。

博主 - <?php $this->author->screenName(); ?>

love2wind

记录生活,分享世界