Blog/themes/blog/talk.html

{{template "header" .}}
    <div class="sub-title">- {{ .Title }} -</div>
<style>
    /* 页面初始化 */
    div#page {
        background: none;
        border: 0;
        padding: 0;
    }

    [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: var(--card-bg);
        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:hover,
    .tk-comments-container>.tk-comment:hover,
    .tk-submit:nth-child(1):hover {
        border-color: var(--primary,#673ab7);;
    }

    .tk-submit {
        padding: 20px 10px 0;
    }

    .tk-comments-container>.tk-comment {
        padding: 15px;
    }

    /* 页面初始化结束 */

    #talk{
        margin-top: 1rem;
    }

    #talk .loading {
        /*vertical-align: middle;*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        background-color:var(--primary,#673ab7);
    }

    #talk .loading img {
        height: 60px;
        width: 60px;
    }

    .talk_item {
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin-bottom: 15px;
    }

    .avatar {
        margin: 0 !important;
        width: 60px;
        height: 60px;
        border-radius: 10px;
    }


    .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 {
        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: var(--w);
        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 .icon {
        color: var(--primary,#673ab7);
        float: right;
        transition: all .3s;
    }

    .talk_bottom .icon:hover {
        color: #49b1f5;
    }

    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: var(--primary,#673ab7);
    }
    @media screen and (max-width: 900px) {
        .zone_imgbox {
            --w: calc(33% - 5px);
        }
        #talk{
            margin: 10px 3px 0
        }
        #post-comment{
            margin: 0 3px
        }
    }

    @media screen and (max-width: 768px) {
        .zone_imgbox {
            gap: 6px;
        }
        .zone_imgbox {
            --w: calc(50% - 3px);
        }
        span.talk_date {
            font-size: 14px;
        }
    }
</style>

<div id="talk">
    <div class='loading'><img src="/public/img/loading.svg" alt="加载中...">
        <a>加载中...</a>
    </div>
</div>

<div class="limit">- 只展示最近30条说说 -</div>
<script>
    function Format(item) {
        let date = getTime(new Date(item.createdTs * 1000).toString()),
            content = item.content,
            imgs = content.match(/!\[.*\]\(.*?\)/g),
            musics = content.match(/{\s*music\s*(.*)\s*}/g),
            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, '')
        let text = content.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]').trim();
        content = content.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="no-lazyload talk-img" src="${e}"></a>`)
            content += '</div>'
        }
        if (musics) musics.forEach(item => {
            content += `<meting-js auto="${item.replace(/{\s*music\s*(.*)\s*}/, '$1')}" theme="var(--leonus-main)" 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, date, text}
    }
    function getTime(time) {
        var nol = function (h) {
            return h > 9 ? h : '0' + h
        }
        var now = new Date()
        var yesterday = new Date(now.getTime() - (1000 * 60 * 60 * 24)).toLocaleDateString()
        var twoDaysAgo = new Date(now.getTime() - 2 * (1000 * 60 * 60 * 24)).toLocaleDateString()
        let d = new Date(time),
            ls = [d.getFullYear(), nol(d.getMonth() + 1), nol(d.getDate()), nol(d.getHours()), nol(d.getMinutes()), nol(d.getSeconds())],
            day = d.toLocaleDateString()
        if (day === now.toLocaleDateString()) {
            return '今天 ' + ls[3] + ':' + ls[4]
        } else if (day === yesterday) {
            return '昨天 ' + ls[3] + ':' + ls[4]
        } else if (day === twoDaysAgo) {
            return '前天 ' + ls[3] + ':' + ls[4]
        } else {
            if (now.getFullYear() == ls[0]) return ls[1] + '月' + ls[2] + '日 ' + ls[3] + ':' + ls[4]
            else return ls[0] + '年' + ls[1] + '月' + ls[2] + '日 ' + ls[3] + ':' + ls[4]
        }
    }

    fetch('{{ .Data.url }}/api/v1/memo?creatorId={{ .Data.user }}&tag={{ .Data.tag }}&limit=30').then(res => res.json()).then(data => {
        let items = [], html = ''
        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">';
            html += "<img class=\"no-lightbox no-lazyload avatar\" src=\"https://q1.qlogo.cn/g?b=qq&nk={{ .Data.qq }}&s=5\">";
            html += `<div class="info"><span class="talk_nick">Leonus</span><span class="talk_date">${item.date}</span>`;
            html += `</div></div><div class="talk_content">${item.content}</div></div>`;
        })
        document.getElementById('talk').innerHTML = html;
        imgStatus.watch('.talk-img', () => { waterfall('#talk')});
    })
</script>
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/waterfall.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/imgStatus.min.js"></script>
{{template "footer" .}}