pages(detail): Finishing the details one last time

Trust me!!!
This commit is contained in:
周中平 2022-01-15 01:02:47 +08:00
parent 62fd4fea9b
commit 9cc75c1376
No known key found for this signature in database
GPG Key ID: B1DF9DD42D8E00DC
13 changed files with 149 additions and 120 deletions

View File

@ -14,7 +14,7 @@
</ul> </ul>
</div> </div>
<#if posts.totalPages gt 1> <#if posts.totalPages gt 1>
<@paginationTag method="categoryPosts" page="${posts.number}" total="${posts.totalPages}" display="3"> <@paginationTag method="categoryPosts" slug="${category.slug!}" page="${posts.number}" total="${posts.totalPages}" display="3">
<div class="pagenav"> <div class="pagenav">
<#if pagination.hasPrev> <#if pagination.hasPrev>
<a href="${pagination.prevPageFullPath!}" class="pre"> <a href="${pagination.prevPageFullPath!}" class="pre">

View File

@ -11,13 +11,13 @@
<div class="info"> <div class="info">
<span class="date"> <span class="date">
<i class="ri-map-pin-time-line"></i> <i class="ri-map-pin-time-line"></i>
${post.createTime?string('yyyy.MM.dd')} <a href="${archives_url!}">${post.createTime?string('yyyy.MM.dd')}</a>
</span> </span>
<#if post.tags?? && post.tags?size gt 0> <#if post.tags?? && post.tags?size gt 0>
<span class="tag"> <span class="tag">
<i class="ri-bookmark-3-line"></i> <i class="ri-bookmark-3-line"></i>
<#list post.tags as tag> <#list post.tags as tag>
<a href="${tag.fullPath!}">${tag.name!}</a> <a href="${tags_url!}">${tag.name!}</a>
</#list> </#list>
</span> </span>
</#if> </#if>

View File

@ -19,26 +19,26 @@
<i class="ri-share-forward-line"></i> <i class="ri-share-forward-line"></i>
</div> --> </div> -->
<#-- <div class="info"> <div class="info">
${user.nickname!} <#-- ${user.nickname!} -->
<#assign timeago = (.now?long - journal.createTime?long)> <#assign timeago = (.now?long - journal.createTime?long)>
<#if timeago < 60000 > <#if timeago < 60000 >
刚刚发表哦 ~ 刚刚发表哦 ~
<#elseif (timeago >= 60000) && (timeago < 3600000)> <#elseif (timeago >= 60000) && (timeago < 3600000)>
发表于 ${(timeago / 60000)?int} 分钟前 于 ${(timeago / 60000)?int} 分钟前发表
<#elseif (timeago >= 3600000) && (timeago < 86400000)> <#elseif (timeago >= 3600000) && (timeago < 86400000)>
发表于 ${(timeago / 3600000)?int} 小时前 于 ${(timeago / 3600000)?int} 小时前发表
<#elseif (timeago >= 86400000) && (timeago < 604800000)> <#elseif (timeago >= 86400000) && (timeago < 604800000)>
发表于 ${(timeago / 86400000)?int} 天前 于 ${(timeago / 86400000)?int} 天前发表
<#elseif (timeago >= 604800000) && (timeago < 3153600000)> <#elseif (timeago >= 604800000) && (timeago < 3153600000)>
发表于 ${(timeago / 604800000)?int} 周前 于 ${(timeago / 604800000)?int} 周前发表
<#elseif (timeago >= 3153600000) && (timeago < 94608000000)> <#elseif (timeago >= 3153600000) && (timeago < 94608000000)>
发表于 ${(timeago / 3153600000)?int} 年前 于 ${(timeago / 3153600000)?int} 年前发表
<#elseif (timeago >= 94608000000)> <#elseif (timeago >= 94608000000)>
发表于很久很久以前 ~ 发表于很久很久以前 ~
</#if> </#if>
</div> --> </div>
</li> </li>
</#list> </#list>

