寒石论坛

代码： 全选

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui/dist/fancybox.css">
<style>
  .memo-item {border:1px solid #ddd; border-radius:8px; padding:10px; margin-bottom:12px;}
  .memo-header {display:flex; justify-content:space-between; font-size:12px; color:#666; margin-bottom:6px;}
  .memo-body {font-size:14px; line-height:1.6;}
  .memo-resources {display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
  .memo-resources.single img {width:100%; border-radius:6px;}
  .memo-resources.double img {width:calc(50% - 3px); border-radius:6px;}
  .memo-resources.multi img {width:calc(50% - 3px); border-radius:6px;}
  .memo-location {font-size:12px; margin-top:6px; color:#888;}
  .memos-load-more {display:block; margin:10px auto; padding:6px 12px; border:1px solid #ccc; border-radius:6px; background:#f7f7f7; cursor:pointer;}
</style>

<div id="memo-container"></div>
<button id="memosLoadMore" class="memos-load-more">加载更多</button>

<!-- 引入依赖 -->
<script src="https://cdn.jsdmirror.com/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdmirror.com/npm/dompurify/dist/purify.min.js"></script>
<script src="https://cdn.jsdmirror.com/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<script>
var MEMO_DOMAIN = ''; // 你的 Memos 域名
var pageSize = 3;
var nextPageToken = '';
var isLoading = false;

function getResourceUrl(res) {
  if (res.externalLink) return res.externalLink;
  return `${MEMO_DOMAIN}/file/${encodeURIComponent(res.name)}/${encodeURIComponent(res.filename)}`;
}

function renderResources(resources, name) {
  if (!resources.length) return '';

  // 判断图片数量
  const images = resources.filter(r => r.type.startsWith('image/'));
  const others = resources.filter(r => !r.type.startsWith('image/'));

  let cls = '';
  if (images.length === 1) cls = 'single';
  else if (images.length === 2) cls = 'double';
  else if (images.length > 2) cls = 'multi';

  let html = '';
  if (images.length) {
    html += `<div class="memo-resources ${cls}">`;
    html += images.map(img => {
      const url = getResourceUrl(img);
      return `<img src="${url}" alt="${img.filename}" data-fancybox="${name}">`;
    }).join('');
    html += `</div>`;
  }

  if (others.length) {
    html += `<div class="memo-resources files">`;
    html += others.map(file => {
      const url = getResourceUrl(file);
      return `<div><a href="${url}" target="_blank">📄 ${file.filename}</a></div>`;
    }).join('');
    html += `</div>`;
  }

  return html;
}

function renderLocation(loc) {
  if (!loc) return '';
  return `<div class="memo-location">📍 ${loc.placeholder || ''}</div>`;
}

function renderMemo(memo) {
  const content = DOMPurify.sanitize(marked.parse(memo.content));
  return `
    <div class="memo-item">
      <div class="memo-header">
        <span>${memo.creator}</span>
        <span>${new Date(memo.displayTime).toLocaleString('zh-CN')}</span>
      </div>
      <div class="memo-body">
        ${content}
        ${memo.resources?.length ? renderResources(memo.resources, memo.name) : ''}
        ${renderLocation(memo.location)}
      </div>
    </div>
  `;
}

async function loadMemos() {
  if (isLoading || nextPageToken === null) return;
  const btn = document.getElementById('memosLoadMore');
  btn.disabled = true;
  btn.innerText = '加载中...';
  isLoading = true;

  try {
    const params = new URLSearchParams({ pageSize });
    if (nextPageToken) params.set('pageToken', nextPageToken);

    const res = await fetch(`${MEMO_DOMAIN}/api/v1/memos?${params}`);
    if (!res.ok) throw new Error("加载失败");
    const data = await res.json();

    const container = document.getElementById('memo-container');
    data.memos.forEach(m => {
      container.insertAdjacentHTML('beforeend', renderMemo(m));
    });

    nextPageToken = data.nextPageToken || null;
    btn.innerText = nextPageToken ? '加载更多' : '没有更多了';
    btn.disabled = !nextPageToken;
  } catch (err) {
    console.error(err);
    btn.innerText = '加载失败';
  } finally {
    isLoading = false;
  }
}

document.getElementById('memosLoadMore').addEventListener('click', loadMemos);
loadMemos();
</script>