mirror of
https://github.com/renbaoshuo/S2OJ.git
synced 2024-11-22 07:38:42 +00:00
refactor: blog_detail page with bs5
This commit is contained in:
parent
6643d21ed0
commit
74e502a853
GPG Key ID:
00CB9680AB29F51A
@ -11,6 +11,10 @@
|
||||
if ($blog['is_hidden'] && !UOJContext::hasBlogPermission()) {
|
||||
become403Page();
|
||||
}
|
||||
|
||||
if (!isset($_COOKIE['bootstrap4'])) {
|
||||
$REQUIRE_LIB['bootstrap5'] = '';
|
||||
}
|
||||
|
||||
$comment_form = new UOJForm('comment');
|
||||
$comment_form->addVTextArea('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'] = '';
|
||||
$REQUIRE_LIB['shjs'] = '';
|
||||
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="media-left comtposterbox mr-3">
|
||||
<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="d-none d-sm-block">
|
||||
<div class="
|
||||
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
|
||||
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 ?>
|
||||
@ -190,7 +248,7 @@
|
||||
<?= $comments_pag->pagination() ?>
|
||||
|
||||
<h3 class="mt-4">发表评论</h3>
|
||||
<p>可以用@mike来提到mike这个用户，mike会被高亮显示。如果你真的想打“@”这个字符，请用“@@”。</p>
|
||||
<p>可以用 @mike 来提到 mike 这个用户，mike 会被高亮显示。如果你真的想打“@”这个字符，请用“@@”。</p>
|
||||
<?php $comment_form->printHTML() ?>
|
||||
|
||||
<div id="div-form-reply" style="display:none">
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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">
|
||||
<ul class="list-inline bot-buffer-no">
|
||||
<div class="card-footer
|
||||
<?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"><a href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">删除</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(), '/'.$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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 + '：');
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user