用上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,新版是1comment:'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动态集成到博客中能极大的丰富博客内容,增加访客留存率(手动滑稽😂)等等等等,编不下去了,主要就是自己记录一下过程,省的以后忘了。
老师您好,我将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。
请问这是我配置有问题吗?
应该是在配置的时候哪里不对,仔细检查下,尤其是js。
另外,现在不是很推荐继续用这个版本了。可以看看@木木大佬最新的Memosbbs项目,集成Cloudflare AI,Google Gemini Pro,比这个更好用,功能更多。
https://github.com/lmm214/memobbs
搬板凳,等教程