farallon/page-memos.php

135 lines
4.7 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
/**
* 说说页面
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<div class="site--main">
<header class="archive--header">
<h1 class="post--single__title"><?php $this->title() ?></h1>
</header>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<div id="talk"></div>
<script>
if (99) {
let url = '<?php $this->options->memos() ?>';
fetch(url + '/api/v1/memo?creatorId=<?php $this->options->memosID() ?>&rowStatus=NORMAL&limit=20')
.then(res => res.json())
.then(data => {
let html = '';
let baseURL = '<?php $this->options->memos() ?>';
data.forEach(item => {
// 假设这里的 Format 函数能正确地格式化每个 item并确保它返回有 `date` 和 `tag` 的对象
let data = Format(item);
let memoURL = baseURL + '/m/' + item.id;
html += `
<article class='post--item post--item__status'>
<div class='content'>
<header>
<img src="<?php $this->options->logoUrl() ?>" class="avatar" width="48" height="48" />
<a class="humane--time" href="${memoURL}" target="_blank">${data.date}</a>
</header>
<div class="description" itemprop="about">
<span class="talk_tag"># ${data.tag}</span><br>
${data.content}
</div>
</div>
</article>
`;
});
if (data.length >= 20) document.querySelector('.limit').style.display = 'block';
document.getElementById('talk').innerHTML = html;
})
.catch(error => {
console.error('Error:', error);
// 这里可以添加一些用户提示错误发生的 HTML 更新
});
// 页面内容格式化
function Format(item) {
let date = getTime(new Date(item.createdTs * 1000).toString()),
content = item.content,
tag = item.content.match(/#([^\s#]+?) /g),
imgs = content.match(/!\[.*\]\(.*?\)/g),
text = ''
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}`)
})
}
text = content.replace(/#(.*?)\s/g, '').replace(/\!?\[(.*?)\]\((.*?)\)/g, '').replace(/\{(.*?)\}/g, '')
content = text.replace(/\[(.*?)\]\((.*?)\)/g, `<a href="$2" target="_blank">$1</a>`);
if (imgs) {
content += `<div class="resimg">`
imgs.forEach(e => content += `<a href="${e}" data-fancybox="gallery" class="fancybox img" data-thumb="${e}"><img class="no-lazyload thumbnail-image" src="${e}"></a>`
)
content += '</div>'
}
return {
content: content,
tag: tag ? tag[0].replace(/#([^\s#]+?) /,'$1') : '无标签',
date: date,
text: text.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]' + `${imgs?'[图片]':''}`)
}
}
// 页面时间格式化
function getTime(time) {
let d = new Date(time),
ls = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
for (let i = 0; i < ls.length; i++) {
ls[i] = ls[i] <= 9 ? '0' + ls[i] : ls[i] + ''
}
if (new Date().getFullYear() == ls[0]) return ls[1] + '月' + ls[2] + '日 ' + ls[3] +':'+ ls[4]
else return ls[0] + '年' + ls[1] + '月' + ls[2] + '日 ' + ls[3] +':'+ ls[4]
}
}
Fancybox.bind("[data-fancybox]", {
// Your custom options
});
</script>
<style>
.thumbnail-image {
width:100%;
height: 200px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.resimg {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
}
.thumbnail-image img {
width:100%;
height:170px;
object-fit:cover;
border-radius:4px;
transition:transform .3s ease;
cursor:zoom-in
}
/* 当屏幕宽度小于732px时 */
@media (max-width: 732px) {
.resimg {
grid-template-columns: repeat(2, 1fr); /* 修改为两列 */
}
}
/* 当屏幕宽度小于400px时 */
@media (max-width: 400px) {
.resimg {
grid-template-columns: 1fr; /* 修改为一列 */
}
}
</style>
</div>
<?php $this->need('footer.php'); ?>