Blog/themes/blog/reader.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
    }


    span.talk_date {
        opacity: .6
    }

    .talk_content {
        line-height: 1.5;
        margin-top: 10px
    }


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

    .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);
        display: none;
        justify-content: center;
    }

    .limit button {
        display: inline-block;
        border-radius: 4px;
        font-size: 9pt;
        background: var(--primary, #673ab7);
        border: 1px solid lightgrey;
    }

    [data-theme=dark] .limit {
        color: rgba(255, 255, 255, 0.5)
    }

    @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
        }
    }

    .downloadBtn {
        display: flex;
        background: var(--primary, #673ab7);
        color: white;
        padding: 4px 8px;
        margin: 2px 0;
        border-radius: 5px;
        cursor: pointer;
        font-size: 12pt;
        border: none;
        box-shadow: 0 2px 2px 0 rgb(0 40 56 / 15%);
        font-weight: bold;
        transition: box-shadow 300ms ease-in;
        text-decoration: none;
    }

</style>

<div id="talk">
    <div class='loading'><img src="/public/img/loading.svg" alt="加载中...">
        <a>加载中...</a>
    </div>
</div>
<div class='limit'><button onclick='loadMemo(-1)'>上一页</button> <button onclick='loadMemo(1)'>下一页</button></div>
<script>
    function Format(item) {
        let date = getTime(new Date(item.createdTs * 1000).toString()),
            content = item.content,
            id = item.id,
            name = item.name,
            codes = content.match(/```(.*)```/igs);
        content = content.replace(/#(.*?)\s/g, '').replace(/{.*}/g, '').replace(/\!\[(.*?)\]\((.*?)\)/g, '').replace(/```(.*)```/igs, '')
        let text = `<a href="{{ .Data.url }}/m/${name}">原文地址</a>`;
        if (codes) codes.forEach(item => {
            content += `<div style="display: flex;"><a type="button" class="downloadBtn" href="legado://import/auto?src=${window.location.origin}/api/memos?id=${id}">一键导入</a>`
            content += ` <a type="button" class="downloadBtn" href="${window.location.origin}/api/memos?id=${id}">下载文件</a></div>`
            // 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]
        }
    }

    var offset = 0;
    let limit =30;
    function loadMemo(p) {
        offset += p*limit;
        if (offset < 1) {
            offset = 0;
        }
        fetch('{{ .Data.url }}/api/v1/memo?creatorId={{ .Data.user }}&tag={{ .Data.tag }}&limit='+limit+'&offset=' + offset)
            .then(res => res.json())
            .then(data => {
                let items = [], html = '';
                data.forEach(item => {
                    items.push(Format(item));
                });
                if (items.length === limit) {
                    document.querySelector('.limit').style.display = 'flex';
                }
                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>${item.text}</div>`;
                });
                if(items.length!==0){
                    document.getElementById('talk').innerHTML = '';
                    document.getElementById('talk').insertAdjacentHTML('afterbegin', html);
                    waterfall('#talk');
                }else {
                    document.getElementById('talk').innerHTML = '<span>无数据</span>';
                }
            });
    }
    loadMemo(0);
</script>
<script src="/public/js/prism.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/waterfall.min.js"></script>
{{template "footer" .}}