基于 Memos 实现闲言碎语和待办项功能
发表于 更新于
字数总计:4.5k 阅读时长:24 分钟阅读量:114
距离上次更新已经过去 333 天了,文章内容可能已经过时。若内容或图片失效,请留言反馈(部分素材来自网络)。
前言
当前的闲言碎语界面是参考 Leonus 大佬 的文章 基于 Memos 实现说说和清单功能。 而成的。过程中数据显示不出来,大佬也通过远程控制我的电脑帮助我解决了问题,感谢大佬
这里建议最好基于自身服务器进行部署。当然,我是通过 小 N 同学 的 memos 纯公益代部署服务 获取 API 进行部署的,这里也有一些大佬们研究出使用 Zeabur 和 Railway 部署 memos
部署
通过命令 hexo new page memos
创建页面,并在 _config.anzhiyu.yml 的菜单里使这个界面可以通过点击进去
用户 ID 的获取方法如下:
- 注册并登录 Memos
- 发布一条所有人可见的 memos
- 点击探索接着点击用户名

我这里是使用 小 N 同学 的 Memos 的,所以这是我最终的 链接地址 ,出现数据就代表成功了
实现
粘贴如下代码并按照注释修改内容即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
| <div class="author-content author-content-item single" style="background:url(https://jsd.onmicrosoft.cn/npm/blogassert/covers/1687615739569.png) left 28%/cover no-repeat"> <div class="card-content"> <div class="author-content-item-tips">闲言碎语</div><span class="author-content-item-title">咸鱼的日常生活</span> <div class="content-bottom"> <div class="tips">随时随地,分享生活</div> </div> <div class="banner-button-group"><a class="banner-button" href="/album" data-pjax-state="" draggable="false"><i class="anzhiyufont anzhiyu-icon-arrow-circle-right" style="font-size:1.5rem"></i><span class="banner-button-text">我的相册</span></a></div> </div> </div>
<style> .bber-reply { cursor: pointer !important; }
.bber-reply:hover { color: var(--anzhiyu-main); max-height: 35px; }
/* 页面初始化 */ div#page { background: 0 0!important; border: 0; padding: 0; box-shadow: none !important }
[data-theme=dark] #twikoo .tk-content, #twikoo .tk-content { padding: 0; background: transparent; }
.talk_item, .tk-expand, .tk-comments-container>.tk-comment, .tk-submit:nth-child(1) { background: rgba(255,255,255,.6); border: 1px solid #e0e3ed; box-shadow: 0 5px 10px rgb(189 189 189 / 10%); transition: all .3s ease-in-out; border-radius: 12px; }
/* 瀑布溜布局卡片 */ .talk_item { display: inline-block; width: 32.7%; margin-right: 1%; padding: 15px 1rem 12px; margin-bottom: 15px; }
[data-theme=dark] .talk_item, .tk-expand, .tk-comments-container>.tk-comment, .tk-submit:nth-child(1) { background: none; }
.talk_item:hover, .tk-comments-container>.tk-comment:hover, .tk-submit:nth-child(1):hover { border-color: #49b1f5; }
.tk-submit { padding: 20px 10px 0; }
.tk-comments-container>.tk-comment { padding: 15px; }
/* 页面初始化结束 */
#talk { margin-top: 1rem; }
#talk .loading { display: flex; align-items: center; justify-content: center; flex-direction: column; }
#talk .loading img { width: 200px; }
.avatar { margin: 0 !important; width: 60px; height: 60px; border-radius: 10px !important; }
.talk_bottom, .talk_meta { display: flex; align-items: center; width: 100%; line-height: 1.5; }
.talk_bottom { justify-content: space-between; }
.info { display: flex; flex-direction: column; margin-left: 10px; }
span.talk_nick { color: #6dbdc3; font-size: 1.2rem; }
svg.is-badge.icon { width: 15px; margin-left: 5px; padding-top: 3px; }
span.talk_date { font-size: 14px; opacity: .6; }
.talk_content { line-height: 1.5; margin-top: 10px; }
.zone_imgbox { display: flex; flex-wrap: wrap; --w: calc(25% - 8px); gap: 10px; margin-top: 5px; }
.zone_imgbox a { display: block; border-radius: 12px; width: 177px; aspect-ratio: 1/1; position: relative; }
.zone_imgbox img { width: 100%; height: 100%; margin: 0 !important; object-fit: cover; }
/* 底部 */
.talk_bottom { opacity: .9; }
.talk_bottom a { border-bottom: none !important; }
span.talk_tag { font-size: 14px; }
.talk_content>a { margin: 0 3px; color: #ff7d73 !important; }
.talk_content>a:hover { text-decoration: none !important; color: #ff5143 !important }
/* 提醒 */
.limit { transition: all .3s ease-in-out; color: rgba(76, 73, 72, 0.6); }
[data-theme=dark] .limit { color: rgba(255, 255, 255, 0.5); }
.limit { display: none; text-align: center; margin-top: 20px; color: #4c4948; }
/* 哔哩哔哩视频适配 */ iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.video { position: relative; padding: 30% 45%; margin-top: 10px; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
/* 手机卡片自适应 */ @media screen and (max-width: 768px) { .talk_item { width: 49.3%; margin-right: 1.4%; } .zone_imgbox a { width: calc(50% - 3px); max-height: calc(50% - 3px); } }
@media screen and (max-width: 1100px) { .talk_item { width: 100%; margin-right: 0; } .zone_imgbox a { width: calc(50% - 3px); max-height: calc(50% - 3px); } }
@media screen and (max-width: 900px) { .zone_imgbox { --w: calc(33% - 5px); }
#talk { margin: 10px 3px 0 }
#post-comment { margin: 0 3px } .zone_imgbox a { width: calc(50% - 3px); max-height: calc(50% - 3px); } }
@media screen and (max-width: 768px) { .zone_imgbox { gap: 6px; }
.zone_imgbox { --w: calc(50% - 3px); }
span.talk_date { font-size: 14px; } .zone_imgbox a { width: calc(50% - 3px); max-height: calc(50% - 3px); } } </style>
<div id="talk" style="position: relative;height: 2845px;"> <div class='loading'><img src="/img/loading.gif" alt="加载中..."></div> </div>
<div class="limit">- 只展示最近30条说说 -</div> <script src="/js/imgStatus.js"></script> <script> if (1) { let url = 'memos地址' fetch(url + '/api/v1/memo?creatorId=72&tag=说说&limit=30').then(res => res.json()).then(data => { // 注意修改域名和用户id let items = [], html = '', icon = '<svg viewBox="0 0 512 512"xmlns="http://www.w3.org/2000/svg"class="is-badge icon"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z"fill="#1da1f2"></path></svg>'; data.forEach(item => { items.push(Format(item)) }); if (items.length == 30) document.querySelector('.limit').style.display = 'block'; items.forEach(item => { html += `<div class="talk_item"><div class="talk_meta"><img class="no-lightbox nolazyload avatar" src="/img/avatar.webp"><div class="info"><span class="talk_nick">萌傀儡${icon}</span><span class="talk_date">${item.date}</span></div></div><div class="talk_content">${item.content}</div><div class="talk_bottom"><div><span class="talk_tag"># ${item.tag}</span></div><div class="bber-reply" onclick="rm.rightMenuCommentText('${item.content.split('<')[0]}')"><i class="anzhiyufont anzhiyu-icon-message"></i></div></div></div>` // 注意修改头像链接和名称 }) document.getElementById('talk').innerHTML = html waterfall('#talk') }) // 页面内容格式化 function Format(item) { let date = getTime(new Date(item.createdTs * 1000).toString()), content = item.content, tag = item.content.match(/\{(.*?)\}/g), imgs = content.match(/!\[.*\]\(.*?\)/g), musics = content.match(/{\s*music\s*(.*)\s*}/g), text = '', videos = content.match(/{\s*bilibili\s*(.*)\s*}/g); if (imgs) imgs = imgs.map(item => { return item.replace(/!\[.*\]\((.*?)\)/, '$1') }) if (item.resourceList.length) { if (!imgs) imgs = [] item.resourceList.forEach(t => { if (t.externalLink) imgs.push(t.externalLink) else imgs.push(`${url}/o/r/${t.id}/${t.publicId}/${t.filename}`) }) } // content = content.replace(/#(.*?)\s/g, '').replace(/{.*}/g, '').replace(/\!\[(.*?)\]\((.*?)\)/g, '').replace(/```/g, '').replace(/\[(.*?)\]\((.*?)\)/g, `<a href="$2">@$1</a>`); text = content.replace(/#(.*?)\s/g, '').replace(/\!\[(.*?)\]\((.*?)\)/g, '').replace(/\{(.*?)\}/g, '') content = text.replace(/\[(.*?)\]\((.*?)\)/g, `<a href="$2">@$1</a>`); if (imgs) { content += `<div class="zone_imgbox">` imgs.forEach(e => content += `<a href="${e}" data-fancybox="gallery" class="fancybox" data-thumb="${e}"><img class="nolazyload talk-img" src="${e}"></a>`) content += '</div>' } if (musics) musics.forEach(item => { content += `<meting-js auto="${item.replace(/{\s*music\s*(.*)\s*}/, '$1')}" theme="#4976f5" preload="metadata"></meting-js>` }) if (videos) videos.forEach(item => { content += `<div style="position: relative; padding: 30% 45%;margin-top: 10px;margin-bottom: 10px"><iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?autoplay=0&bvid=${item.replace(/{\s*bilibili\s*(.*)\s*}/, '$1').replace(/.*video\/([^\/]*).*/, '$1')}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>` }) return { content: content, date: date, tag: tag ? tag[0].replace(/\{(.*?)\}/, '$1') : '无标签', text: text.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]' + `${imgs ? '[图片]' : ''}`) } } // 页面时间格式化 function getTime(time) { let d = new Date(time), ls = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()]; for (let i = 0; i < ls.length; i++) { ls[i] = ls[i] <= 9 ? '0' + ls[i] : ls[i] + '' } if (new Date().getFullYear() == ls[0]) return ls[1] + '月' + ls[2] + '日 ' + ls[3] +':'+ ls[4] else return ls[0] + '年' + ls[1] + '月' + ls[2] + '日 ' + ls[3] +':'+ ls[4] } } </script>
|
使用
使用的格式如下:
1
| #说说 {说说标签} 我是内容 [我是链接](链接地址) 
|
注意,前面的 #说说 是固定的。标签用大括号包起来。

待办项功能
通过命令 hexo new page todo
创建页面,并在 _config.anzhiyu.yml 的菜单里使这个界面可以通过点击进去。
粘贴如下代码并按照注释修改内容即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
| <div class="author-content author-content-item single" style="background:url(https://jsd.onmicrosoft.cn/npm/blogassert/covers/yuanshen1.webp) top/cover no-repeat"> <div class="card-content"> <div class="author-content-item-tips">待办项</div><span class="author-content-item-title">这是我应该要记得做的事情</span> <div class="content-bottom"></div> <div class="tips">列出需要处理的事物,包括生活、工作或其他事项</div> <div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl("/memos/")" data-pjax-state=""><i class="anzhiyufont anzhiyu-icon-arrow-circle-right" style="font-size:1.5rem"></i><span class="banner-button-text">闲言碎语</span></a></div> </div><canvas id="header_canvas" width="897" height="859" style="position: absolute; bottom: 0px;"></canvas> </div>
<style> /* 页面初始化 */ div#page { background: none; border: 0; padding: 0; } .page-title{ display: none; }
.page-top-card { background-color: #ffe3dd; } /* 页面初始化结束 */ div#todolist { display: flex; flex-wrap: wrap; margin-top: 1rem; }
.list_item { position: relative; display: inline-block; width: calc(50% - .4rem); background: #ffe3dd; border-radius: 12px; padding: 10px 1rem 1.2rem; border: 2px dashed #f7a796; --todo-border: 1px solid #f7a796; margin-right: 1rem; margin-bottom: 1rem; } .list_item h3 { margin: 0; color: #333; border-bottom: 1px solid #f7a796; } .list_item ul { font-size: 17px; padding: 0 !important; margin: 0; } .list_item li{ margin: 0 !important; color: #333; border-bottom: 1px solid #f7a796; } .list_item li::marker { content: none; } li.achieve { opacity: .8; text-decoration: line-through; } .bottom{ line-height: 1.5; text-align: right; } .bottom p { margin: 0 !important; } .bottom a { font-weight: 700; color: #4c4948 !important; } .bottom a:hover { color: #4976f5 !important; text-decoration: none !important; } [data-theme=dark] .list_item { background: #dfc1b9; } @media screen and (max-width: 900px) { .bottom { margin: 0 8px; } } @media screen and (max-width: 768px) { .list_item{ width: 100%; } } </style>
<div id="todolist"></div>
<script> if (1) { fetch('memos地址/api/v1/memo?creatorId=72&tag=清单').then(res => res.json()).then(data => { // 获取并处理数据 data.forEach(item => { // 处理数据 let content = item.content, title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/, '$1'); // 去掉多余内容,替换清单内容 content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`); // 渲染数据 let div = document.createElement('div'); div.className = 'list_item'; div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`; document.getElementById('todolist').appendChild(div); }); waterfall('#todolist'); }).catch() } </script>
|
使用的格式如下:
1 2 3
| #清单 [想去的地方] - [ ] 轻笑的米奇妙妙屋(轻笑让我加的) - [x] 已完成的清单
|
注意,前面的 #清单 是固定的。标题用中括号包起来。已完成的将括号内的空格改成 x 即可。

后记
2023 年 8 月 18 日,使用 Zeabur 成功部署了 Memos。原因也是 原有的 加载图片速度较慢,所以才进行更换。这里也发现一旦更换白嫖的服务器,那么原有的数据大概就会没了,毕竟不是自已的服务器,不过由于不是重要数据,丢了也没大伤。
2024 年 5 月 3 日看到出现这个警告,相当于想要更好的服务就要收费了,不过也没啥

接下来就是如何实现首页说说轮播了,先找到 /themes/butterfly/layout/includes/layout.pug
这个文件,然后将如何代码添加进去
1 2 3 4 5 6 7 8
| if (is_home()) #bbTimeList.bbTimeList.container.wow.animate__tada(data-wow-duration="700ms",data-wow-delay="200ms",data-wow-offset="100",data-wow-iteration="1",style="visibility: visible; animation-duration: 700ms; animation-delay: 200ms; animation-iteration-count: 1; animation-name: slide-in;") i.anzhiyufont.anzhiyu-icon-jike.bber-logo.fontbold(onclick=`pjax.loadUrl("/memos/")`,title="即刻短文",aria-hidden="true") #bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container.swiper-initialized.swiper-vertical.swiper-pointer-events.swiper-backface-hidden(tabindex="-1") #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl("/memos/")`,aria-live="off",style="transition-duration: 0ms;") #talk-list span.swiper-notification(aria-live="assertive",aria-atomic="true") i.bber-gotobb.anzhiyufont.anzhiyu-icon-circle-arrow-right(onclick=`pjax.loadUrl("/memos/")`,title="查看全文")
|
如下图所示:

然后分别在你的 css 文件夹 和 js 文件夹 中添加如下两个文件,并放入 inject 中去
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| @media screen and (min-width: 768px) { #bbTimeList { background: rgba(255, 255, 255, 0.75) !important } }
#bber-talk,#bber-talk a { color: #4c4948 }
#talk-list { flex: 1; max-height: 32px; font-size: 16px; font-weight: 700; padding: 0; margin: 0; margin: -1.2px 0 0 0; text-align: center; cursor: pointer }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| function saveData(e, a) { localStorage.setItem(e, JSON.stringify({ time: Date.now(), data: a })) } function loadData(e, a) { let t = JSON.parse(localStorage.getItem(e)); if (t) { let e = Date.now() - t.time; if (-1 < e && e < 6e4 * a) return t.data } return 0 } let talkTimer = null; function indexTalk() { if (talkTimer && (clearInterval(talkTimer), talkTimer = null), !document.getElementById("bber-talk")) return; function e(e) { let a = ""; e.forEach(((e,t)=>{ a += `<li class="item item-${t + 1}" style="text-align: center;">${e}</li>` } )); let t = document.querySelector("#bber-talk #talk-list"); t.innerHTML = a, talkTimer = setInterval((()=>{ t.appendChild(t.children[0]) } ), 3e3) } let a = loadData("talk", 1000); a ? e(a) : fetch("memos地址/api/v1/memo?creatorId=1&tag=说说&limit=30").then((e=>e.json())).then((a=>{ e(a = function(e) { let a = []; return e.forEach((e=>{ a.push(e.content.replace(/#(.*?)\s/g, "").replace(/\{(.*?)\}/, "").replace(/\!\[(.*?)\]\((.*?)\)/g, '<i class="fa-solid fa-image"></i>').replace(/\[(.*?)\]\((.*?)\)/g, '<i class="fa-solid fa-link"></i>').replace(/{\s*bilibili\s*(.*)\s*}/g, '<i class="fa-brands fa-bilibili"></i>').replace(/{\s*music\s*(.*)\s*}/g, '<i class="fa-solid fa-music"></i>')) } )), saveData("talk", a) a }(a)) } )) } function whenDOMReady() { indexTalk() } whenDOMReady(), document.addEventListener("pjax:complete", whenDOMReady);
|
这里比较耗费我时间的是如何获取 memos 的数据,一直返回 null
2023 年 8 月 19 日处理视频首页轮播问题,在询问过 Leonus 大佬后成功解决问题了。下面是 js 文件的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
| function saveData(name, data) { localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data })) };
function loadData(name, time) { let d = JSON.parse(localStorage.getItem(name)); if (d) { return d.data; } return 0; };
let talkTimer = null; function indexTalk() { if (talkTimer) { clearInterval(talkTimer) talkTimer = null; } if (!document.getElementById('bber-talk')) return
function toText(ls) { let text = [] ls.forEach(item => { text.push(item.content.replace(/#(.*?)\s/g, "").replace(/\{(.*?)\}/, "").replace(/\!\[(.*?)\]\((.*?)\)/g, '<i class="fa-solid fa-image"></i>').replace(/\[(.*?)\]\((.*?)\)/g, '<i class="fa-solid fa-link"></i>').replace(/{\s*bilibili\s*(.*)\s*}/g, '<i class="fa-brands fa-bilibili"></i>').replace(/{\s*music\s*(.*)\s*}/g, '<i class="fa-solid fa-music"></i>')) }); return text }
function talk(ls) { let html = '' ls.forEach((item, i) => { html += `<li class="item item-${i + 1}">${item}</li>` }); let box = document.querySelector("#bber-talk #talk-list") box.innerHTML = html; talkTimer = setInterval(() => { box.appendChild(box.children[0]); }, 5000); }
let d = loadData('talk', 10); if (d) talk(d); else { fetch('memos地址/api/v1/memo?creatorId=1&tag=说说&limit=30').then(res => res.json()).then(data => { data = toText(data) talk(data); saveData('talk', data); }) } } indexTalk();
function whenDOMReady() { indexTalk(); }
whenDOMReady() document.addEventListener("pjax:complete", whenDOMReady)
|
并且在 css 文件中天下如下代码,处理视频、音频和图片等的数据
1 2 3
| #bber-talk .item i { margin-left: 5px }
|