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

用上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;"},
 复制代码

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动态集成到博客中能极大的丰富博客内容，增加访客留存率（手动滑稽😂）等等等等，编不下去了，主要就是自己记录一下过程，省的以后忘了。