This commit is contained in:
杜恒 2021-01-26 14:19:52 +08:00
parent 8f0a2cd6a4
commit bf1450eb2e
12 changed files with 2341 additions and 1749 deletions

File diff suppressed because one or more lines are too long

View File

@ -10,6 +10,8 @@ html {
--classB: #e4e7ed; --classB: #e4e7ed;
--classC: #ebeef5; --classC: #ebeef5;
--classD: #f2f6fc; --classD: #f2f6fc;
--radius-wrap: 8px;
--radius-inner: 4px;
--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
} }
@ -62,7 +64,7 @@ html[data-night='night'] {
transform-origin: top; transform-origin: top;
background: var(--background); background: var(--background);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 0 0 4px 4px; border-radius: 0 0 var(--radius-inner) var(--radius-inner);
padding: 10px 0; padding: 10px 0;
opacity: 0; opacity: 0;
transform: translateX(-50%) perspective(600px) rotateX(-45deg); transform: translateX(-50%) perspective(600px) rotateX(-45deg);
@ -250,7 +252,7 @@ html[data-night='night'] {
right: 0; right: 0;
background: var(--background); background: var(--background);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: var(--radius-inner);
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: visibility 0.35s, opacity 0.35s, transform 0.35s; transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
@ -379,7 +381,7 @@ html[data-night='night'] {
position: relative; position: relative;
width: 250px; width: 250px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 8px; border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
overflow: hidden; overflow: hidden;
&:last-child { &:last-child {
@ -648,7 +650,7 @@ html[data-night='night'] {
.link { .link {
position: relative; position: relative;
display: block; display: block;
border-radius: 4px; border-radius: var(--radius-inner);
overflow: hidden; overflow: hidden;
&:hover .image { &:hover .image {
transform: scale(1.2); transform: scale(1.2);
@ -882,7 +884,7 @@ html[data-night='night'] {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 4px; border-radius: var(--radius-inner);
transition: opacity 0.35s; transition: opacity 0.35s;
&:hover { &:hover {
opacity: 0.85; opacity: 0.85;
@ -1018,14 +1020,14 @@ html[data-night='night'] {
margin-right: 15px; margin-right: 15px;
background: var(--classD); background: var(--classD);
animation: list_thumbnail_loading 0.5s infinite alternate; animation: list_thumbnail_loading 0.5s infinite alternate;
border-radius: 4px; border-radius: var(--radius-inner);
} }
.information { .information {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
.title { .title {
height: 24px; height: 24px;
border-radius: 4px; border-radius: var(--radius-inner);
background: var(--classD); background: var(--classD);
animation: list_title_loading 0.75s infinite alternate; animation: list_title_loading 0.75s infinite alternate;
margin-bottom: 15px; margin-bottom: 15px;
@ -1033,7 +1035,7 @@ html[data-night='night'] {
.abstract { .abstract {
p { p {
height: 18px; height: 18px;
border-radius: 4px; border-radius: var(--radius-inner);
background: var(--classD); background: var(--classD);
margin-bottom: 5px; margin-bottom: 5px;
animation: list_abstract_loading 0.8s infinite alternate; animation: list_abstract_loading 0.8s infinite alternate;
@ -1064,7 +1066,7 @@ html[data-night='night'] {
.joe_detail { .joe_detail {
background: var(--background); background: var(--background);
border-radius: 8px; border-radius: var(--radius-wrap);
padding: 15px; padding: 15px;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
margin-bottom: 15px; margin-bottom: 15px;
@ -1299,7 +1301,7 @@ html[data-night='night'] {
background: #ecf8ff; background: #ecf8ff;
border-left: 5px solid #50bfff; border-left: 5px solid #50bfff;
padding: 10px 15px; padding: 10px 15px;
border-radius: 0 4px 4px 0; border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
font-size: 14px; font-size: 14px;
p { p {
margin: 0; margin: 0;
@ -1331,7 +1333,7 @@ html[data-night='night'] {
display: inline-block; display: inline-block;
min-height: 26px; min-height: 26px;
line-height: 26px; line-height: 26px;
border-radius: 4px; border-radius: var(--radius-inner);
font-size: 12px; font-size: 12px;
background: #fdf6ec; background: #fdf6ec;
padding: 0 8px; padding: 0 8px;
@ -1353,7 +1355,7 @@ html[data-night='night'] {
padding: 15px; padding: 15px;
padding-top: 35px; padding-top: 35px;
margin: 0 0 15px; margin: 0 0 15px;
border-radius: 4px; border-radius: var(--radius-inner);
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -1379,7 +1381,7 @@ html[data-night='night'] {
img { img {
display: block; display: block;
max-width: 100%; max-width: 100%;
border-radius: 4px; border-radius: var(--radius-inner);
transition: transform 0.35s, box-shadow 0.35s; transition: transform 0.35s, box-shadow 0.35s;
cursor: zoom-in; cursor: zoom-in;
margin: 0 auto; margin: 0 auto;
@ -1517,7 +1519,7 @@ html[data-night='night'] {
.content { .content {
background: var(--classD); background: var(--classD);
padding: 15px; padding: 15px;
border-radius: 4px; border-radius: var(--radius-inner);
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1558,7 +1560,7 @@ html[data-night='night'] {
padding: 7.5px; padding: 7.5px;
.contain { .contain {
display: block; display: block;
border-radius: 4px; border-radius: var(--radius-inner);
overflow: hidden; overflow: hidden;
padding: 15px; padding: 15px;
color: #fff; color: #fff;
@ -1708,6 +1710,275 @@ html[data-night='night'] {
} }
} }
.joe_comment {
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 15px;
&__title {
font-weight: 500;
text-align: center;
font-size: 24px;
color: var(--main);
text-shadow: var(--text-shadow);
border-bottom: 1px solid var(--classB);
margin-bottom: 15px;
padding-bottom: 15px;
}
&__empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: var(--routine);
&-icon {
fill: var(--routine);
}
}
&__close {
display: flex;
align-items: center;
justify-content: center;
color: var(--routine);
&-icon {
fill: var(--routine);
margin-right: 5px;
}
}
&__respond {
&-type {
display: flex;
align-items: center;
justify-content: flex-end;
.item {
background: var(--classD);
padding: 0 15px;
height: 32px;
color: var(--main);
border: none;
&:first-child {
border-top-left-radius: var(--radius-inner);
}
&:last-child {
border-top-right-radius: var(--radius-inner);
}
&.active {
color: #fff;
background: var(--theme);
}
}
}
&-form {
border-radius: 6px 0 6px 6px;
background: var(--classD);
.head {
display: flex;
align-items: center;
border-bottom: 1px solid var(--classA);
.list {
flex: 1;
input {
width: 100%;
border: none;
background: transparent;
padding: 0 15px;
height: 40px;
color: var(--routine);
font-size: 14px;
}
&:nth-child(2) {
position: relative;
&::after,
&::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 15px;
background: var(--classA);
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
}
}
.body {
padding: 15px;
.text {
width: 100%;
height: 180px;
border: none;
resize: none;
vertical-align: middle;
color: var(--routine);
background: transparent;
font-size: 14px;
}
.draw {
position: relative;
width: 100%;
.line {
display: flex;
align-items: center;
position: absolute;
top: 10px;
left: 10px;
user-select: none;
li {
cursor: pointer;
margin-right: 10px;
color: var(--main);
&.active {
color: var(--theme);
}
}
}
.color {
display: flex;
align-items: center;
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%);
li {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
&.active {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
&:nth-child(1) {
background: #303133;
}
&:nth-child(2) {
background: #67c23a;
}
&:nth-child(3) {
background: #e6a23c;
}
&:nth-child(4) {
background: #f56c6c;
}
}
}
.icon {
position: absolute;
right: 10px;
cursor: pointer;
fill: var(--minor);
user-select: none;
&-undo {
top: 10px;
}
&-animate {
bottom: 10px;
}
}
canvas {
background: var(--background);
border-radius: var(--radius-inner);
}
}
}
}
}
&__list {
padding-top: 15px;
.comment-list__item {
.contain {
display: flex;
margin-bottom: 15px;
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 15px;
padding: 3px;
border: 1px solid var(--classD);
}
.content {
min-width: 0;
flex: 1;
border-bottom: 1px solid var(--classC);
padding-bottom: 15px;
.user {
display: flex;
align-items: center;
margin-bottom: 8px;
line-height: 20px;
color: var(--main);
.author {
margin-right: 10px;
}
.owner {
background: var(--theme);
color: #fff;
padding: 0 5px;
border-radius: 2px;
font-style: normal;
}
.agent {
margin-left: auto;
font-size: 12px;
color: var(--minor);
}
.waiting {
color: #e6a23c;
font-style: normal;
}
}
.substance {
width: 100%;
background: var(--classD);
padding: 12px 15px;
border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
color: var(--main);
margin-bottom: 8px;
word-break: break-all;
line-height: 24px;
.parent {
color: #388bff;
margin-bottom: 5px;
user-select: none;
font-weight: 500;
}
.owo_image {
height: 22px;
}
.draw_image {
max-width: 100%;
}
}
.handle {
display: flex;
align-items: center;
color: var(--minor);
.date {
margin-right: 10px;
}
}
}
}
.children {
padding-left: 63px;
.children {
padding-left: 0;
}
}
}
}
.joe_pagination {
padding-top: 0;
}
}
.profile-color-modes-illu-frame { .profile-color-modes-illu-frame {
opacity: 0; opacity: 0;
} }

View File

@ -210,6 +210,31 @@ document.addEventListener('DOMContentLoaded', () => {
$(window).on('scroll', () => calcProgress()); $(window).on('scroll', () => calcProgress());
} }
/* 评论框点击切换画图模式和文本模式 */
{
$('.joe_comment__respond-type .item').on('click', function () {
$(this).addClass('active').siblings().removeClass('active');
if ($(this).attr('data-type') === 'draw') {
$('.joe_comment__respond-form .body .draw').show().siblings().hide();
$('#joe_comment_draw').prop('width', $('.joe_comment__respond-form .body').width());
} else {
$('.joe_comment__respond-form .body .text').show().siblings().hide();
}
});
}
/* 激活画图功能 */
{
if ($('#joe_comment_draw').length !== 0) {
window.sketchpad = new Sketchpad({
element: '#joe_comment_draw',
height: 300,
penSize: 5,
color: '303133'
});
}
}
/* 懒加载 */ /* 懒加载 */
new LazyLoad('.lazyload'); new LazyLoad('.lazyload');

View File

@ -33,7 +33,9 @@ document.addEventListener('DOMContentLoaded', () => {
/* 设置文章内的链接为新窗口打开 */ /* 设置文章内的链接为新窗口打开 */
{ {
$('.joe_detail__article a').each(() => $(this).attr({ target: '_blank', rel: 'noopener noreferrer nofollow' })); $('.joe_detail__article a').each(function () {
$(this).attr({ target: '_blank', rel: 'noopener noreferrer nofollow' });
});
} }
/* 当前页的CID */ /* 当前页的CID */

File diff suppressed because one or more lines are too long

View File

@ -193,6 +193,78 @@ function _parseAsideLink($link)
echo str_replace("#", "?scroll=", $link); echo str_replace("#", "?scroll=", $link);
} }
function _getAgentOS($agent)
{
$os = "Linux";
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = 'Windows Vista';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = 'Windows 7';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = 'Windows 8';
} else if (preg_match('/nt 6.3/i', $agent)) {
$os = 'Windows 8.1';
} else if (preg_match('/nt 5.1/i', $agent)) {
$os = 'Windows XP';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = 'Windows 10';
} else {
$os = 'Windows X64';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = 'Android Pie';
} else if (preg_match('/android 8/i', $agent)) {
$os = 'Android Oreo';
} else {
$os = 'Android';
}
} else if (preg_match('/ubuntu/i', $agent)) {
$os = 'Ubuntu';
} else if (preg_match('/linux/i', $agent)) {
$os = 'Linux';
} else if (preg_match('/iPhone/i', $agent)) {
$os = 'iPhone';
} else if (preg_match('/mac/i', $agent)) {
$os = 'MacOS';
} else if (preg_match('/fusion/i', $agent)) {
$os = 'Android';
} else {
$os = 'Linux';
}
echo $os;
}
function _getAgentBrowser($agent)
{
if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
$outputer = 'Internet Explore';
} else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
$outputer = 'FireFox';
} else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$outputer = 'MicroSoft Edge';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '360 Fast Browser';
} else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$outputer = 'MicroSoft Edge';
} else if (preg_match('/UC/i', $agent)) {
$outputer = 'UC Browser';
} else if (preg_match('/QQ/i', $agent, $regs) || preg_match('/QQ Browser\/([^\s]+)/i', $agent, $regs)) {
$outputer = 'QQ Browser';
} else if (preg_match('/UBrowser/i', $agent, $regs)) {
$outputer = 'UC Browser';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = 'Opera';
} else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$outputer = 'Google Chrome';
} else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
$outputer = 'Safari';
} else {
$outputer = 'Google Chrome';
}
echo $outputer;
}
function _parseAsideReply($text, $type = true) function _parseAsideReply($text, $type = true)
{ {
@ -219,6 +291,22 @@ function _parseReply($text)
return $text; return $text;
} }
function _getParentReply($parent)
{
if ($parent !== "0") {
$db = Typecho_Db::get();
$commentInfo = $db->fetchRow($db->select('author')->from('table.comments')->where('coid = ?', $parent));
echo '<div class="parent"><span style="vertical-align: 1px;">@</span> ' . $commentInfo['author'] . '</div>';
}
}
function _parseCommentReply($text)
{
$text = _parseReply($text);
$text = preg_replace('/\{!{(.*?)\}!}/', '<img src="$1" class="draw_image"/>', $text);
echo $text;
}
function _getLazyload($type = true) function _getLazyload($type = true)
{ {

View File

@ -104,6 +104,7 @@
<?php $this->need('public/handle.php'); ?> <?php $this->need('public/handle.php'); ?>
<?php $this->need('public/copyright.php'); ?> <?php $this->need('public/copyright.php'); ?>
</div> </div>
<?php $this->need('public/comment.php'); ?>
</div> </div>
<?php $this->need('public/aside.php'); ?> <?php $this->need('public/aside.php'); ?>
</div> </div>

48
library/player.php Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
<title>M3U8 - Player</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
outline: none;
text-decoration: none;
}
html,
body,
#dplayer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.16/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
<script>
new DPlayer({
container: document.getElementById('dplayer'), // 播放器容器元素
autoplay: false, // 视频自动播放
theme: '#409eff', // 主题色
loop: false, // 视频循环播放
screenshot: false, // 开启截图,如果开启,视频和视频封面需要允许跨域
airplay: true, // 在 Safari 中开启 AirPlay
volume: 0.5, // 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
playbackSpeed: [2, 1.5, 1.25, 1], // 可选的播放速率,可以设置成自定义的数组
video: {
url: '<?php echo $_GET['url'] ?>',
}
})
</script>
</body>
</html>

37
live.php Normal file
View File

@ -0,0 +1,37 @@
<?php
/**
* 直播
*
* @package custom
*
**/
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<?php $this->need('public/include.php'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head>
<body>
<div id="Joe">
<?php $this->need('public/header.php'); ?>
<div class="joe_container">
<div class="joe_main">
</div>
<?php $this->need('public/aside.php'); ?>
</div>
<?php $this->need('public/footer.php'); ?>
</div>
</body>
</html>

View File

@ -14,7 +14,6 @@
<body> <body>
<div id="Joe"> <div id="Joe">
<?php $this->need('public/header.php'); ?> <?php $this->need('public/header.php'); ?>
<div class="joe_container"> <div class="joe_container">
<div class="joe_main"> <div class="joe_main">
<div class="joe_detail" data-cid="<?php echo $this->cid ?>"> <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
@ -22,10 +21,10 @@
<?php $this->need('public/handle.php'); ?> <?php $this->need('public/handle.php'); ?>
<?php $this->need('public/copyright.php'); ?> <?php $this->need('public/copyright.php'); ?>
</div> </div>
<?php $this->need('public/comment.php'); ?>
</div> </div>
<?php $this->need('public/aside.php'); ?> <?php $this->need('public/aside.php'); ?>
</div> </div>
<?php $this->need('public/footer.php'); ?> <?php $this->need('public/footer.php'); ?>
</div> </div>
</body> </body>

View File

@ -47,6 +47,7 @@
<?php $this->need('public/handle.php'); ?> <?php $this->need('public/handle.php'); ?>
<?php $this->need('public/copyright.php'); ?> <?php $this->need('public/copyright.php'); ?>
</div> </div>
<?php $this->need('public/comment.php'); ?>
</div> </div>
<?php $this->need('public/aside.php'); ?> <?php $this->need('public/aside.php'); ?>
</div> </div>

119
public/comment.php Normal file
View File

@ -0,0 +1,119 @@
<?php $this->comments()->to($comments); ?>
<div class="joe_comment">
<h3 class="joe_comment__title">评论 <?php if ($this->allow('comment')) : ?>(<?php $this->commentsNum(); ?>)<?php endif; ?></h3>
<?php if ($this->allow('comment')) : ?>
<div class="joe_comment__respond">
<div class="joe_comment__respond-type">
<button class="item" data-type="draw">画图模式</button>
<button class="item active" data-type="text">文本模式</button>
</div>
<div class="joe_comment__respond-form" data-action="<?php $this->commentUrl() ?>">
<div class="head">
<div class="list">
<input type="text" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." />
</div>
<div class="list">
<input type="text" value="<?php $this->user->hasLogin() ? $this->user->mail() : $this->remember('mail') ?>" autocomplete="off" name="mail" placeholder="请输入邮箱..." />
</div>
<div class="list">
<input type="text" value="<?php $this->remember('url'); ?>" autocomplete="off" name="url" placeholder="(选填)请输入网址..." />
</div>
</div>
<div class="body">
<textarea class="text" name="text" autocomplete="off" rows="5" placeholder="说点什么吧,点击右上角可切换成画图模式哦~"></textarea>
<div class="draw" style="display: none;">
<ul class="line">
<li data-line="3"></li>
<li data-line="5" class="active"></li>
<li data-line="8"></li>
</ul>
<ul class="color">
<li data-color="#303133" class="active"></li>
<li data-color="#67c23a"></li>
<li data-color="#e6a23c"></li>
<li data-color="#f56c6c"></li>
</ul>
<svg title="撤销" class="icon icon-undo" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M754.133333 337.333333c-16.4-2.266667-32.933333-3.6-49.6-3.6h-7.066666V161.866667c0-40.4-14.666667-65.733333-36.666667-70.133334-1.466667-0.4-3.066667 0-4.666667-0.133333-2.8-0.266667-5.466667-0.666667-8.533333-0.133333-10.133333 1.466667-21.2 6.533333-33.066667 16L192 447.466667c-3.066667 2.4-4.8 5.466667-7.466667 8-3.2 3.2-6.4 6.4-9.066666 9.866666-2.4 3.333333-4.533333 6.533333-6.533334 9.866667-2.666667 4.666667-4.666667 9.466667-6.4 14.4-0.8 2.266667-1.866667 4.4-2.4 6.666667-0.8 3.333333-0.933333 6.666667-1.333333 9.866666-0.133333 1.333333-0.4 2.533333-0.4 3.866667-0.266667 3.066667-0.133333 6 0 9.066667 0.133333 1.733333 0.4 3.333333 0.666667 4.933333 0.4 2.8 0.4 5.733333 1.066666 8.533333 0.8 3.866667 2.666667 7.333333 4.133334 11.066667 1.066667 2.8 2.266667 5.733333 3.733333 8.533333 2.533333 4.8 5.466667 9.466667 9.2 14l0.133333 0.133334c4.4 5.466667 8.666667 11.066667 14.666667 15.866666L611.466667 918.666667c45.466667 36.4 85.466667-0.533333 85.466666-54.666667V680.4h63.6c22 0 43.466667 1.333333 64.133334 3.6 9.466667 1.066667 18.533333 3.2 27.866666 4.666667 11.066667 1.866667 22.4 3.333333 33.2 5.866666 8.666667 2 16.8 4.933333 25.2 7.466667 11.066667 3.333333 22.133333 6.266667 32.8 10.4 7.2 2.666667 14 6.266667 21.066667 9.333333 11.333333 5.066667 22.8 10 33.6 16 5.466667 3.066667 10.533333 6.8 15.866667 10 11.866667 7.333333 23.6 14.666667 34.533333 23.066667 3.6 2.8 6.933333 6.133333 10.533333 9.066667 12.133333 10 24.133333 20.266667 35.333334 31.733333 1.2 1.2 2.266667 2.666667 3.466666 4 26.666667 28.133333 50.666667 60.4 71.333334 97.2 8.533333 14 17.2 19.333333 23.733333 18.4 6.666667-0.533333 11.333333-7.333333 11.333333-18.4-3.333333-255.733333-206.4-540.933333-450.4-575.466667z m6.4 276.266667h-130.4V862.666667c-6-2.4-12.266667-5.733333-18.533333-10.8L232.8 548c-10-21.333333-10.133333-44.933333-0.4-66.266667l382.133333-307.466666c5.2-4.266667 10.4-7.466667 15.466667-10v236.8l66.933333-0.533334h7.6c99.866667 0 194.4 43.866667 274.133334 112.533334 62.8 73.733333 123.2 161.466667 149.066666 254.133333-85.733333-102-217.866667-153.6-367.2-153.6z m0 0" fill="" p-id="1775"></path>
</svg>
<svg title="动画" class="icon icon-animate" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M954.9 228.4H619.1c-4.5 0-8.1 3.6-8.1 8s53.8 56 58.2 56H955c4.4 0 8.1-3.6 8.1-8v-48c-0.1-4.4-3.7-8-8.2-8z m5.3 352H837.9c-1.5 0-2.8 3.6-2.8 8v48c0 4.4 1.3 8 2.8 8h122.4c1.5 0 2.8-3.6 2.8-8v-48c-0.1-4.4-1.3-8-2.9-8z m-1.6 128H807.4c-2.4 0-4.4 3.6-4.4 8v48c0 4.4 2 8 4.4 8h151.2c2.4 0 4.4-3.6 4.4-8v-48c0-4.4-2-8-4.4-8z" p-id="4541"></path>
<path d="M457.4 798.5l-171.7 90.3c-31.3 16.4-70 4.4-86.4-26.9-6.5-12.5-8.8-26.7-6.4-40.6l32.8-191.2-139-135.4c-25.3-24.7-25.8-65.2-1.2-90.5 9.8-10.1 22.7-16.6 36.6-18.7l192-27.9 85.9-174c15.6-31.7 54-44.7 85.7-29.1 12.6 6.2 22.8 16.4 29.1 29.1l85.9 174 192 27.9c35 5.1 59.2 37.6 54.1 72.5-2 13.9-8.6 26.8-18.7 36.6L689.2 630.1 722 821.4c6 34.8-17.4 67.9-52.3 73.9-13.9 2.4-28.1 0.1-40.6-6.4l-171.7-90.4zM656 837.8c1.2 0.7 2.7 0.9 4.1 0.6 3.5-0.6 5.8-3.9 5.2-7.4l-37.9-221L788 453.4c1-1 1.7-2.3 1.9-3.7 0.5-3.5-1.9-6.7-5.4-7.3l-222-32.3-99.3-201.2c-0.6-1.3-1.6-2.3-2.9-2.9-3.2-1.6-7-0.3-8.6 2.9l-99.3 201.2-222 32.3c-1.4 0.2-2.7 0.9-3.7 1.9-2.5 2.5-2.4 6.6 0.1 9.1L287.5 610l-37.9 221.1c-0.2 1.4 0 2.8 0.6 4.1 1.6 3.1 5.5 4.3 8.6 2.7l198.6-104.4L656 837.8z" p-id="4542"></path>
</svg>
<canvas id="joe_comment_draw" height="300"></canvas>
</div>
</div>
</div>
</div>
<?php if ($comments->have()) : ?>
<div class="joe_comment__list">
<?php $comments->listComments(); ?>
</div>
<?php $comments->pageNav(
'<svg class="icon icon-prev" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
'<svg class="icon icon-next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
1,
'...',
array(
'wrapTag' => 'ul',
'wrapClass' => 'joe_pagination',
'itemTag' => 'li',
'textTag' => 'a',
'currentClass' => 'active',
'prevClass' => 'prev',
'nextClass' => 'next'
)
);
?>
<?php else : ?>
<div class="joe_comment__empty">
<svg class="joe_comment__empty-icon" viewBox="0 0 2148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="120" height="120">
<path d="M1635.928611 983.061118H449.948176a20.469441 20.469441 0 0 0 0 40.938882h1185.980435a20.469441 20.469441 0 1 0 0-40.938882z m327.212826-634.417113h-40.803323v-40.91177a20.442329 20.442329 0 1 0-40.884658 0v40.91177h-40.911771a20.469441 20.469441 0 0 0 0 40.938883h40.911771v40.938882a20.442329 20.442329 0 1 0 40.884658 0v-40.938882h40.91177a20.469441 20.469441 0 0 0 0-40.938883z m-1431.50528-266.021397h20.44233v20.442329a20.469441 20.469441 0 1 0 40.91177 0V82.622608h20.442329a20.469441 20.469441 0 0 0 0-40.938882h-20.442329V21.214285a20.469441 20.469441 0 1 0-40.91177 0v20.469441h-20.44233a20.469441 20.469441 0 0 0 0 40.938882zM81.850692 635.161956a81.877764 81.877764 0 1 0 81.904876 81.850652A81.82354 81.82354 0 0 0 81.850692 635.161956z m0 122.789534a40.938882 40.938882 0 1 1 40.884658-40.938882 40.938882 40.938882 0 0 1-40.884658 40.938882z m2024.54972-61.381211A40.938882 40.938882 0 1 0 2147.312182 737.482049a40.91177 40.91177 0 0 0-40.91177-40.91177z m-1307.577048 62.004784h47.174606v37.631237a13.908375 13.908375 0 0 0 27.81675 0v-37.631237h335.671721v37.631237a13.908375 13.908375 0 1 0 27.816751 0v-37.631237h47.174605a69.352093 69.352093 0 0 0 69.243646-69.243646v-217.05741a69.270757 69.270757 0 0 0-52.190297-67.10181v-77.377198c0-24.210875-12.932349-46.767928-36.519651-63.387488-22.123263-15.670645-51.160047-24.210875-81.769317-24.210875H900.058984c-30.60927 0-59.646053 8.621566-81.769317 24.210875-23.505967 16.619559-36.519652 39.095277-36.519652 63.387488v77.350086a69.270757 69.270757 0 0 0-52.190296 67.128922v217.084522a69.297869 69.297869 0 0 0 69.243645 69.216534z m10.844737-430.780064c0-32.534211 41.399783-59.646053 90.445107-59.646054h283.047634c49.072435 0 90.472218 27.355849 90.472219 59.646054v76.048718a69.297869 69.297869 0 0 0-58.371797 68.43029v65.77333a94.62033 94.62033 0 0 0-67.156034-27.816751h-212.909298a94.674554 94.674554 0 0 0-67.156034 27.870974v-65.827553a69.324981 69.324981 0 0 0-58.42602-68.403179z m405.593163 277.327036v6.588177a6.994855 6.994855 0 0 1-6.967744 6.967744H875.007642a6.994855 6.994855 0 0 1-6.967744-6.967744v-6.588177a67.237369 67.237369 0 0 1 67.156034-67.156034h212.909298a67.237369 67.237369 0 0 1 67.156034 67.156034z m-457.756348-132.848028a41.399783 41.399783 0 0 1 82.799567 0v161.776364a13.962599 13.962599 0 0 0 13.908375 13.908375h375.038116a13.962599 13.962599 0 0 0 13.908376-13.908375v-161.776364a41.399783 41.399783 0 0 1 82.799566 0v217.084522a41.454007 41.454007 0 0 1-41.399783 41.399783H798.823364a41.454007 41.454007 0 0 1-41.318448-41.426895z" p-id="21273"></path>
</svg>
<span>暂无评论,期待你来坐沙发</span>
</div>
<?php endif; ?>
<?php else : ?>
<div class="joe_comment__close">
<svg class="joe_comment__close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18417" width="18" height="18">
<path d="M512.3072 0.9728C794.624 0.9728 1023.488 202.24 1023.488 450.56a402.8416 402.8416 0 0 1-39.2704 173.2608 232.448 232.448 0 0 0-52.6336-45.9776c16.384-39.7824 25.2928-82.688 25.2928-127.2832 0-211.0976-199.1168-382.1568-444.6208-382.1568-245.5552 0-444.5696 171.0592-444.5696 382.1568 0 133.4272 79.5136 250.88 200.0384 319.1808v107.9808l102.0416-65.1264a510.1568 510.1568 0 0 0 142.4896 20.1216l19.4048-0.3584c19.4048-0.7168 38.7584-2.5088 57.9584-5.4272l3.584 13.4144c5.376 17.7152 12.8512 34.7136 22.3232 50.688l-20.6336 3.328a581.4784 581.4784 0 0 1-227.1232-12.288l-131.1232 100.352c-19.6608 15.0016-35.6352 7.168-35.6352-17.664v-157.3888C79.4112 725.1968 1.024 595.968 1.024 450.56 1.024 202.24 229.9392 0.9728 512.3072 0.9728z m318.464 617.0112c97.4848 0 176.7936 80.4352 176.7936 179.2s-79.3088 179.0464-176.7936 179.0464c-97.4336 0-176.7424-80.2816-176.7424-179.0464 0-98.816 79.3088-179.1488 176.7424-179.1488z m-103.0144 101.0176a131.1744 131.1744 0 0 0-25.7536 78.1824c0 71.8848 57.8048 130.4064 128.768 130.4064 28.8768 0 55.552-9.6256 77.056-26.0096z m103.0144-52.3264c-19.712 0-39.1168 4.5568-56.6784 13.312l172.2368 174.592c8.4992-17.3056 13.1584-36.864 13.1584-57.3952 0-71.9872-57.8048-130.5088-128.7168-130.5088z m-318.464-283.5456l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 445.6448 450.56a67.072 67.072 0 0 1 66.6624-67.4304z m266.752 0l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584a67.072 67.072 0 0 1-59.8528-67.072h-0.0512l0.3072-6.8608a67.072 67.072 0 0 1 66.4064-60.5696z m-533.504 0l6.8608 0.3584A67.072 67.072 0 0 1 312.2688 450.56l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 178.8928 450.56a67.072 67.072 0 0 1 66.6624-67.4304z" p-id="18418"></path>
</svg>
<span>博主关闭了当前页面的评论</span>
</div>
<?php endif; ?>
</div>
<?php
function threadedComments($comments, $options)
{ ?>
<li class="comment-list__item" id="li-<?php $comments->theId(); ?>">
<div class="contain" id="<?php $comments->theId(); ?>">
<img class="avatar lazyload" src="<?php _getAvatarLazyload() ?>" data-original="<?php _getAvatarByMail($comments->mail); ?>" alt="<?php $comments->author(); ?>" />
<div class="content">
<div class="user">
<span class="author"><?php $comments->author(); ?></span>
<?php if ($comments->authorId === $comments->ownerId) : ?>
<i class="owner">作者</i>
<?php endif; ?>
<?php if ($comments->status === "waiting") : ?>
<em class="waiting">(评论审核中...</em>
<?php endif; ?>
<div class="agent"><?php _getAgentOS($comments->agent); ?> · <?php _getAgentBrowser($comments->agent); ?></div>
</div>
<div class="substance">
<?php _getParentReply($comments->parent) ?>
<?php echo _parseCommentReply($comments->content); ?>
</div>
<div class="handle">
<time class="date" datetime="<?php $comments->date('Y-m-d'); ?>"><?php $comments->date('Y-m-d'); ?></time>
</div>
</div>
</div>
<?php if ($comments->children) : ?>
<div class="children">
<?php $comments->threadedComments($options); ?>
</div>
<?php endif; ?>
</li>
<?php } ?>