Blog/themes/blog/talk.gohtml

{{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){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{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);
            codes = content.match(/```(.*)```/igs);
        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(/```(.*)```/igs, '')
        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>`
        })
        if (codes) codes.forEach(item => {
            content +=marked(item);
        })
        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">{{ .Data.author }}</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" .}}