wyoj-raw/app/controllers/subdomain/blog/archive.php

<?php
	requirePHPLib('form');

	if (!UOJContext::userid())
		$blogs_cond = "is_draft = false";
	else
		$blogs_cond = "poster = '".UOJContext::userid()."' and is_draft = false";
	if (!UOJContext::hasBlogPermission()) {
		$blogs_cond .= " and is_hidden = false";
	}
	
	$display_blogs_cond = $blogs_cond;
	
	if (isset($_GET['tag'])) {
		$blog_tag_required = $_GET['tag'];
		$display_blogs_cond .= " and '".DB::escape($blog_tag_required)."' in (select tag from blogs_tags where blogs_tags.blog_id = blogs.id)";
	} else {
		$blog_tag_required = null;
	}
	
	$blogs_pag = new Paginator(array(
		'col_names' => array('*'),
		'table_name' => 'blogs',
		'cond' => $display_blogs_cond,
		'tail' => 'order by post_time desc',
		'page_len' => 10
	));
	
	$all_tags = DB::selectAll("select distinct tag from blogs_tags where blog_id in (select id from blogs where $blogs_cond)");
	
	requireLib('mathjax');
	requireLib('hljs');
?>
<?php echoUOJPageHeader('日志') ?>

<div class="row">
	<div class="col-12 col-lg-9">
		<div class="blog-list">
		<?php if (!$blog_tag_required): ?>
			<?php if ($blogs_pag->isEmpty()): ?>
			<div class="text-muted">此人很懒，什么博客也没留下。</div>
			<?php else: ?>
			<?php foreach ($blogs_pag->get() as $blog): ?>
				<?php echoBlog($blog, array('is_preview' => true)) ?>
			<?php endforeach ?>
			<?php endif ?>
		<?php else: ?>
			<?php if ($blogs_pag->isEmpty()): ?>
			<div class="alert alert-danger">
				没有找到包含 “<?= HTML::escape($blog_tag_required) ?>” 标签的博客：
			</div>
			<?php else: ?>
			<div class="alert alert-success" style="">
				共找到 <?= $blogs_pag->n_rows ?> 篇包含 “<?= HTML::escape($blog_tag_required) ?>” 标签的博客：
			</div>
			<?php foreach ($blogs_pag->get() as $blog): ?>
				<?php echoBlog($blog, array('is_preview' => true)) ?>
			<?php endforeach ?>
			<?php endif ?>
		<?php endif ?>
		</div>
		<div id="blog-feed-loading" class="wyoj-blog-feed-loading text-center text-muted top-buffer-sm" style="display: none;">
			<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"></span>
			<span class="align-middle ml-2">正在加载…</span>
		</div>
		<div id="blog-feed-end" class="text-center text-muted top-buffer-sm" style="display: none;">没有更多了</div>
		<div id="blog-feed-error" class="text-center top-buffer-sm" style="display: none;">
			<span class="text-danger">加载失败</span>
			<a href="#" id="blog-feed-retry" class="ml-2">重试</a>
		</div>
	</div>
	<div class="col-12 col-lg-3">
		<?php uojIncludeView('blog-sidebar', array(
			'owner' => UOJContext::userid(),
			'show_write_buttons' => true,
			'show_tags' => true,
			'all_tags' => $all_tags
		)) ?>
	</div>
</div>
<script>
	(function () {
		let currentPage = 1, isLoading = false, hasMore = true, failed = false;
		const blogList = document.querySelector('.blog-list');
		const itemSelector = '.blog-item';
		const tag = (new URLSearchParams(window.location.search)).get('tag');
		const feedBase = window.location.pathname;
		const loadingEl = document.getElementById('blog-feed-loading');
		const endEl = document.getElementById('blog-feed-end');
		const errorEl = document.getElementById('blog-feed-error');
		const retryEl = document.getElementById('blog-feed-retry');

		const initialItems = blogList.querySelectorAll(itemSelector).length;
		if (initialItems < 10)
			hasMore = false;
		if (!hasMore && initialItems > 0)
			endEl.style.display = 'block';

		function bindExpand(item) {
			const content = item.querySelector('.blog-content');
			if (!content) return;
			content.addEventListener('click', (e) => {
				if (e.target && e.target.closest && e.target.closest('a')) return;
				content.classList.add('uoj-clamp-open');
			});
		}

		document.querySelectorAll(itemSelector).forEach(bindExpand);

		async function loadPage(page) {
			if (isLoading || !hasMore || failed) return;
			isLoading = true;
			errorEl.style.display = 'none';
			loadingEl.style.display = 'block';

			const url = !tag ? `${feedBase}?page=${page}` : `${feedBase}?page=${page}&tag=${encodeURIComponent(tag)}`;
			try {
				const resp = await fetch(url);
				if (!resp.ok) throw new Error('HTTP ' + resp.status);
				const html = await resp.text();
				const parser = new DOMParser();
				const doc = parser.parseFromString(html, 'text/html');
				const items = doc.querySelectorAll(itemSelector);
				if (items.length == 0) {
					hasMore = false;
				} else {
					items.forEach(item => { blogList.appendChild(item); bindExpand(item); });
					currentPage = page;
					if (items.length < 10)
						hasMore = false;

					MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
					hljs.highlightAll();
					$('body').uoj_highlight();
				}
			} catch (err) {
				failed = true;
				console.log('加载失败', err);
			} finally {
				isLoading = false;
				loadingEl.style.display = 'none';
				if (failed) {
					errorEl.style.display = 'block';
				} else if (!hasMore) {
					endEl.style.display = 'block';
				}
			}
		}

		retryEl.addEventListener('click', (e) => {
			e.preventDefault();
			if (isLoading) return;
			failed = false;
			errorEl.style.display = 'none';
			loadPage(currentPage + 1);
		});

		window.addEventListener('scroll', () => {
			if (isLoading || !hasMore || failed) return;
			const scrollTop = document.documentElement.scrollTop;
			const windowHeight = window.innerHeight;
			const docHeight = document.documentElement.scrollHeight;
			if (scrollTop + windowHeight >= docHeight - 200)
				loadPage(currentPage + 1);
		});
	})();
</script>
<?php echoUOJPageFooter() ?>