refactor: blog_detail page with bs5

web/app/controllers/subdomain/blog/blog.php

@@ -12,6 +12,10 @@
 		become403Page();
 	}
 
+	if (!isset($_COOKIE['bootstrap4'])) {
+		$REQUIRE_LIB['bootstrap5'] = '';
+	}
+	
 	$comment_form = new UOJForm('comment');
 	$comment_form->addVTextArea('comment', '内容', '',
 		function($comment) {
@@ -57,7 +61,6 @@
 		$comment_form->succ_href = getLongTablePageRawUri($page);
 	};
 	$comment_form->ctrl_enter_submit = true;
-	
 	$comment_form->runAtServer();
 	
 	$reply_form = new UOJForm('reply');
@@ -143,11 +146,22 @@
 	?>
 <?php
 	$REQUIRE_LIB['mathjax'] = '';
+	if (isset($REQUIRE_LIB['bootstrap5'])) {
+		$REQUIRE_LIB['hljs'] = '';
+	} else {
 		$REQUIRE_LIB['shjs'] = '';
+	}
 	?>
 <?php echoUOJPageHeader(HTML::stripTags($blog['title']) . ' - 博客') ?>
 <?php echoBlog($blog, array('show_title_only' => isset($_GET['page']) && $_GET['page'] != 1)) ?>
-<h2>评论 <span class="glyphicon glyphicon-comment"></span></h2>
+<h2>
+	评论
+	<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+	<i class="bi bi-chat-fill"></i>
+	<?php else: ?>
+	<span class="glyphicon glyphicon-comment"></span>
+	<?php endif ?>
+</h2>
 <div class="list-group">
 <?php if ($comments_pag->isEmpty()): ?>
 	<div class="list-group-item text-muted">暂无评论</div>
@@ -164,19 +178,63 @@
 		$replies_json = json_encode($replies);
 		?>
 	<div id="comment-<?= $comment['id'] ?>" class="list-group-item">
-		<div class="media">
+		<div class="
-			<div class="media-left comtposterbox mr-3">
+		<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
-				<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="d-none d-sm-block">
+		d-flex
+		<?php else: ?>
+		media
+		<?php endif ?>
+		">
+			<div class="comtposterbox mr-3
+				<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+				flex-shrink-0
+				<?php else: ?>
+				media-left
+				<?php endif ?>">
+				<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="d-none d-sm-block
+					<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+					text-decoration-none
+					<?php endif ?>">
 					<img class="media-object img-rounded" src="<?= $asrc ?>" alt="avatar" />
 				</a>
 			</div>
-			<div id="comment-body-<?= $comment['id'] ?>" class="media-body comtbox">
+			<div id="comment-body-<?= $comment['id'] ?>" class="comtbox
+				<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+				flex-grow-1 ms-3
+				<?php else: ?>
+				media-body
+				<?php endif ?>">
 				<div class="row">
 					<div class="col-sm-6"><?= getUserLink($poster['username']) ?></div>
-					<div class="col-sm-6 text-right"><?= getClickZanBlock('BC', $comment['id'], $comment['zan']) ?></div>
+					<div class="col-sm-6 
+				<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+				text-end
+				<?php else: ?>
+				text-right
+				<?php endif ?>"><?= getClickZanBlock('BC', $comment['id'], $comment['zan']) ?></div>
 				</div>
 				<div class="comtbox1"><?= $comment['content'] ?></div>
-				<ul class="text-right list-inline bot-buffer-no"><li><small class="text-muted"><?= $comment['post_time'] ?></small></li><li><a id="reply-to-<?= $comment['id'] ?>" href="#">回复</a></li></ul>
+				<ul class="list-inline bot-buffer-no
+					<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+					text-end
+					<?php else: ?>
+					text-right
+					<?php endif ?>">
+					<li>
+						<small class="text-muted">
+							<?= $comment['post_time'] ?>
+						</small>
+					</li>
+					<li>
+						<a class="
+							<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							text-decoration-none
+							<?php endif ?>"
+							id="reply-to-<?= $comment['id'] ?>" href="#">
+							回复
+						</a>
+					</li>
+				</ul>
 				<?php if ($replies): ?>
 				<div id="replies-<?= $comment['id'] ?>" class="comtbox5"></div>
 				<?php endif ?>

web/app/libs/uoj-html-lib.php

@@ -1294,6 +1294,8 @@ function echoHacksList($cond, $tail, $config, $user) {
 }
 
 function echoBlog($blog, $config = array()) {
+	global $REQUIRE_LIB;
+
 	$default_config = array(
 		'blog' => $blog,
 		'show_title_only' => false,
@@ -1304,6 +1306,9 @@ function echoBlog($blog, $config = array()) {
 			$config[$key] = $val;
 		}
 	}
+
+	$config['REQUIRE_LIB'] = $REQUIRE_LIB;
+
 	uojIncludeView('blog-preview', $config);
 }
 function echoBlogTag($tag) {

web/app/views/blog-preview.php

@@ -14,14 +14,43 @@
 	
 	$blog_type = $blog['type'] == 'B' ? 'post' : 'slide';
 	?>
+<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
 <link rel="stylesheet" type="text/css" href="<?= HTML::url('/css/markdown.css') ?>">
-<h2><?= $extra_text ?><a class="header-a" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>"><?= $blog['title'] ?></a></h2>
+<?php endif ?>
+
+<h1 class="h2">
+	<?= $extra_text ?>
+	<a class="header-a
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+text-decoration-none text-body
+<?php endif ?>
+	" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">
+		<?= $blog['title'] ?>
+	</a>
+</h1>
+
 <div><?= $blog['post_time'] ?> <strong>By</strong> <?= getUserLink($blog['poster']) ?> (<strong>博客 ID: </strong> <?= $blog['id'] ?>)</div>
 <?php if (!$show_title_only): ?>
 <div class="card mb-4">
 	<div class="card-body">
 		<?php if ($blog_type == 'post'): ?>
-		<article class="markdown-body"><?= $content ?></article>
+
+			<!-- content -->
+			<article class="markdown-body">
+				<?= $content ?>
+			</article>
+
+			<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+			<script>
+				$(document).ready(function() {
+					$('.markdown-body table').each(function() {
+						$(this).addClass('table table-bordered table-striped');
+					});
+				});
+			</script>
+			<?php endif ?>
+			<!-- content end -->
+
 		<?php elseif ($blog_type == 'slide'): ?>
 		<article>
 			<div class="embed-responsive embed-responsive-16by9">
@@ -33,19 +62,53 @@
 		</article>
 		<?php endif ?>
 	</div>
-	<div class="card-footer text-right">
+	<div class="card-footer
-		<ul class="list-inline bot-buffer-no">
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+text-end
+<?php else: ?>
+text-right
+<?php endif ?>">
+		<ul class="list-inline 
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+mb-0
+<?php else: ?>
+bot-buffer-no
+<?php endif ?>">
 			<li class="list-inline-item">
 			<?php foreach (queryBlogTags($blog['id']) as $tag): ?>
 				<?php echoBlogTag($tag) ?>
 			<?php endforeach ?>
 			</li>
 			<?php if ($is_preview): ?>
-  			<li class="list-inline-item"><a href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">阅读全文</a></li>
+  			<li class="list-inline-item">
+				<a class="
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+text-decoration-none
+<?php endif ?>
+	" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">
+					阅读全文
+				</a>
+			</li>
   			<?php endif ?>
   			<?php if (Auth::check() && (isSuperUser(Auth::user()) || Auth::id() == $blog['poster'])): ?>
-			<li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">修改</a></li>
+			<li class="list-inline-item">
-			<li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">删除</a></li>
+				<a class="
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+text-decoration-none
+<?php endif ?>
+	" href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">
+					修改
+				</a>
+			</li>
+			<li class="list-inline-item">
+				<a class="
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+text-decoration-none
+<?php endif ?>
+	" href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">
+					删除
+				</a>
+			</li>
 			<?php endif ?>
   			<li class="list-inline-item"><?= getClickZanBlock('B', $blog['id'], $blog['zan']) ?></li>
 		</ul>

web/css/uoj-bs5.css

@@ -249,3 +249,91 @@ form.uoj-form-compressed button {
 	color: var(--bs-nav-link-color) !important;
 	background-color: #eeeeee70;
 }
+
+/* Comments */
+
+.comt {
+}
+
+.comtposterbox {
+	text-align: center;
+}
+.comtbox {
+	width: 100%;
+}
+.comtbox1 {
+	white-space: pre-wrap;
+	word-break: break-all;
+	min-height: 80px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+.comtbox2 {
+	text-align: right;
+}
+.comtbox3 {
+	display: inline-block;
+	margin-right: 5px;
+}
+.comtbox4 {
+	display: inline-block;
+}
+.comtbox5 {
+	background-image: linear-gradient(to bottom, #f5f5f5 0, #fafafa 100%);
+	background-repeat: repeat-x;
+	border-color: #dcdcdc;
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
+		0 1px 0 rgba(255, 255, 255, 0.1);
+	padding: 9px;
+	border-radius: 3px;
+
+	min-height: 20px;
+	margin-bottom: 20px;
+	border: 1px solid #e3e3e3;
+
+	margin-top: 10px;
+}
+.comtbox6 {
+	white-space: pre-wrap;
+	word-break: break-all;
+}
+.comtbox7 {
+	background-image: linear-gradient(to bottom, #f5f5f5 0%, #fafafa 100%);
+	background-repeat: repeat-x;
+	border-color: #dcdcdc;
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
+		0 1px 0 rgba(255, 255, 255, 0.1);
+	border-radius: 3px;
+
+	margin-left: 50px;
+	margin-top: 10px;
+	margin-bottom: 2px;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 10px;
+	white-space: nowrap;
+	padding-bottom: 10px;
+	border: 1px solid #e3e3e3;
+
+	text-align: left;
+}
+.comtbox8 {
+	background-image: linear-gradient(to bottom, #ffffff 100%, #fafafa 0%);
+	background-repeat: repeat-x;
+	border-color: #dcdcdc;
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
+		0 1px 0 rgba(255, 255, 255, 0.1);
+	border-radius: 3px;
+
+	margin-left: 50px;
+	margin-top: 10px;
+	margin-bottom: 2px;
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 10px;
+	white-space: nowrap;
+	padding-bottom: 10px;
+	border: 1px solid #e3e3e3;
+
+	text-align: left;
+}

web/js/uoj.js

@@ -1074,11 +1074,11 @@ function showCommentReplies(id, replies) {
 				$('<td />').append(
 					$('<div class="comtbox6">' + getUserLink(reply.poster, reply.poster_realname) + '：' + reply.content + '</div>')
 				).append(
-					$('<ul class="text-right list-inline bot-buffer-no" />').append(
+					$('<ul class="' + (isBootstrap5Page ? 'text-end mb-0' : 'text-right bot-buffer-no') + ' list-inline" />').append(
 						'<li>' + '<small class="text-muted">' + reply.post_time + '</small>' + '</li>'
 					).append(
 						$('<li />').append(
-							$('<a href="#">回复</a>').click(function (e) {
+							$('<a class=" ' + (isBootstrap5Page ? ' text-decoration-none ' : '') + ' " href="#">回复</a>').click(function (e) {
 								e.preventDefault();
 								toggleFormReply(reply.id, '回复 @' + reply.poster + '：');
 							})