farallon/page-memos.php

155 lines
5.4 KiB
PHP
Raw Normal View History

2024-05-24 09:56:49 +08:00
<?php
/**
2024-06-05 08:03:03 +08:00
* 说说页面 - memos
2024-05-24 09:56:49 +08:00
*
* @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>
2024-06-05 15:59:42 +08:00
<h2 class="post--single__subtitle"><?php $this->content(); ?> </h2>
2024-05-24 09:56:49 +08:00
</header>
2024-06-05 08:03:03 +08:00
<?php
// 检查是否存在自定义字段 'memos' 和 'memosID'
$memos = $this->fields->memos ? $this->fields->memos : 'https://memos.loliko.cn';
$memosID = $this->fields->memosID ? $this->fields->memosID : '1';
$memosnum = $this->fields->memosnum ? $this->fields->memosnum : '20';
?>
<article class="post--single">
2024-05-24 15:11:11 +08:00
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
2024-05-24 09:56:49 +08:00
<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>
2024-06-05 08:03:03 +08:00
</article>
2024-05-24 09:56:49 +08:00
<script>
2024-06-16 10:24:28 +08:00
if (99) {
2024-06-05 08:03:03 +08:00
let url = '<?php echo $memos; ?>';
fetch(url + '/api/v1/memo?creatorId=<?php echo $memosID; ?>&rowStatus=NORMAL&limit=<?php echo $memosnum; ?>')
2024-05-24 09:56:49 +08:00
.then(res => res.json())
.then(data => {
let html = '';
data.forEach(item => {
let data = Format(item);
2024-05-24 15:11:11 +08:00
let memoURL = url + '/m/' + item.id;
let mdContent = marked.parse(data.content);
2024-05-24 09:56:49 +08:00
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>
2024-05-24 15:56:49 +08:00
<div class="description" itemprop="about">
2024-05-24 15:11:11 +08:00
${mdContent}
2024-06-16 11:09:22 +08:00
<span class="tag--list"><a>${data.tag}</a></span>
2024-05-24 09:56:49 +08:00
</div>
</div>
</article>
`;
});
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,
2024-05-24 15:11:11 +08:00
tag: tag ? tag[0].replace(/#([^\s#]+?) /,'$1') : '日常',
2024-05-24 09:56:49 +08:00
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>
2024-05-24 15:36:17 +08:00
div pre code {
/* 迫使文字断行 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* 老版本的浏览器 */
overflow-wrap: break-word;
/* 指定如何断行 */
word-break: break-all;
word-break: break-word;
}
div p a {
2024-06-20 09:38:13 +08:00
word-break: break-all;
2024-05-24 15:36:17 +08:00
word-break: break-word;
}
2024-05-24 09:56:49 +08:00
.thumbnail-image {
width:100%;
height: 200px;
align-items: center;
justify-content: center;
overflow: hidden;
2024-06-20 09:38:13 +08:00
border-radius:4px;
transition:transform .3s ease;
cursor:zoom-in;
2024-05-24 09:56:49 +08:00
}
.resimg {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
}
.thumbnail-image img {
width:100%;
2024-06-20 09:38:13 +08:00
min-height: 200px;
2024-05-24 09:56:49 +08:00
object-fit:cover;
2024-06-20 09:38:13 +08:00
}
img {
object-fit: cover; /* 保持图片的纵横比,但会将图片裁剪以填充容器 */
object-position: center; /* 保证中央部分 */
}
2024-05-24 09:56:49 +08:00
/* 当屏幕宽度小于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'); ?>