generated from halo-dev/theme-starter
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add comment section to post template in post.html
Showing
3 changed files
with
383 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters