github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into main

This commit is contained in:
1152958806@qq.com 2023-10-08 14:14:04 +08:00
parent 630e285b77 db61a3634d
commit 86d5996de7
8 changed files with 497 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
settings.yaml
View File

@ -736,11 +736,20 @@ spec:
label: 最新文章 label: 最新文章
value: 4 value: 4
help: 文章数量 help: 文章数量
- $formkit: number - $formkit: group
name: newcommentnumber name: newcomment
label: 最新评论 label: 最新评论
value: 5 value:
help: 最新评论数量, 小于 0 则展示5条评论 newcommentUrl: /newest
newcommentnumber: 5
children:
- $formkit: url
name: newcommentUrl
label: 跳转地址
- $formkit: number
name: newcommentnumber
label: 数量
help: 最新评论数量, 小于 0 则展示5条评论
- $formkit: number - $formkit: number
name: categoryQuantity name: categoryQuantity
label: 文章分类 label: 文章分类
@ -1563,6 +1572,117 @@ spec:
placeholder: 请输入左下角按钮跳转链接 placeholder: 请输入左下角按钮跳转链接
value: https://www.apple.com.cn/macbook-pro/ 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 - group: about
label: 关于 label: 关于
formSchema: formSchema:
@ -1978,96 +2098,6 @@ spec:
- label: 否 - label: 否
value: N 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 - group: comments
label: 评论 label: 评论
formSchema: formSchema:

4
templates/fcircle.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" <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"> <th:block th:fragment="content">
@ -8,7 +8,7 @@
<!-- 头部导航栏 --> <!-- 头部导航栏 -->
<header class="not-top-img" id="page-header"> <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> </header>
<main class="layout hide-aside" id="content-inner"> <main class="layout hide-aside" id="content-inner">
<div id="page"> <div id="page">

2
templates/modules/comment/Artalk.html
View File

@ -59,7 +59,7 @@
const necommHtml = array => { const necommHtml = array => {
let result = '' let result = ''
const pagesize = [[${ theme.config.sidebar.newcommentnumber }]]; const pagesize = [[${ theme.config.sidebar.newcomment.newcommentnumber }]];
const defaultpagesize = 5; const defaultpagesize = 5;
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize; const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;

2
templates/modules/comment/Twikoo.html
View File

@ -98,7 +98,7 @@ not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
const necommHtml = array => { const necommHtml = array => {
let result = '' let result = ''
const pagesize = [[${theme.config.sidebar.newcommentnumber}]]; const pagesize = [[${theme.config.sidebar.newcomment.newcommentnumber}]];
const defaultpagesize = 5; const defaultpagesize = 5;
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize; const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;

2
templates/modules/comment/Waline.html
View File

@ -86,7 +86,7 @@
const necommHtml = array => { const necommHtml = array => {
let result = '' let result = ''
const pagesize = [[${ theme.config.sidebar.newcommentnumber }]]; const pagesize = [[${ theme.config.sidebar.newcomment.newcommentnumber }]];
const defaultpagesize = 5; const defaultpagesize = 5;
const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize; const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;

7
templates/modules/widgets/aside/comments.html
View File

@ -2,10 +2,15 @@
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 最新评论 --> <!-- 最新评论 -->
<div class="card-widget card-recent-post" th:fragment="comments"> <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="item-headline"><i class="haofont hao-icon-comments"></i><span>最新评论</span></div>
<div class="aside-list" id="newcomm"> <div class="aside-list" id="newcomm">
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }" <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" <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) : 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}, comment.spec.subjectRef.kind == 'SinglePage' && not #strings.contains('photos,links,moments', comment.spec.subjectRef.name) ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},

358
templates/new_comment.html Normal file
View File

@ -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>

4
theme.yaml
View File

@ -41,6 +41,10 @@ spec:
description: 相册页面 description: 相册页面
screenshot: screenshot:
file: album.html file: album.html
- name: 最近评论页面模版
description: 最近评论页面
screenshot:
file: new_comment.html
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
logo: https://liuzhihang.com/upload/logo.jpg logo: https://liuzhihang.com/upload/logo.jpg
website: https://liuzhihang.com website: https://liuzhihang.com