新增memo页面基于memos
This commit is contained in:
浪子
parent
cc3611d417
commit
5d3bd41e10
|
|
@ -23,7 +23,10 @@ function themeConfig($form) {
|
||||||
$form->addInput($cnavatar);
|
$form->addInput($cnavatar);
|
||||||
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'));
|
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'));
|
||||||
$form->addInput($donate);
|
$form->addInput($donate);
|
||||||
|
$memos = new Typecho_Widget_Helper_Form_Element_Text('memos', NULL, 'https://m.loliko.cn', _t('memos地址结尾不带"/"'));
|
||||||
|
$form->addInput($memos);
|
||||||
|
$memosID = new Typecho_Widget_Helper_Form_Element_Text('memosID', NULL, '1', _t('memosID'));
|
||||||
|
$form->addInput($memosID);
|
||||||
|
|
||||||
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'));
|
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'));
|
||||||
$form->addInput($twikoo);
|
$form->addInput($twikoo);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
<?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'); ?>
|
||||||
Loading…
Reference in New Issue