Skip to content

Commit

Permalink
Add comment section to post template in post.html
Browse files Browse the repository at this point in the history
Anyexyz committed Jan 2, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 6611349 commit 4e656c9
Showing 3 changed files with 383 additions and 0 deletions.
193 changes: 193 additions & 0 deletions assets/css/post.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/* 文章容器 */
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}

/* 文章标题 */
.title {
font-size: 2rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 1.5rem;
text-align: center;
}

/* 文章内容区域 */
.article {
padding: 2rem;
position: relative;
z-index: 1000;
margin: 20px auto;
border-radius: 15px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.article:hover {
transform: translateY(-5px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

/* Markdown 内容样式 */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
margin-top: 1.5em;
margin-bottom: 0.8em;
font-weight: 600;
color: #2c3e50;
}

.article h1 { font-size: 1.8em; }
.article h2 { font-size: 1.6em; }
.article h3 { font-size: 1.4em; }
.article h4 { font-size: 1.2em; }
.article h5 { font-size: 1.1em; }
.article h6 { font-size: 1em; }

.article p {
margin-bottom: 1.2em;
line-height: 1.8;
color: #34495e;
}

.article img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.article a {
color: #3498db;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}

.article a:hover {
color: #2980b9;
border-bottom-color: #2980b9;
}

/* 代码块样式 */
.article pre {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
margin: 1.5rem 0;
border: 1px solid #eee;
}

.article code {
background: #f8f9fa;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
color: #e83e8c;
}

/* 引用块样式 */
.article blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid #3498db;
background: rgba(52, 152, 219, 0.1);
border-radius: 0 8px 8px 0;
}

.article blockquote p {
margin-bottom: 0;
color: #2c3e50;
}

/* 列表样式 */
.article ul,
.article ol {
margin: 1rem 0;
padding-left: 2rem;
}

.article li {
margin-bottom: 0.5rem;
line-height: 1.6;
}

/* 表格样式 */
.article table {
width: 100%;
margin: 1rem 0;
border-collapse: collapse;
border-spacing: 0;
}

.article th,
.article td {
padding: 0.75rem;
border: 1px solid #dee2e6;
}

.article th {
background: #f8f9fa;
font-weight: 600;
}

.article tr:nth-child(even) {
background: #f8f9fa;
}

/* 分割线样式 */
.article hr {
margin: 2rem 0;
border: 0;
border-top: 1px solid #eee;
}

/* 响应式调整 */
@media (max-width: 768px) {
.container {
padding: 15px;
}

.article {
padding: 1.5rem;
}

.title {
font-size: 1.8rem;
}
}

/* 返回顶部按钮 */
.back-to {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 1001;
}

.back-top {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.back-top:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
181 changes: 181 additions & 0 deletions templates/page.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" class="light">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title th:text="${singlePage.spec.title + ' - ' + site.title}"></title>
<script th:src="@{/assets/js/jquery.min.js?v={version}(version=${theme.spec.version})}"
type="application/javascript"></script>
<link th:href="@{/assets/css/bootstrap.min.css?v={version}(version=${theme.spec.version})}" type="text/css"
rel="stylesheet">
<link th:href="@{/assets/css/style.css?v={version}(version=${theme.spec.version})}" type="text/css"
rel="stylesheet">
<link th:href="@{/assets/css/post.css?v={version}(version=${theme.spec.version})}" type="text/css"
rel="stylesheet">
</head>

<body>
<!-- 页面背景 -->
<div class="banner-video">
<th:block th:if="${theme.config.style.cover_type == 'false'}">
<style>
.banner-video {
position: fixed !important;
}
</style>
</th:block>
<th:block
th:if="${#strings.toLowerCase(#strings.substring(theme.config.style.cover_img, #strings.length(theme.config.style.cover_img) - 4))} == '.mp4'">
<video autoplay loop muted>
<source th:src="${theme.config.style.cover_img}" type="video/mp4">
</video>
</th:block>
<th:block
th:unless="${#strings.toLowerCase(#strings.substring(theme.config.style.cover_img, #strings.length(theme.config.style.cover_img) - 4))} == '.mp4'">
<img th:src=${theme.config.style.cover_img} />
</th:block>
<div class="bottom-cover"
style="background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(244 248 251 / 0.6) 50%, rgb(244 248 251) 100%);">
</div>
</div>

<!-- 页面导航 -->
<!-- <div class="box">
<div class="change-type">
<div class="type-left" id="type-left">
<ul>
<li data-lylme="search" class="active"><a>搜索</a><span></span></li>
<li th:each="group : ${linkFinder.groupBy()}" data-lylme="group"><a th:text="${group.spec.displayName}"></a><span></span></li>
</ul>
</div>
</div>
</div> -->


<!-- 顶部导航-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="position: absolute; z-index: 10000;">
<button class="navbar-toggler collapsed" style="border: none; outline: none;" type="button"
data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05"
aria-expanded="false" aria-label="Toggle navigation">
<svg class="icon" width="200" height="200">
<use xlink:href="#icon-menus"></use>
</svg>
</button>
<div class="type-right">
<svg t="1711940240250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="7074" width="200" height="200">
<path
d="M512 0c281.6 0 512 230.4 512 512s-230.4 512-512 512S0 793.6 0 512 230.4 0 512 0z m192.96 261.888l-259.904 78.784c-51.2 13.76-90.592 53.184-106.336 104.384L259.936 704.96c-5.888 15.776 0 33.472 11.808 45.312 7.872 9.824 21.696 13.76 33.472 13.76 3.936 0 9.856 0 13.792-1.984l259.904-78.784c51.2-13.76 90.592-53.184 106.336-104.384l78.784-259.904c5.888-15.776 0-33.472-11.808-45.312-13.792-13.76-31.52-17.728-47.296-11.808v-0.032z m-96.448 295.424a79.872 79.872 0 0 1-53.184 53.152l-200.864 59.072 61.056-202.816a79.904 79.904 0 0 1 53.184-53.184l200.864-59.072-61.056 202.848zM472.64 512a39.36 39.36 0 1 0 78.72 0 39.36 39.36 0 0 0-78.72 0z"
fill="#dbdbdb" p-id="7075" data-spm-anchor-id="a313x.search_index.0.i6.29583a81RxO4Dj"
class="selected"></path>
</svg>
</div>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav mr-auto" th:with="menu = ${menuFinder.getPrimary()}">
<li class="nav-item" th:each="menuItem : ${menu.menuItems}">
<a class="nav-link" th:text="${menuItem.status.displayName}" th:href="${menuItem.status.href}"
th:target="${menuItem.spec.target?.value}">
</a>
</li>
</ul>
<div id="main">
<div id="show_date">
<script>
setInterval(function () {
var currentTime = new Date().toLocaleDateString(
"zh-CN",
{
year: "numeric",
month: "long",
day: "numeric",
weekday: "long"
},
);
const showDateElement =
document.getElementById("show_date");
if (showDateElement) {
showDateElement.textContent = currentTime;
}
}, 0);
</script>
</div>
<div id="show_time">
<script>
setInterval(function () {
var currentTime = new Date().toLocaleTimeString(
"zh-CN",
{
hour12: false,
hour: "2-digit",
minute: "2-digit",
},
);
const showTimeElement =
document.getElementById("show_time");
if (showTimeElement) {
showTimeElement.textContent = currentTime;
}
}, 0);
</script>
</div>
</div>
</div>
</nav>


<!-- 页面内容 -->
<div class="container" style="margin-top:10vh; position: relative; z-index: 100;">
<h2 class="title" th:text="${singlePage.spec.title}"></h2>

<!-- 文章内容 -->
<article class="article" th:utext="${singlePage.content.content}"></article>

<!-- 评论区 -->
<div th:if="${haloCommentEnabled}" class="article">
<halo:comment
group="content.halo.run"
kind="SinglePage"
th:attr="name=${singlePage.metadata.name}"
/>
</div>

<script th:src="@{/assets/js/bootstrap.min.js?v={version}(version=${theme.spec.version})}"
type="application/javascript"></script>
<script th:src="@{/assets/js/script.js?v={version}(version=${theme.spec.version})}"
type="application/javascript"></script>
<script th:src="@{/assets/js/svg.js?v={version}(version=${theme.spec.version})}"
type="application/javascript"></script>

<div style="display:none;" class="back-to" id="toolBackTop">
<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"></a>
</div>

<div class="mt-5 mb-3 footer text-muted text-center">
<div th:if="${not #strings.isEmpty(theme.config.beian.icp_text)}">
<!-- ICP备案 -->
<a class="icp" href="http://beian.miit.gov.cn/" target="_blank"
th:text="${theme.config.beian.icp_text}">
</a>
</div>
<div th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
<!-- 公安备案 -->
<a class="icp"
th:href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + ${#strings.substring(theme.config.beian.gongan_text, 10, 20)}"
target="_blank" rel="nofollow noopener">
<img th:src="@{/assets/img/gongan_beian.png}" alt="公安网备" width="16" height="16">
<span th:text="${theme.config.beian.gongan_text}"></span>
</a>
</div>
<!-- 版权信息 -->
<p>Copyright ©[[${#dates.format(new java.util.Date().getTime(), 'yyyy')}]] <a th:href="${site.url}"
th:text="${site.title}"></a>. All Rights Reserved. Powered by <a href="https://halo.run"
target="_blank">Halo [[${site.version}]]</a></p>
<halo:footer />
</div>
</div>


</body>

</html>
9 changes: 9 additions & 0 deletions templates/post.html
Original file line number Diff line number Diff line change
@@ -131,6 +131,15 @@ <h2 class="title" th:text="${post.spec.title}"></h2>
<!-- 文章内容 -->
<article class="article" th:utext="${post.content.content}"></article>

<!-- 评论区 -->
<div th:if="${haloCommentEnabled}" class="article">
<halo:comment
group="content.halo.run"
kind="Post"
th:attr="name=${post.metadata.name}"
/>
</div>

<script th:src="@{/assets/js/bootstrap.min.js?v={version}(version=${theme.spec.version})}"
type="application/javascript"></script>
<script th:src="@{/assets/js/script.js?v={version}(version=${theme.spec.version})}"

0 comments on commit 4e656c9

Please sign in to comment.