182 lines
11 KiB
HTML
182 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>论坛-Quinn</title>
|
|
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
|
|
<link rel="stylesheet" th:href="@{/wangedit/css/wang.style.css}"/>
|
|
<link rel="stylesheet" th:href="@{/css/backgroud.css}">
|
|
<style>
|
|
.nav-underline .nav-link {
|
|
padding-top: .75rem;
|
|
padding-bottom: .75rem;
|
|
font-size: .875rem;
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 导航栏 -->
|
|
<div th:replace="~{common/header::header(activeUrl='blog')}"></div>
|
|
<main role="main" class="container mt-3 p-3 bg-white rounded">
|
|
<div class="row">
|
|
<div class="col-md-12 blog-main">
|
|
|
|
<div class="blog-post">
|
|
<h2 class="blog-post-title">
|
|
[[${blog.getTitle()}]]
|
|
<small th:if="@{${session.loginUser} ? ${session.loginUser.getUid()==blog.getAuthorId()} : false}"
|
|
style="font-size: 15px;" class="badge badge-pill badge-warning" th:text="${blog.getCategoryName()}">
|
|
</small>
|
|
</h2>
|
|
<p class="blog-post-meta">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill" viewBox="0 0 16 16">
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
|
|
</svg>
|
|
[[${#dates.format(blog.getGmtUpdate(),'yyyy-MM-dd')}]]
|
|
</span>
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-person-fill" viewBox="0 0 16 16">
|
|
<path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-1 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-3 4c2.623 0 4.146.826 5 1.755V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1.245C3.854 11.825 5.377 11 8 11z"/>
|
|
</svg>
|
|
[[${blog.getUsername()}]]
|
|
</span>
|
|
<span>
|
|
<svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
|
|
<path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
|
|
</svg>
|
|
[[${blog.getViews()}]]
|
|
</span>
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-star-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.178.178 0 0 1-.134-.098L8.16 4.1z"/>
|
|
</svg>
|
|
[[${blog.getStar()}]]
|
|
</span>
|
|
<!-- 自己写的文章可以编辑和删除 -->
|
|
<a th:if="@{${session.loginUser} ? ${session.loginUser.getUid()==blog.getAuthorId()} : false}"
|
|
class="float-right text-decoration-none" style="color: red"
|
|
th:href="@{'/blog/delete/'+${blog.getBid()}}"
|
|
onclick="if(!confirm('你确认要删除吗？')) return false;">
|
|
<svg class="bi bi-x-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
|
<path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
|
|
<path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
|
|
</svg>
|
|
删除
|
|
</a>
|
|
<a th:if="@{${session.loginUser} ? ${session.loginUser.getUid()==blog.getAuthorId()} : false}"
|
|
class="float-right mr-3 text-decoration-none"
|
|
th:href="@{'/blog/editor/'+${blog.getBid()}}">
|
|
<svg class="bi bi-pencil-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
|
|
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
|
|
</svg>
|
|
编辑
|
|
</a>
|
|
<span class="float-right" th:if="@{${session.loginUser} ? ${session.loginUser.getUid()!=blog.getAuthorId()} : false}">
|
|
<a class="text-danger text-decoration-none" th:fragment="star_refresh" th:id="id_star_refresh"
|
|
href="javascript:starFun(this);">
|
|
<svg th:if="${starValue.isStar() == true}" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
|
|
</svg>
|
|
<svg th:if="${starValue.isStar() != true}" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
|
|
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
|
|
</svg>
|
|
收藏
|
|
</a>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<hr style="margin-top: 18px">
|
|
|
|
<!--文章主体内容-->
|
|
<div id="editor-text-area"></div>
|
|
<textarea id="content-textarea" th:text="${blog.getContent()}" name="content" style="display: none;"></textarea>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-12 blog-main" style="margin-top: 20px">
|
|
<hr>
|
|
</div>
|
|
|
|
<div class="col-md-12 blog-main" style="margin-top: 20px">
|
|
<form th:action="@{'/blog/comment/'+${blog.getBid()}}" method="post">
|
|
<input type="hidden" id="userId" name="userId" th:value="@{${session.loginUser} ? ${session.loginUser.getUid()} : ''}">
|
|
<input type="hidden" name="userName" th:value="@{${session.loginUser} ? ${session.loginUser.getUsername()} : ''}">
|
|
<input type="hidden" id="topicId" name="topicId" th:value="${blog.getBid()}">
|
|
<div class="form-group">
|
|
<input id="commentTo" name="content" class="form-control" rows="3" required/>
|
|
</div>
|
|
<button type="submit" onclick="comment()" class="btn btn-primary float-right">提交评论</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div th:if="${commentList.size()!=0}" class="col-md-12 blog-main" style="margin-top: 20px">
|
|
<div class="my-3 p-3 bg-white rounded shadow-sm">
|
|
<h6 class="border-bottom border-gray pb-2 mb-0">评论列表</h6>
|
|
|
|
<div th:each="comment:${commentList}" class="media text-muted pt-3">
|
|
<img th:src="${comment.getAvatar()}" style="border-radius: 5px;margin-right: 5px " width="32" height="32">
|
|
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<strong class="d-block text-gray-dark" th:text="${comment.getUsername()} + ' ' + ${#dates.format(comment.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')}"></strong>
|
|
<span th:text="${comment.getContent()}"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div th:if="${commentList.size()==0}" class="col-md-12 blog-main" style="margin-top: 20px">
|
|
<div class="my-3 p-3 bg-white rounded shadow-sm">
|
|
<h6 class="pb-2 mb-4 text-center">还没有人评论，抢个沙发？</h6>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
<div th:replace="~{common/footer::footer}"></div>
|
|
|
|
<a class="to-top badge badge-light">返回顶部</a>
|
|
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
|
|
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
|
|
<script th:src="@{/js/toTop.js}"></script>
|
|
<script th:src="@{/js/jquery-ui.min.js}"></script>
|
|
<script th:src="@{/live/js/addlive2d.js}"></script>
|
|
<script th:src="@{/wangedit/js/wang.min.js}"></script>
|
|
<script th:src="@{/wangedit/js/wang.read.js}"></script>
|
|
<script th:src="@{/layer/mobile/layer.js}"></script>
|
|
<script type="text/javascript">
|
|
function starFun(btn){
|
|
btn.disabled = true;
|
|
var userId = $('#userId').val();
|
|
var topicId = $('#topicId').val();
|
|
$.ajax({
|
|
url: "/blog/star",
|
|
type: "post",
|
|
async: false,
|
|
data: {"userId": userId, "topicId": topicId},
|
|
success: function (data) {
|
|
$('#id_star_refresh').html(data);
|
|
}
|
|
});
|
|
}
|
|
function comment(){
|
|
var content = $('#commentTo').val();
|
|
console.log(content);
|
|
if (!content){
|
|
layer.open({ content: '评论内容不能为空', skin: 'msg', time: 2 });
|
|
return;
|
|
}
|
|
this.submit();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|