Merge remote-tracking branch 'origin/main' into main
This commit is contained in:
1152958806@qq.com
commit
86d5996de7
218
settings.yaml
218
settings.yaml
|
|
@ -736,11 +736,20 @@ spec:
|
|||
label: 最新文章
|
||||
value: 4
|
||||
help: 文章数量
|
||||
- $formkit: number
|
||||
name: newcommentnumber
|
||||
- $formkit: group
|
||||
name: newcomment
|
||||
label: 最新评论
|
||||
value: 5
|
||||
help: 最新评论数量, 小于 0 则展示5条评论
|
||||
value:
|
||||
newcommentUrl: /newest
|
||||
newcommentnumber: 5
|
||||
children:
|
||||
- $formkit: url
|
||||
name: newcommentUrl
|
||||
label: 跳转地址
|
||||
- $formkit: number
|
||||
name: newcommentnumber
|
||||
label: 数量
|
||||
help: 最新评论数量, 小于 0 则展示5条评论
|
||||
- $formkit: number
|
||||
name: categoryQuantity
|
||||
label: 文章分类
|
||||
|
|
@ -1563,6 +1572,117 @@ spec:
|
|||
placeholder: 请输入左下角按钮跳转链接
|
||||
value: https://www.apple.com.cn/macbook-pro/
|
||||
|
||||
- group: new_comment
|
||||
label: 最近评论
|
||||
formSchema:
|
||||
- $formkit: attachment
|
||||
name: backgroundImg
|
||||
label: 背景图
|
||||
value: https://liuzhihang.com/upload/moments.png
|
||||
placeholder: 请输入图片地址
|
||||
- $formkit: text
|
||||
name: smallTitle
|
||||
label: 小标题
|
||||
value: 评论
|
||||
- $formkit: text
|
||||
name: bigTitle
|
||||
label: 大标题
|
||||
value: 最近评论
|
||||
- $formkit: text
|
||||
name: detail
|
||||
label: 描述
|
||||
value: 快速查看本站最近评论内容。
|
||||
|
||||
- group: envelope_comment
|
||||
label: 留言板
|
||||
formSchema:
|
||||
- $formkit: radio
|
||||
label: 弹幕
|
||||
name: enable_danmu
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
label: 信笺
|
||||
name: enable_envelope_comment
|
||||
key: enable_envelope_comment
|
||||
id: enable_envelope_comment
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: textarea
|
||||
if: $get(enable_envelope_comment).value
|
||||
name: title
|
||||
label: 标题
|
||||
placeholder: 请输入内容
|
||||
value: <div align="center">留言板</div>
|
||||
help: 支持 HTML 语法
|
||||
- $formkit: group
|
||||
name: custom_pic
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 信笺图片
|
||||
value:
|
||||
cover:
|
||||
line:
|
||||
beforeimg:
|
||||
afterimg:
|
||||
children:
|
||||
- $formkit: attachment
|
||||
name: cover
|
||||
label: 头部图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg"
|
||||
- $formkit: attachment
|
||||
name: line
|
||||
label: 底部图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png"
|
||||
- $formkit: attachment
|
||||
name: beforeimg
|
||||
label: 前半部分图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"
|
||||
- $formkit: attachment
|
||||
name: afterimg
|
||||
label: 后半部分图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"
|
||||
- $formkit: repeater
|
||||
name: messageList
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 正文
|
||||
value:
|
||||
- content: "有什么想问的？"
|
||||
- content: "有什么想说的？"
|
||||
- content: "有什么想吐槽的？"
|
||||
- content: "哪怕是有什么想吃的，都可以告诉我哦~"
|
||||
children:
|
||||
- $formkit: text
|
||||
name: content
|
||||
label: 内容
|
||||
placeholder: 请输入内容
|
||||
value: "有什么想问的？"
|
||||
- $formkit: text
|
||||
name: bottom
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 底部文本
|
||||
placeholder: 请输入内容
|
||||
value: 自动书记人偶竭诚为您服务！
|
||||
help: 仅支持单行文本
|
||||
- $formkit: number
|
||||
name: height
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 高度
|
||||
placeholder: 请输入内容
|
||||
help: 信封划出的高度
|
||||
value: 1024
|
||||
|
||||
- group: about
|
||||
label: 关于
|
||||
formSchema:
|
||||
|
|
@ -1978,96 +2098,6 @@ spec:
|
|||
- label: 否
|
||||
value: N
|
||||
|
||||
- group: envelope_comment
|
||||
label: 留言板
|
||||
formSchema:
|
||||
- $formkit: radio
|
||||
label: 弹幕
|
||||
name: enable_danmu
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
label: 信笺
|
||||
name: enable_envelope_comment
|
||||
key: enable_envelope_comment
|
||||
id: enable_envelope_comment
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: textarea
|
||||
if: $get(enable_envelope_comment).value
|
||||
name: title
|
||||
label: 标题
|
||||
placeholder: 请输入内容
|
||||
value: <div align="center">留言板</div>
|
||||
help: 支持 HTML 语法
|
||||
- $formkit: group
|
||||
name: custom_pic
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 信笺图片
|
||||
value:
|
||||
cover:
|
||||
line:
|
||||
beforeimg:
|
||||
afterimg:
|
||||
children:
|
||||
- $formkit: attachment
|
||||
name: cover
|
||||
label: 头部图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg"
|
||||
- $formkit: attachment
|
||||
name: line
|
||||
label: 底部图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png"
|
||||
- $formkit: attachment
|
||||
name: beforeimg
|
||||
label: 前半部分图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"
|
||||
- $formkit: attachment
|
||||
name: afterimg
|
||||
label: 后半部分图片
|
||||
placeholder: 请输入内容
|
||||
value: "https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"
|
||||
- $formkit: repeater
|
||||
name: messageList
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 正文
|
||||
value:
|
||||
- content: "有什么想问的？"
|
||||
- content: "有什么想说的？"
|
||||
- content: "有什么想吐槽的？"
|
||||
- content: "哪怕是有什么想吃的，都可以告诉我哦~"
|
||||
children:
|
||||
- $formkit: text
|
||||
name: content
|
||||
label: 内容
|
||||
placeholder: 请输入内容
|
||||
value: "有什么想问的？"
|
||||
- $formkit: text
|
||||
name: bottom
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 底部文本
|
||||
placeholder: 请输入内容
|
||||
value: 自动书记人偶竭诚为您服务！
|
||||
help: 仅支持单行文本
|
||||
- $formkit: number
|
||||
name: height
|
||||
if: $get(enable_envelope_comment).value
|
||||
label: 高度
|
||||
placeholder: 请输入内容
|
||||
help: 信封划出的高度
|
||||
value: 1024
|
||||
|
||||
- group: comments
|
||||
label: 评论
|
||||
formSchema:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
||||
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'fcircle',title = ${'友链鱼塘' + ' | ' + site.title} )}">
|
||||
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'fcircle',title = ${singlePage.spec.title + ' | ' + site.title} )}">
|
||||
|
||||
<th:block th:fragment="content">
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<!-- 头部导航栏 -->
|
||||
<header class="not-top-img" id="page-header">
|
||||
<nav th:replace="~{modules/nav :: nav(title = '友链鱼塘')}"></nav>
|
||||
<nav th:replace="~{modules/nav :: nav(title = ${singlePage.spec.title})}"></nav>
|
||||
</header>
|
||||
<main class="layout hide-aside" id="content-inner">
|
||||
<div id="page">
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
const necommHtml = array => {
|
||||
let result = ''
|
||||
|
||||
const pagesize = [[${ theme.config.sidebar.newcommentnumber }]];
|
||||
const pagesize = [[${ theme.config.sidebar.newcomment.newcommentnumber }]];
|
||||
const defaultpagesize = 5;
|
||||
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
|
||||
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
|
|||
const necommHtml = array => {
|
||||
let result = ''
|
||||
|
||||
const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
|
||||
const pagesize = [[${theme.config.sidebar.newcomment.newcommentnumber}]];
|
||||
const defaultpagesize = 5;
|
||||
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
const necommHtml = array => {
|
||||
let result = ''
|
||||
|
||||
const pagesize = [[${ theme.config.sidebar.newcommentnumber }]];
|
||||
const pagesize = [[${ theme.config.sidebar.newcomment.newcommentnumber }]];
|
||||
const defaultpagesize = 5;
|
||||
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,15 @@
|
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<!-- 最新评论 -->
|
||||
<div class="card-widget card-recent-post" th:fragment="comments">
|
||||
<a th:if="${not #strings.isEmpty(theme.config.sidebar.newcomment.newcommentUrl)}"
|
||||
th:onclick="pjax.loadUrl([[${theme.config.sidebar.newcomment.newcommentUrl}]])"
|
||||
title="查看更多"
|
||||
class="card-more-btn"
|
||||
style="cursor:pointer" draggable="false"><i class="haofont hao-icon-chevron-right"></i></a>
|
||||
<div class="item-headline"><i class="haofont hao-icon-comments"></i><span>最新评论</span></div>
|
||||
<div class="aside-list" id="newcomm">
|
||||
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }"
|
||||
th:with="newcommentnumber = ${#conversions.convert(theme.config.sidebar.newcommentnumber, 'java.lang.Integer') >= 0 ? theme.config.sidebar.newcommentnumber : 5}">
|
||||
th:with="newcommentnumber = ${#conversions.convert(theme.config.sidebar.newcomment.newcommentnumber, 'java.lang.Integer') >= 0 ? theme.config.sidebar.newcommentnumber : 5}">
|
||||
<div th:each="comment,iterStat : ${commentFinder.list(null, 1, newcommentnumber)}" class="aside-list-item"
|
||||
th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
|
||||
comment.spec.subjectRef.kind == 'SinglePage' && not #strings.contains('photos,links,moments', comment.spec.subjectRef.name) ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,358 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
||||
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'newComment',title = ${singlePage.spec.title + ' | ' + site.title})}">
|
||||
|
||||
<th:block th:fragment="content">
|
||||
|
||||
<div class="page" id="body-wrap">
|
||||
|
||||
<!-- 头部导航栏 -->
|
||||
<header class="not-top-img" id="page-header">
|
||||
<nav th:replace="~{modules/nav :: nav(title = ${singlePage.spec.title})}"></nav>
|
||||
</header>
|
||||
<main class="layout hide-aside" id="content-inner">
|
||||
<div id="page">
|
||||
<div th:replace="~{macro/author-content :: author-content(background = ${theme.config.new_comment.backgroundImg},
|
||||
smallTitle = ${theme.config.new_comment.smallTitle},
|
||||
bigTitle = ${theme.config.new_comment.bigTitle},
|
||||
detail = ${theme.config.new_comment.detail},
|
||||
buttonUrl = '',
|
||||
buttonTitle = '')}"></div>
|
||||
<div id="comments-page">
|
||||
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }"
|
||||
th:each="comment,iterStat : ${commentFinder.list(null, 1, 100)}" th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
|
||||
comment.spec.subjectRef.kind == 'SinglePage' && not #strings.contains('photos,links,moments', comment.spec.subjectRef.name) ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
|
||||
url = ${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name},
|
||||
article = ${page == null? '该文章/页面不存在' : page.spec.title}">
|
||||
<div class="comment-card" th:title="${comment.spec.content}"
|
||||
th:onclick="pjax.loadUrl([[${url}]])">
|
||||
<div class="comment-info">
|
||||
<img th:with=" img =${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
|
||||
th:alt="${comment.owner.displayName}" th:src="${isLazyload ? loadingImg : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}" class="no-lightbox nolazyload avatar">
|
||||
<div class="comment-information">
|
||||
<span class="comment-user">[[${comment.owner.displayName}]]</span>
|
||||
<span class="comment-time">[[${#dates.format(comment.metadata.creationTimestamp,
|
||||
'yyyy-MM-dd HH:mm:ss')}]]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-content">[[${comment.spec.content}]]
|
||||
</div>
|
||||
<div class="comment-article">[[${article}]]</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
</div>
|
||||
<th:block th:if="${!#strings.equals(theme.config.comments.use, 'commentWidget') }">
|
||||
<script data-pjax th:inline="javascript">
|
||||
var postsData = [[${ postFinder.listAll() }]];
|
||||
var pageData = [[${ singlePageFinder.list(1, 50) }]];
|
||||
var articles = [{ path: '/links', title: '友链' }, { path: '/bangumis', title: '追番' }, { path: '/moments', title: '瞬间' }, { path: '/photos', title: '图库' }];
|
||||
|
||||
if (postsData.length > 0) {
|
||||
postsData.map((item) => {
|
||||
articles.push({
|
||||
title: item.spec.title,
|
||||
path: item.status.permalink
|
||||
})
|
||||
})
|
||||
}
|
||||
if (pageData.items.length > 0) {
|
||||
pageData.items.map((item) => {
|
||||
articles.push({
|
||||
title: item.spec.title,
|
||||
path: item.status.permalink
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
var config = {
|
||||
mailMd5: GLOBAL_CONFIG.source.comments.mailMd5,
|
||||
twikooUrl: GLOBAL_CONFIG.source.twikoo.twikooUrl,
|
||||
artalkUrl: GLOBAL_CONFIG.source.artalk.artalkUrl,
|
||||
walineUrl: GLOBAL_CONFIG.source.waline.serverURL,
|
||||
use: GLOBAL_CONFIG.source.comments.use
|
||||
};
|
||||
var isTwikoo = config.use == 'Twikoo';
|
||||
var isArtalk = config.use == 'Artalk';
|
||||
var isWaline = config.use == 'Waline';
|
||||
comments();
|
||||
async function comments() {
|
||||
if (isTwikoo) {
|
||||
fetch(GLOBAL_CONFIG.source.twikoo.twikooUrl, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
event: "GET_RECENT_COMMENTS",
|
||||
accessToken: GLOBAL_CONFIG.source.twikoo.accessToken,
|
||||
includeReply: !0,
|
||||
pageSize: 100
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}).then(res => res.json()).then(async ({ data }) => {
|
||||
const twikooArray = data.map(e => {
|
||||
return {
|
||||
'comment': changeContents(e.comment),
|
||||
'avatar': 'https://cravatar.cn/avatar/' + e.mailMd5,
|
||||
'nick': e.nick,
|
||||
'url': e.url,
|
||||
'barrageBlogger': e.mailMd5 === config.mailMd5,
|
||||
'id': e.id,
|
||||
'created': e.created
|
||||
}
|
||||
})
|
||||
renderer(twikooArray)
|
||||
}).catch((err) => { console.log(err); })
|
||||
}
|
||||
if (isArtalk) {
|
||||
const statheaderList = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Origin': window.location.origin
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
'site_name': GLOBAL_CONFIG.source.artalk.siteName,
|
||||
'limit': '100',
|
||||
'type': 'latest_comments'
|
||||
})
|
||||
}
|
||||
fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/stat', statheaderList)
|
||||
.then(res => res.json()).then(d => {
|
||||
const artalk = d.data.map(function (e) {
|
||||
return {
|
||||
'comment': changeContents(e.content_marked),
|
||||
'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
|
||||
'nick': e.nick,
|
||||
'url': e.page_key,
|
||||
'barrageBlogger': e.email_encrypted === config.mailMd5,
|
||||
'id': 'atk-comment-' + e.id,
|
||||
'created': e.date,
|
||||
}
|
||||
})
|
||||
renderer(artalk)
|
||||
}).catch((err) => { console.log(err); })
|
||||
}
|
||||
if (isWaline) {
|
||||
const loadWaline = () => {
|
||||
Waline.RecentComments({
|
||||
serverURL: GLOBAL_CONFIG.source.waline.serverURL,
|
||||
count: 50
|
||||
}).then(({ comments }) => {
|
||||
const walineArray = comments.map(e => {
|
||||
return {
|
||||
'comment': changeContents(e.comment),
|
||||
'avatar': e.avatar,
|
||||
'nick': e.nick,
|
||||
'url': e.url,
|
||||
'barrageBlogger': e.type === 'administrator',
|
||||
'id': e.objectId,
|
||||
'created': e.insertedAt,
|
||||
}
|
||||
})
|
||||
renderer(walineArray);
|
||||
}).catch((err) => { console.log(err); })
|
||||
}
|
||||
if (typeof Waline === 'object') loadWaline()
|
||||
else getScript(GLOBAL_CONFIG.source.waline.js).then(loadWaline)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getTitle(url) {
|
||||
let a = articles.find(a => a.path == url)
|
||||
if (a) return a.title
|
||||
return '该文章/页面不存在'
|
||||
}
|
||||
|
||||
function renderer(data) {
|
||||
let html = "";
|
||||
data.forEach(item => {
|
||||
const a = new Date(item.created),
|
||||
c = `${a.getFullYear().toString().slice(-2)}-${a.getMonth() + 1}-${a.getDate()} ${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;
|
||||
html += `<div class="comment-card" title="${item.comment}" onclick="pjax.loadUrl('${item.url}#${item.id}')">
|
||||
<div class="comment-info no-lightbox">
|
||||
<img src="${item.avatar}" alt='${item.nick}'/>
|
||||
<div class="comment-information">
|
||||
<span class="comment-user">${item.nick} ${item.barrageBlogger ? '<span class="isBlogger">博主</span>' : ''}</span>
|
||||
<span class="comment-time">${c}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-content">${item.comment}</div>
|
||||
<div class="comment-article">"${getTitle(item.url)}"</div>
|
||||
</div>`
|
||||
})
|
||||
document.getElementById('comments-page').innerHTML = html
|
||||
}
|
||||
function changeContents(content) {
|
||||
if (content === '') return content
|
||||
|
||||
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
|
||||
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
|
||||
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
|
||||
content = content.replace(/<[^>]+>/g, "") // remove html tag
|
||||
|
||||
if (content.length > 150) {
|
||||
content = content.substring(0, 150) + '...'
|
||||
}
|
||||
return content
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
<style>
|
||||
#comments-page {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
margin-top: 1.5rem
|
||||
}
|
||||
|
||||
#comments-page .comment-card {
|
||||
position: relative;
|
||||
width: calc(100% / 4 - 9px);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border);
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--heo-shadow-border);
|
||||
background: var(--heo-card-bg)
|
||||
}
|
||||
|
||||
span.isBlogger {
|
||||
background: var(--heo-main);
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
padding: 3px 4px 4px 4.5px;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
#comments-page .comment-card {
|
||||
width: calc(100% / 2 - 6px)
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#comments-page .comment-card {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
#comments-page .comment-card:hover {
|
||||
border-color: var(--heo-main)
|
||||
}
|
||||
|
||||
#comments-page .comment-card:hover .comment-article {
|
||||
opacity: 1;
|
||||
top: 0
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px dashed var(--hr-border)
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0 !important
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info .comment-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info .comment-information .comment-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info .comment-information .comment-author::after {
|
||||
content: "\f3a5";
|
||||
font-family: "Font Awesome 6 Free" !important;
|
||||
padding-left: 6px;
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
color: #fdc22d
|
||||
}
|
||||
|
||||
[data-theme=dark] #comments-page .comment-card .comment-info .comment-information .comment-author::after {
|
||||
color: var(--heo-main)
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info .comment-information .comment-time {
|
||||
opacity: .8;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
#comments-page .comment-card .comment-info .comment-content {
|
||||
margin: 8px 5px 0
|
||||
}
|
||||
|
||||
.comment-article,
|
||||
.comment-content {
|
||||
transition: .3s;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.7;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.comment-article {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
background: var(--heo-main);
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
text-align: center
|
||||
}
|
||||
</style>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
<!-- 底部 -->
|
||||
<footer th:replace="~{modules/footer :: footer}"></footer>
|
||||
<!-- 卡片顶部气泡效果 -->
|
||||
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
|
||||
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
|
||||
</div>
|
||||
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
|
|
@ -41,6 +41,10 @@ spec:
|
|||
description: 相册页面
|
||||
screenshot:
|
||||
file: album.html
|
||||
- name: 最近评论页面模版
|
||||
description: 最近评论页面
|
||||
screenshot:
|
||||
file: new_comment.html
|
||||
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
||||
logo: https://liuzhihang.com/upload/logo.jpg
|
||||
website: https://liuzhihang.com
|
||||
|
|
|
|||
Loading…
Reference in New Issue