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

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

首页 / 📝教程 / 正文

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

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

添加Memos动态滚动轮播

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

核心Html代码

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

CSS

  1. #bber-talk {
  2. display: -webkit-flex;
  3. display: flex;
  4. width: 100%;
  5. line-height: 35px;
  6. height: 45px;
  7. max-width: 960px;
  8. text-align: left;
  9. padding: 5px 10px;
  10. margin: 0;
  11. position: relative;
  12. background-color: var(--light-header);
  13. border-radius: 8px;
  14. font-size: 15px;
  15. overflow: hidden;
  16. font-weight: 700;
  17. border: 1px solid var(--light-background-secondary)
  18. }
  19. .dark #bber-talk {
  20. border: 1px solid var(--dark-background-secondary)
  21. }
  22. #bber-talk svg {
  23. fill: currentColor;
  24. vertical-align: middle;
  25. display: inline;
  26. margin-right: 5px;
  27. margin-top: -4px
  28. }
  29. .talk-wrap {
  30. width: 96%
  31. }
  32. .talk-list {
  33. margin: 0;
  34. height: 35px
  35. }
  36. .talk-list li {
  37. list-style: none;
  38. margin-bottom: 10px;
  39. width: 100%;
  40. white-space: nowrap;
  41. text-overflow: ellipsis;
  42. overflow: hidden;
  43. zoom:1}
  44. .talk-list li .datetime {
  45. margin-right: 2px
  46. }
  47. .talk-list li a {
  48. text-decoration: none
  49. }
  50. .dark #bber-talk {
  51. background-color: var(--dark-header)
  52. }
  53. .dark .talk-list {
  54. color: var(--dark-color)
  55. }
  56. @media only screen and (max-width: 683px) {
  57. #bber-talk {
  58. margin:2em 1em 1em;
  59. width: 94%
  60. }
  61. }
复制代码

JS

  1. //头部 bb
  2. var bbDom = document.querySelector('#bber-talk') || '';
  3. if(bbDom){memoTalks();}
  4. function memoTalks(){
  5. var bbUrl = "https://mos.nieyun.live/api/v1/memo?creatorId=101&rowStatus=NORMAL&limit=10" //修改为自己的Memos地址
  6. fetch(bbUrl).then(res => res.json()).then( resdata =>{
  7. var result = '',resultAll="",data = resdata
  8. for(var i=0;i < data.length;i++){
  9. var bbTime = new Date(data[i].createdTs * 1000).toLocaleString()
  10. var bbCont = data[i].content
  11. var newbbCont = bbCont.replace(/!\[.*?\]\((.*?)\)/g,' <a href="$1" target="_blank">🌅</a> ').replace(/\[(.*?)\]\((.*?)\)/g,' <a href="$2" target="_blank">$1 🔗</a> ')
  12. result += `<li class="item"><span class="datetime">${bbTime}</span><a href="say.html">${newbbCont}</a></li>`;
  13. }
  14. 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">`
  15. var bbAfter = `</ul></div>`
  16. resultAll = bbBefore + result + bbAfter
  17. if(bbDom){
  18. bbDom.innerHTML = resultAll;
  19. }
  20. //相对时间
  21. window.Lately && Lately.init({ target: '.datetime' });
  22. });
  23. setInterval(function() {
  24. for (var s, n = document.querySelector(".talk-list"), e = n.querySelectorAll(".item"), t = 0; t < e.length; t++)
  25. setTimeout(function() {
  26. n.appendChild(e[0])
  27. },1000)
  28. },2000)
  29. }
复制代码

请修改上述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

  1. <style>
  2. CSS代码.......
  3. </style>
  4. <div id="bber-talk"></div>
  5. <!--引入相对时间 Lately 插件-->
  6. <script src="//tokinx.github.io/lately/lately.min.js"></script>
  7. <script>
  8. JS代码....
  9. </script>
