更新 index.html
This commit is contained in:
jkjoy
parent
4b46688a3d
commit
174a1e538b
|
|
@ -1,127 +1,127 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh">
|
<html lang="zh">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Mastodon</title>
|
<title>Mastodon</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jkjoy/memos/css/style.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jkjoy/memos/css/style.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jkjoy/memos@0.5/css/uno.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jkjoy/memos@0.5/css/uno.css">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
|
<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" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
|
||||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://cdn.imsun.org/lxgw-wenkai-screen-webfont/lxgwwenkaigbscreen.css" />
|
<link rel="stylesheet" href="https://cdn.imsun.org/lxgw-wenkai-screen-webfont/lxgwwenkaigbscreen.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="bg-[#f0f0f0]">
|
<div class="bg-[#f0f0f0]">
|
||||||
<div>
|
<div>
|
||||||
<div class="bg-white mx-auto main-container">
|
<div class="bg-white mx-auto main-container">
|
||||||
<header class="top">
|
<header class="top">
|
||||||
<div class="fixed top-0 left-0 w-full h-14 z-9">
|
<div class="fixed top-0 left-0 w-full h-14 z-9">
|
||||||
<div class="main-container mx-auto flex flex-row justify-between h-full transition-all duration-300" id="top-fixed">
|
<div class="main-container mx-auto flex flex-row justify-between h-full transition-all duration-300" id="top-fixed">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<span class="h-full px-5 flex items-center"> </span>
|
<span class="h-full px-5 flex items-center"> </span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<span class="h-full px-5 flex items-center"> </span>
|
<span class="h-full px-5 flex items-center"> </span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-1">
|
<div class="top-1">
|
||||||
<div class="flex flex-row items-end">
|
<div class="flex flex-row items-end">
|
||||||
<a href="/"> <img src="https://img.imsun.org/avatar.jpg" /></a>
|
<a href="/"> <img src="https://img.imsun.org/avatar.jpg" /></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-2">
|
<div class="top-2">
|
||||||
<div class="flex flex-row items-end">浪子</div>
|
<div class="flex flex-row items-end">浪子</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="article-container">
|
<div class="article-container">
|
||||||
<div id="memos-container"></div>
|
<div id="memos-container"></div>
|
||||||
<button id="load-more" class="load-more-btn">加载更多</button>
|
<button id="load-more" class="load-more-btn">加载更多</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
let offset = 0; // 初始偏移量
|
let offset = 0; // 初始偏移量
|
||||||
const limit = 10; // 每次加载的数量
|
const limit = 10; // 每次加载的数量
|
||||||
|
|
||||||
function formatHTML(toots) {
|
function formatHTML(toots) {
|
||||||
let htmlString = '';
|
let htmlString = '';
|
||||||
toots.forEach(toot => {
|
toots.forEach(toot => {
|
||||||
const { content, account, created_at, url, media_attachments } = toot;
|
const { content, account, created_at, url, media_attachments } = toot;
|
||||||
let mediaHTML = ''; // 初始化资源相关HTML为空字符串
|
let mediaHTML = ''; // 初始化资源相关HTML为空字符串
|
||||||
|
|
||||||
// 处理媒体附件
|
// 处理媒体附件
|
||||||
if (media_attachments.length > 0) {
|
if (media_attachments.length > 0) {
|
||||||
media_attachments.forEach(attachment => {
|
media_attachments.forEach(attachment => {
|
||||||
if (attachment.type === 'image') {
|
if (attachment.type === 'image') {
|
||||||
mediaHTML += `<a href="${attachment.url}" target="_blank"><img src="${attachment.preview_url}" data-fancybox="img" class="thumbnail-image img"></a>`;
|
mediaHTML += `<a href="${attachment.url}" target="_blank"><img src="${attachment.preview_url}" data-fancybox="img" class="thumbnail-image img"></a>`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 使用 marked 转换 markdown 内容为 HTML
|
// 使用 marked 转换 markdown 内容为 HTML
|
||||||
const htmlContent = marked.parse(content);
|
const htmlContent = marked.parse(content);
|
||||||
|
|
||||||
// 创建 HTML 字符串
|
// 创建 HTML 字符串
|
||||||
htmlString += `
|
htmlString += `
|
||||||
<article class="flex flex-row border-b border-b-2 dark:border-gray-800 border-gray-200 pt-5 pl-5 pr-5">
|
<article class="flex flex-row border-b border-b-2 dark:border-gray-800 border-gray-200 pt-5 pl-5 pr-5">
|
||||||
<div class="mr-3">
|
<div class="mr-3">
|
||||||
<div class="w-9 h-9">
|
<div class="w-9 h-9">
|
||||||
<img src="${account.avatar}" class="w-9 h-9 object-cover rounded-lg preview-image" />
|
<img src="${account.avatar}" class="w-9 h-9 object-cover rounded-lg preview-image" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full border-t-0 border-l-0 border-r-0 border-b-1 dark:border-gray-800 border-gray-100 border-solid pb-1">
|
<div class="w-full border-t-0 border-l-0 border-r-0 border-b-1 dark:border-gray-800 border-gray-100 border-solid pb-1">
|
||||||
<section class="flex flex-row justify-between items-center mb-1">
|
<section class="flex flex-row justify-between items-center mb-1">
|
||||||
<span class="text-color-link cursor-default text-[14px]">
|
<span class="text-color-link cursor-default text-[14px]">
|
||||||
<a href="${account.url}" target="_blank" class="cursor-pointer text-color-link no-underline">${account.display_name}</a>
|
<a href="${account.url}" target="_blank" class="cursor-pointer text-color-link no-underline">${account.display_name}</a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section class="mb-1 cursor-default break-all line-clamp">
|
<section class="mb-1 cursor-default break-all line-clamp">
|
||||||
<p>${htmlContent}</p>
|
<p>${htmlContent}</p>
|
||||||
<div class="resimg">${mediaHTML}</div>
|
<div class="resimg">${mediaHTML}</div>
|
||||||
<div class="text-gray text-xs"><a href="${url}" target="_blank" class="cursor-pointer text-color-link no-underline">${new Date(created_at).toLocaleString()}</a></div>
|
<div class="text-gray text-xs"><a href="${url}" target="_blank" class="cursor-pointer text-color-link no-underline">${new Date(created_at).toLocaleString()}</a></div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>`;
|
</article>`;
|
||||||
});
|
});
|
||||||
return htmlString;
|
return htmlString;
|
||||||
}
|
}
|
||||||
|
|
||||||
function fetchToots() {
|
function fetchToots() {
|
||||||
return fetch('https://bbapi.ima.cm')
|
return fetch('https://bbapi.ima.cm')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error('Error fetching toots:', error);
|
console.error('Error fetching toots:', error);
|
||||||
return [];
|
return [];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function fetchAndDisplayToots() {
|
function fetchAndDisplayToots() {
|
||||||
fetchToots().then(data => {
|
fetchToots().then(data => {
|
||||||
const memosContainer = document.getElementById('memos-container');
|
const memosContainer = document.getElementById('memos-container');
|
||||||
const tootsToShow = data.slice(offset, offset + limit); // 选择要显示的toots
|
const tootsToShow = data.slice(offset, offset + limit); // 选择要显示的toots
|
||||||
memosContainer.innerHTML += formatHTML(tootsToShow);
|
memosContainer.innerHTML += formatHTML(tootsToShow);
|
||||||
offset += limit; // 更新偏移量
|
offset += limit; // 更新偏移量
|
||||||
// 如果没有更多的toots，隐藏“加载更多”按钮
|
// 如果没有更多的toots，隐藏“加载更多”按钮
|
||||||
if (offset >= data.length) {
|
if (offset >= data.length) {
|
||||||
document.getElementById('load-more').style.display = 'none';
|
document.getElementById('load-more').style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 在页面加载完成后获取并展示 toots
|
// 在页面加载完成后获取并展示 toots
|
||||||
fetchAndDisplayToots();
|
fetchAndDisplayToots();
|
||||||
|
|
||||||
// 绑定“加载更多”按钮的点击事件
|
// 绑定“加载更多”按钮的点击事件
|
||||||
document.getElementById('load-more').addEventListener('click', fetchAndDisplayToots);
|
document.getElementById('load-more').addEventListener('click', fetchAndDisplayToots);
|
||||||
};
|
};
|
||||||
|
|
||||||
Fancybox.bind("[data-fancybox]", {
|
Fancybox.bind("[data-fancybox]", {
|
||||||
// Your custom options
|
// Your custom options
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue