280 lines
8.3 KiB
HTML
280 lines
8.3 KiB
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"><img class="no-lightbox no-lazyload avatar" src="https://q1.qlogo.cn/g?b=qq&nk={{ .Data.qq }}&s=5"><div class="info"><span class="talk_nick">Leonus</span><span class="talk_date">${item.date}</span></div><a href="javascript:;" class="goComment" onclick="goComment('${item.text}')"><span class="icon"><i class="fa-solid fa-message fa-fw"></i></span></a></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" .}}
|