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-md-3">
		<?php if (UOJContext::hasBlogPermission()): ?>
		<div class="btn-group d-flex">
			<a href="<?=HTML::blog_url(UOJContext::userid(), '/post/new/write')?>" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> 写新博客</a>
			<a href="<?=HTML::blog_url(UOJContext::userid(), '/slide/new/write')?>" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> 写新幻灯片</a>
		</div>
		<?php endif ?>
		<div class="card border-info top-buffer-sm">
			<div class="card-header bg-info">标签</div>
			<div class="card-body">
			<?php if ($all_tags): ?>
			<?php foreach ($all_tags as $tag): ?>
				<?php echoBlogTag($tag['tag']) ?>
			<?php endforeach ?>
			<?php else: ?>
				<div class="text-muted">暂无</div>
			<?php endif ?>
			</div>
		</div>
	</div>
	<div class="col-md-9 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 ?>
<div class="text-right text-muted" style="display: none;">共 <?= $blogs_pag->n_rows ?> 篇博客</div>
			<?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>
	<script>
		(function () {
			let currentPage = 1, isLoading = false, hasMore = true;
			const blogList = document.querySelector('.blog-list');
			const itemSelector = '.blog-item';
			const tag = (new URLSearchParams(window.location.search)).get('tag');

			if (blogList.querySelectorAll('.blog-item').length < 10)
				hasMore = false;

			function extractSummary(html) {
				const div = document.createElement('div');
				div.innerHTML = html;
				let text = div.textContent || div.innerText || '';
				text = text.replace(/\s+/g, ' ').trim();
				return text;
			}

			function collapseArticle(post) {
				const content = post.querySelector('.blog-content');
				const divorig = post.querySelector('.blog-content-orig');
				const divsummary = post.querySelector('.blog-content-summary');

				let summary = extractSummary(divorig.innerHTML);
				const maxLen = 150;

				if (summary.length < maxLen) return;
				summary = summary.slice(0, maxLen) + '……';
				divsummary.innerHTML = summary;

				divsummary.style.display = 'block';
				divorig.style.display = 'none';
				content.classList.add('collapsed');

				content.addEventListener('click', () => {
					divsummary.style.display = 'none';
					divorig.style.display = 'block';
					content.classList.remove('collapsed');
					content.classList.add('expand');
				});
			}

			document.querySelectorAll('.blog-item').forEach(collapseArticle);

			async function loadPage(page) {
				if (isLoading || !hasMore) return;
				isLoading = true;

				const url = !tag ? `/?page=${page}` : `/?page=${page}&tag=${tag}`;
				try {
					const resp = await fetch(url);
					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;
						return;
					}
					items.forEach(item => { blogList.appendChild(item); collapseArticle(item); });
					if (items.length < 10)
						hasMore = false;

					MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
					hljs.highlightAll();
					$('body').uoj_highlight();
				} catch (err) {
					console.log('加载失败', err);
				} finally {
					isLoading = false;		
				}
			}
			window.addEventListener('scroll', () => {
				const scrollTop = document.documentElement.scrollTop;
				const windowHeight = window.innerHeight;
				const docHeight = document.documentElement.scrollHeight;
				if (scrollTop + windowHeight >= docHeight - 200 && !isLoading && hasMore)
					loadPage(++currentPage);
			});
		})();
	</script>
</div>
<?php echoUOJPageFooter() ?>