跳过正文
  1. Blogs/

Memos API 公告样式滚动效果

·487 字·1 分钟· ·
代码 Memos-Ticker 嘀咕 哔哔 Memos Talk
作者
大大的小蜗牛
机会总是垂青于有准备的人!
Memos - 这篇文章属于一个选集。
§ : 本文

效果参考首页

  1. 首先需要在网页上合适的位置放置一个 CSS 选择器来展示 Memos,ID 命名为 memos 好了。

核心代码:

<div id="memos" class="memos"></div>

参考: index.debug.html#L124

  1. 然后用 JS 把 API 获取到的数据处理成 Json,再展示到 CSS 选择器里:
<!--引入相对时间 Lately 插件-->
<script src="//tokinx.github.io/lately/lately.min.js"></script>

<!--JS 处理 Memos API-->
<script>
    let jsonUrl =
        "https://demo.usememos.com/api/memo?creatorId=101&rowStatus=NORMAL&limit=1&offset=2" +
        "&t=" +
        Date.parse(new Date());

    fetch(jsonUrl)
        .then((res) => res.json())
        .then((resdata) => {
            var result = "",
                resultAll = "",
                data = resdata.data;
            for (var i = 0; i < data.length; i++) {
                var talkTime = new Date(
                    data[i].createdTs * 1000
                ).toLocaleString();
                var talkContent = data[i].content;
                var newtalkContent = talkContent
                    .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">${talkTime}</span>: <a href="https://eallion.com/memos/">${newtalkContent}</a></li>`;
            }
            var talkDom = document.querySelector("#memos");
            var talkBefore = `<i class="iconfont icon-line-quote"></i><div class="talk-wrap"><ul class="talk-list">`;
            var talkAfter = `</ul></div>`;
            resultAll = talkBefore + result + talkAfter;
            talkDom.innerHTML = resultAll;

            // 相对时间
            window.Lately && Lately.init({ target: ".datetime" });
        });

    // 滚动效果
    setInterval(function () {
        var talkWrap = document.querySelector(".talk-list");
        var talkItem = talkWrap.querySelectorAll(".item");
        for (i = 0; i < talkItem.length; i++) {
            setTimeout(function () {
                talkWrap.appendChild(talkItem[0]);
            }, 2000);
        }
    }, 2000);
</script>

参考: static/js/custom.js#L643-L703

相对时间,用的 Lately.js 插件: static/js/custom.js#L587-L640

  1. CSS 参考:
#memos {
    padding-left: 8px;
}

.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;
}

参考: static/css/style.css#L1203-L1240

Memos - 这篇文章属于一个选集。
§ : 本文

相关文章

Memos API 调用渲染页面
·2575 字·6 分钟
代码 Memos-Api 嘀咕 哔哔 Memos Talk
Memos 手动导入数据
·685 字·2 分钟
代码 Memos-Import 嘀咕 哔哔 Memos Talk
Memos 简介
·1449 字·3 分钟
代码 Memos-Deployment 嘀咕 哔哔 Memos Talk

加载评论(Giscus)