View File

@ -1,10 +1,9 @@
<#macro comment post,type> <#macro comment post,type>
<#if !post.disallowComment!false> <#if !post.disallowComment!false>
<div class="comment"> <div id="comment" class="comment close">
<script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script> <script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/gh/halo-dev/halo-comment@latest/dist/halo-comment.min.js'}"></script> <script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/gh/halo-dev/halo-comment@latest/dist/halo-comment.min.js'}"></script>
<halo-comment id="${post.id?c}" type="${type}"/> <halo-comment id="${post.id?c}" type="${type}"/>
</div> </div>
</#if> </#if>
</#macro> </#macro>

View File

@ -5,19 +5,26 @@
<div class="description"> <div class="description">
<p>${settings.sub_title!'the site subtitle'}</p> <p>${settings.sub_title!'the site subtitle'}</p>
<div class="socials"> <div class="socials">
<#if settings.aboutme??>
<a href="${settings.aboutme}" title="关于我" target="_blank"><i class="ri-footprint-line"></i></a>
</#if>
<#if settings.github??> <#if settings.github??>
<a href="${settings.github}" title="github" target="_blank"><i class="ri-github-line"></i></a> <a href="${settings.github}" title="Github" target="_blank"><i class="ri-github-line"></i></a>
</#if> </#if>
<#if settings.wechat??> <#if settings.wechat??>
<a href="${settings.wechat}" title="wechat" target="_blank"><i class="ri-wechat-line"></i></a> <a href="${settings.wechat}" title="微信" target="_blank"><i class="ri-wechat-line"></i></a>
</#if> </#if>
<#if settings.bilibili??> <#if settings.bilibili??>
<a href="${settings.bilibili}" title="bilibili" target="_blank"><i class="ri-bilibili-line"></i></a> <a href="${settings.bilibili}" title="哔哩哔哩" target="_blank"><i class="ri-bilibili-line"></i></a>
</#if> </#if>
<#if settings.mail??> <#if settings.mail??>
<a href="mailto:${settings.mail}" title="mail" target="_blank"><i class="ri-mail-line"></i></a> <a href="mailto:${settings.mail}" title="邮箱" target="_blank"><i class="ri-mail-line"></i></a>
</#if> </#if>
<a href="/rss.xml" type="application/rss+xml" title="rss" target="_blank"><i class="ri-rss-line"></i></a> <#if settings.links??>
<a href="${settings.links}" title="友情链接" target="_blank"><i class="ri-links-line"></i></a>
</#if>
<a href="${sitemap_html_url!}" type="application/sitemap" title="站点地图" target="_blank"><i class="ri-map-2-line"></i></a>
<a href="${rss_url!}" type="application/rss+xml" title="订阅" target="_blank"><i class="ri-rss-line"></i></a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -26,27 +26,26 @@
</head> </head>
<body> <body>
<#-- 菜单 -->
<div class="container animate__animated animate__fadeInDown"> <div class="container animate__animated animate__fadeInDown">
<#-- 主体 --> <#-- 主体 -->
<#nested > <#nested >
<#-- 脚注 --> <#-- 脚注 -->
<footer> <footer>
<#include "menu.ftl"> <#-- <#include "menu.ftl"> -->
<div class="copyright"> <div class="copyright">
<a href="https://www.7wate.com">Designed by Zeuk&7Wate,</a> <a href="https://www.7wate.com">Designed by 7Wate.</a>
<a href="https://halo.run">Proudly published with Halo</a> <a href="https://halo.run">Proudly published with Halo</a>
</div> </div>
<@global.footer /> <@global.footer />
</footer> </footer>
</div> </div>
<#-- 自定义JS代码 -->
<script src="${theme_base!}/source/js/redemption.js"></script>
<#-- 公共JS代码 --> <#-- 公共JS代码 -->
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script> <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script> <script>

View File

