Memos 公告样式展示

此文章介绍在网站展示Memos公告样式的方法。需创建JS和CSS文件，配置API链接，在所需位置添加CSS选择器并引入相关文件，还含WordPress子比主题的添加方式，可实现滚动展示。

其实刚开始部署 Memos 的时候，就看到 “大大的小蜗牛” 博主实现了，但是当时试了一下，没弄好，也懒得整了。今天正好有点空，就去研究了下，因为博主基本上是小白，“大大的小蜗牛”的教程我始终没有魔改成功，百度搜索了一番，发现“木木木木木”博主的首页也有滚动展示，发现也是 Memos 后端，直接就把博主的 JS 抄过来了，CSS 样式还是用的“大大的小蜗牛”博主的，再根据自己的主题稍微改一下。

创建 JS 文件

document.addEventListener("DOMContentLoaded", () => {
var bbDom = document.querySelector('#memos-say') || '';
if(bbDom){memoTalks();}
function memoTalks(){
var bbUrl = "https://say.catchyxc.com/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=10"    //填入你的 Memos Api 改好先测试下你的Api访问有没有内容
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(/```([\s\S]*?)```[\s]*/g, " <code>$1</code> ") //全局匹配代码块
                    .replace(/`([\s\S ]*?)`[\s]*/g, " <code>$1</code> ") //全局匹配内联代码块
                    .replace(/\!\[[\s\S]*?\]\([\s\S]*?\)/g, "🌅") //全局匹配图片
                    .replace(/\[[\s\S]*?\]\([\s\S]*?\)/g, "🔗") //全局匹配连接
                    .replace(
                        /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|jfif|gif))\S+/g,
                        "🔗"
                    ); //全局匹配纯文本连接
        result += `<li class="item"><span class="datetime">${bbTime}</span> : <a href="/say/" target= "_blank" >${newbbCont}</a></li>`;
    }
    var bbBefore = `<span class="index-talk-icon"><svg viewBox="0 0 1024 1024" width="21" height="21"><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 + '&nbsp' + 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)
},3000)
}
    
});

创建 CSS 文件

#memos-say {
    display: flex;

}

.index-talk {
    display: flex;
    flex: 1 auto;
    width: 100%;
    text-align: left;
    position: relative;
}

.talk-list {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.talk-list li {
    list-style: none;
    margin-bottom: 10px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline;
    vertical-align: middle;
}

.talk-list li:not(:first-child) {
    display: none !important;
}

.talk-list li a:hover {
    text-decoration: none;
    color: #1890ff;
}

.talk-wrap{
    width:98%;
}

CSS 请根据自己的主题等修改。

创建 CSS 选择器

在你需要的地方创建 CSS 选择器，并引入 CSS 和 JS 文件

<div id="memos-say"></div>
<link rel="stylesheet" href="https://www.catchwang.com/wp-resources/says/css/style_home.css">
<script src="//tokinx.github.io/lately/lately.min.js"></script>
<script type="text/javascript" src="https://www.catchwang.com/wp-resources/says/js/main_home.js"></script>

lately.min.js 这个文件是用来显示相对时间，不引入也可以，这样的话就显示实际的发文时间（把文件替换为自己的文件地址）

WordPress 博客下添加

这个设置只针对 WordPress + 子比主题，其他的应该也大同小异。

只需在首页合适位置添加自定义HTML代码并复制步骤三代码，大功告成。