复制代码

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

  1. <?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信息,每个用户一行,末尾英文逗号结尾,最后一行没有逗号,不会改的看下面代码解释。

  1. {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代码

  1. #bbs{padding: 2rem 0;}
  2. #bbs-urls{margin-top: 2rem;}
  3. .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;}
  4. .dark .bbs-urls,.dark .bbs-url:before{background:#4a4b50;}
  5. .bbs-url:before{content:"";background:#eaeaea;width:5px;height:5px;border-radius:50%;position:absolute;top:0;right:0;}
  6. .bbs-url.liveon:before{background:#42b983;animation-name: light-a;animation-duration:2s;animation-timing-function: linear;animation-iteration-count: infinite;animation-direction: alternate;}
  7. @keyframes light-a {
  8. from{opacity:0.6}
  9. to{opacity:0.1;}
  10. }
  11. @keyframes light-b {
  12. from{opacity:1}
  13. to{opacity:0.4;}
  14. }
  15. .bbs-urls img{border-radius:50%;width:100%;height:100%;}
  16. .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;}
  17. .urls-button svg.icon{padding:10px;width:100%;height: 100%;}
  18. .bbs-timeline ul {margin:0;}
  19. .bbs-timeline ul li{list-style-type:none;position:relative;}
  20. .bbs-timeline{max-width:1200px;margin:0 auto;}
  21. .bbs-timeline ul li .bbs-outlink {
  22. position: absolute;
  23. right: 2px;
  24. opacity: 0.1;
  25. z-index: 999;
  26. }
  27. .bbs-avatar{position: relative;}
  28. .bbs-avatar img{width:24px;height:24px;border-radius:50%;margin-right:8px;margin-bottom: 13px;}
  29. .bbs-creator,.bbs-date,.bbs-dot{position:relative;top:-5px;}
  30. .bbs-dot{font-weight: 800;margin:0 .5rem;}
  31. .bbs-content {margin-bottom: 3rem;}
  32. .bbs-text,.resour{background: #eaeaea;border-radius: 8px;font-size: 1em;padding:10px 14px;position: relative;}
  33. .resour{font-size: 0.9rem;margin-top: 2px;padding: 5px 14px;}
  34. .bbs-text{overflow:hidden;max-height:90vh;}
  35. .bbs-text blockquote{font-family: KaiTi,STKaiti,STFangsong;margin:0 0 0 1rem;padding:.25rem 2rem;position: relative;border-left:0 none;}
  36. .bbs-text blockquote::before{line-height: 2rem;content: "“";font-family: Georgia, serif;font-size: 28px;font-weight: bold;position: absolute;left: 10px;top:5px;}
  37. .bbs-text p{margin:0;}
  38. .bbs-text pre p{display: inline-block;}
  39. .bbs-text pre p:empty{display: none;}
  40. .tag-span{color: #42b983;}
  41. #load button.load-btn{width:100%;padding:8px 0;border: none;}
  42. #bb-footer{letter-spacing:8px;margin:5rem auto 1rem;text-align:center;}
  43. .dark .bbs-text,.dark .resour{background:#4a4b50;}
  44. .dark .bbs-text p{color:#fafafa;}
  45. .bbs-coment-svg{margin-left: 0.5rem;cursor: pointer;}
  46. .loader {position: relative;margin:3rem auto;width: 100px;border: none;}
  47. .loader::before {content: '';display: block;padding-top: 100%;border: none;}
  48. .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;}
  49. .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;}
  50. @keyframes rotate {100% {transform: rotate(360deg);}}
  51. @keyframes dash {
  52. 0% {stroke-dasharray: 1, 200;stroke-dashoffset: 0;}
  53. 50% {stroke-dasharray: 89, 200;stroke-dashoffset: -35px;}
  54. 100% {stroke-dasharray: 89, 200;stroke-dashoffset: -124px;}
  55. }
  56. @keyframes color {
  57. 100%,0% {stroke: #d62d20;}40% {stroke: #0057e7;}66% {stroke: #008744;}80%,90% {stroke: #ffa700;}
  58. }
  59. .bbs-content p > img{cursor:pointer;border:1px solid #3b3d42;}
  60. .bbs-content p:has(img.img){display: inline-block;}
  61. .bbs-text p > img {display: block;max-width: 100%;}
  62. .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%;}
  63. .bbs-content p > img.square{height:180px;width:180px;object-fit:cover;}
  64. .resimg.grid{
  65. display: grid;
  66. grid-template-columns: repeat(3,1fr);
  67. grid-template-rows:auto;
  68. gap: 4px;
  69. width: calc(100%* 2 / 3);
  70. box-sizing: border-box;
  71. margin: 4px 0 0;
  72. }
  73. .resimg.grid-2{
  74. grid-template-columns: repeat(2, 1fr);
  75. width: 80%;
  76. }
  77. .resimg.grid-4{
  78. grid-template-columns: repeat(2, 1fr);
  79. width: calc(80% * 2 / 3);
  80. }
  81. .resimg.grid figure.gallery-thumbnail {
  82. position: relative;
  83. width: 100%;
  84. height: 0;
  85. padding-top: 100%;
  86. cursor: zoom-in;
  87. }
  88. .resimg figure{
  89. text-align: left;
  90. max-height:50%;
  91. }
  92. .resimg figure img{
  93. max-height:50vh;
  94. }
  95. .resimg.grid figure, figcaption {
  96. margin: 0 !important;
  97. }
  98. .resimg.grid figure.gallery-thumbnail > img.thumbnail-image {
  99. position: absolute;
  100. left: 0;
  101. top: 0;
  102. display: block;
  103. width: 100%;
  104. height: 100%;
  105. object-fit: cover;
  106. object-position: 50% 50%;
  107. }
  108. .video-wrapper{position:relative;padding-bottom:55%;width:100%;height:0}
  109. .video-wrapper iframe{position:absolute;height:100%;width:100%;}
复制代码

Html代码

  1. <div id="bbs"></div>
  2. <script src="https://fastly.jsdelivr.net/npm/marked/marked.min.js"></script>
  3. <script src="https://fastly.jsdelivr.net/gh/Tokinx/ViewImage/view-image.min.js"></script>
  4. <script src="https://fastly.jsdelivr.net/gh/Tokinx/Lately/lately.min.js"></script>
  5. <script src="https://fastly.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  6. <script src="https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  7. <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秒,已超过581天没有更新,若内容或图片失效,请留言反馈
本文链接: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

记录生活,分享世界