@ -50,11 +50,11 @@
${post.formatContent!} ${post.formatContent!}
</div> </div>
</div> </div>
<div class="commentButton"> <div class="post-bottom-menu">
<a href="${blog_url!}"> <a href="${blog_url!}" >
退回首页 退回首页
</a> </a>
<a href=""> <a href="javascript:document.getElementById('comment').classList.remove('close')">
留下一言 留下一言
</a> </a>
</div> </div>

View File

@ -20,19 +20,27 @@ photos:
sns: sns:
label: 社交资料 label: 社交资料
items: items:
aboutme:
name: aboutme
label: 关于我
type: text
github: github:
name: github name: github
label: Github label: Github
type: text type: text
wechat: wechat:
name: wechat name: wechat
label: wechat label: 微信
type: text type: text
bilibili: bilibili:
name: bilibili name: bilibili
label: bilibili label: 哔哩哔哩
type: text type: text
mail: mail:
name: mail name: mail
label: mail label: 邮箱
type: text
links:
name: 友链
label: links
type: text type: text

View File

@ -44,11 +44,11 @@
${sheet.formatContent!} ${sheet.formatContent!}
</div> </div>
</div> </div>
<div class="commentButton"> <div class="post-bottom-menu">
<a href="${blog_url!}"> <a href="${blog_url!}" >
退回首页 退回首页
</a> </a>
<a href=""> <a href="javascript:document.getElementById('comment').classList.remove('close')">
留下一言 留下一言
</a> </a>
</div> </div>

View File

@ -41,6 +41,9 @@ html::-webkit-scrollbar-thumb {
line-height: 2.4rem; line-height: 2.4rem;
} }
.header > .description { .header > .description {
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: 0.9rem; font-size: 0.9rem;
} }
.header > .description > .socials { .header > .description > .socials {
@ -218,6 +221,11 @@ main .journals > ul > li > .option {
main .journals > ul > li > .option > i { main .journals > ul > li > .option > i {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
main .journals > ul > li > .info {
display: flex;
justify-content: flex-end;
font-size: 0.75rem;
}
main .pagenav { main .pagenav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -228,26 +236,6 @@ main .pagenav > a {
margin: 0 2rem; margin: 0 2rem;
} }
.comment {
width: 47rem;
margin: 1rem 0rem;
padding: 1rem 2.5rem;
background: #ffffff;
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
}
.commentButton {
display: flex;
justify-content: space-around;
margin-top: 2rem;
padding-top: 2rem;
width: 40rem;
border-top: 1px solid #f3f3f3;
}
.commentButton > a {
color: black;
}
footer { footer {
padding: 2rem 0; padding: 2rem 0;
} }
@ -258,10 +246,22 @@ footer .copyright a {
margin: 0 0.125rem; margin: 0 0.125rem;
} }
.menu { .comment {
position: fixed; width: 47rem;
right: 0.5rem; margin: 1rem 0rem;
bottom: 10rem; padding: 1rem 2.5rem;
}
.close {
display: none;
}
.post-bottom-menu {
display: flex;
justify-content: space-around;
margin-top: 2rem;
padding-top: 2rem;
width: 40rem;
} }
/*animation starts*/ /*animation starts*/

View File

@ -53,6 +53,10 @@ html::-webkit-scrollbar-thumb {
// 二级标题 // 二级标题
>.description { >.description {
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: 0.9rem; font-size: 0.9rem;
>.socials { >.socials {
@ -257,10 +261,10 @@ main {
} }
} }
} }
} }
.journals{ .journals{
> .name{ > .name{
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
@ -284,6 +288,11 @@ main {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
> .info{
display: flex;
justify-content: flex-end;
font-size: 0.75rem;
}
} }
} }
@ -303,25 +312,7 @@ main {
} }
.comment // 页脚
{
width: 47rem;
margin: 1rem 0rem;
padding: 1rem 2.5rem;
background: #ffffff;
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
}
.commentButton{
display: flex;
justify-content: space-around;
margin-top: 2rem;
padding-top: 2rem;
width: 40rem;
border-top: 1px solid #f3f3f3;
>a{
color: rgba(0, 0, 0, 1);
}
}
footer { footer {
padding: 2rem 0; padding: 2rem 0;
@ -335,35 +326,31 @@ footer {
} }
} }
// .menu{
// position: fixed;
// right: 0.5rem;
// bottom: 10rem;
// }
.menu{ // 评论组件
position: fixed; .comment
right: 0.5rem; {
bottom: 10rem; width: 47rem;
margin: 1rem 0rem;
padding: 1rem 2.5rem;
} }
.close{
display: none;
}
.post-bottom-menu{
display: flex;
justify-content: space-around;
margin-top: 2rem;
padding-top: 2rem;
width: 40rem;
}
/*animation starts*/ /*animation starts*/

View File

@ -65,6 +65,9 @@ main .archives > ul > li > a, main .categories > ul > li > a, main .category > u
main .archives > ul > li > a:hover, main .categories > ul > li > a:hover, main .category > ul > li > a:hover, main .tag > ul > li > a:hover, main .tags > ul > li > a:hover, main .links > ul > li > a:hover { main .archives > ul > li > a:hover, main .categories > ul > li > a:hover, main .category > ul > li > a:hover, main .tag > ul > li > a:hover, main .tags > ul > li > a:hover, main .links > ul > li > a:hover {
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
} }
main .archives > ul > li > a > span, main .categories > ul > li > a > span, main .category > ul > li > a > span, main .tag > ul > li > a > span, main .tags > ul > li > a > span, main .links > ul > li > a > span {
color: #c5c5c5;
}
main .archives > ul > li > span, main .categories > ul > li > span, main .category > ul > li > span, main .tag > ul > li > span, main .tags > ul > li > span, main .links > ul > li > span { main .archives > ul > li > span, main .categories > ul > li > span, main .category > ul > li > span, main .tag > ul > li > span, main .tags > ul > li > span, main .links > ul > li > span {
color: #c5c5c5; color: #c5c5c5;
} }
@ -92,6 +95,9 @@ main .post > .title > .info > span i {
main .journals > ul > li > .option { main .journals > ul > li > .option {
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
} }
main .journals > ul > li > .info {
color: #c5c5c5;
}
footer .copyright a { footer .copyright a {
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
@ -99,3 +105,15 @@ footer .copyright a {
footer .copyright a:hover { footer .copyright a:hover {
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.comment {
background: #ffffff;
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
}
.post-bottom-menu {
border-top: 1px solid #f3f3f3;
}
.post-bottom-menu > a {
color: black;
}

View File

@ -17,14 +17,6 @@ html::-webkit-scrollbar-thumb:hover {
background: #0095ff1a; background: #0095ff1a;
} }
// // Body
// body {
// display: flex;
// flex-wrap: nowrap;
// flex-direction: column;
// align-items: center;
// }
// Header 头部 // Header 头部
.header { .header {
// 站点标题 // 站点标题
@ -102,6 +94,9 @@ main {
&:hover { &:hover {
color: rgb(0, 0, 0, 0.65); color: rgb(0, 0, 0, 0.65);
} }
> span{
color: #c5c5c5;
}
} }
> span{ > span{
color: #c5c5c5; color: #c5c5c5;
@ -151,6 +146,9 @@ main {
> .option{ > .option{
color: rgb(0, 0, 0, 0.65); color: rgb(0, 0, 0, 0.65);
} }
> .info{
color: #c5c5c5;
}
} }
} }
@ -169,3 +167,16 @@ footer {
} }
} }
} }
.comment
{
background: #ffffff;
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
}
.post-bottom-menu{
border-top: 1px solid #f3f3f3;
>a{
color: rgba(0, 0, 0, 1);
}
}