This commit is contained in:
杜恒 2021-01-27 17:10:23 +08:00
parent 775a57e7dd
commit c8c194ab55
11 changed files with 350 additions and 177 deletions

File diff suppressed because one or more lines are too long

View File

@ -1493,11 +1493,11 @@ html[data-night='night'] {
height: 44px;
line-height: 44px;
width: 44px;
transition: opacity 0.35s;
cursor: pointer;
text-align: center;
font-size: 13px;
color: var(--main);
user-select: none;
}
}
}
@ -1804,7 +1804,6 @@ html[data-night='night'] {
padding: 0 15px;
height: 40px;
color: var(--routine);
font-size: 14px;
}
&:nth-child(2) {
position: relative;
@ -1837,7 +1836,7 @@ html[data-night='night'] {
vertical-align: middle;
color: var(--routine);
background: transparent;
font-size: 14px;
font-size: 15px;
}
.draw {
position: relative;
@ -1915,6 +1914,16 @@ html[data-night='night'] {
justify-content: flex-end;
padding: 0 15px 15px;
.submit {
.cancle {
display: none;
color: var(--main);
cursor: pointer;
margin-right: 10px;
transition: color 0.35s;
&:hover {
color: var(--theme);
}
}
button {
border-radius: 3px;
height: 32px;
@ -1928,89 +1937,118 @@ html[data-night='night'] {
}
}
}
&__list {
.comment-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;
&__item {
&-contain {
.term {
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;
}
}
.owner {
background: var(--theme);
color: #fff;
padding: 0 5px;
border-radius: 2px;
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%;
}
}
.agent {
margin-left: auto;
font-size: 12px;
.handle {
display: flex;
align-items: center;
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;
.date {
margin-right: 10px;
}
.reply {
display: flex;
align-items: center;
color: var(--main);
font-size: 13px;
cursor: pointer;
transition: color 0.35s;
.icon {
margin-right: 5px;
fill: var(--main);
transition: fill 0.35s;
}
&:hover {
color: var(--theme);
.icon {
fill: var(--theme);
}
}
}
}
}
}
}
.children {
&-children {
padding-left: 63px;
.children {
.comment-list__item-children {
padding-left: 0;
}
}
.joe_comment__respond {
margin-left: 63px;
margin-bottom: 15px;
animation: showComment 0.5s;
}
}
.comment-list {
padding-top: 0;
}
}
.joe_pagination {
@ -2098,6 +2136,24 @@ html[data-night='night'] {
.profile-color-modes-illu-frame:nth-child(10) {
animation: none;
}
@keyframes showComment {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes box_shadow {
0% {
box-shadow: 0 0 0 0 #f56c6c;

View File

@ -1,3 +1,4 @@
/* 搜索页面需要用到的JS */
console.time('Archive.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
/* 激活列表特效 */

View File

@ -1,3 +1,4 @@
/* 全局公用JS */
console.time('Global.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
@ -216,8 +217,12 @@ document.addEventListener('DOMContentLoaded', () => {
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());
/* 设置表单格式为画图模式 */
$('.joe_comment__respond-form').attr('data-type', 'draw');
} else {
$('.joe_comment__respond-form .body .text').show().siblings().hide();
/* 设置表单格式为文字模式 */
$('.joe_comment__respond-form').attr('data-type', 'text');
}
});
}
@ -244,8 +249,76 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
/* 重写评论功能 */
{
const respond = $('.joe_comment__respond');
/* 重写回复功能 */
$('.joe_comment__reply').on('click', function () {
/* 父级ID */
const coid = $(this).attr('data-coid');
/* 当前的项 */
const item = $('#' + $(this).attr('data-id'));
/* 添加自定义属性表示父级ID */
respond.find('.joe_comment__respond-form').attr('data-coid', coid);
item.append(respond);
$(".joe_comment__respond-type .item[data-type='text']").click();
$('.joe_comment__cancle').show();
window.scrollTo({
top: item.offset().top - $('.joe_header').height() - 15,
behavior: 'smooth'
});
});
/* 重写取消回复功能 */
$('.joe_comment__cancle').on('click', function () {
/* 移除自定义属性父级ID */
respond.find('.joe_comment__respond-form').removeAttr('data-coid');
$('.joe_comment__cancle').hide();
$('.joe_comment__title').after(respond);
$(".joe_comment__respond-type .item[data-type='text']").click();
window.scrollTo({
top: $('.joe_comment').offset().top - $('.joe_header').height() - 15,
behavior: 'smooth'
});
});
}
/* 激活评论提交 */
{
$('.joe_comment__respond-form').on('submit', function (e) {
e.preventDefault();
const url = $('.joe_comment__respond-form').attr('action');
const type = $('.joe_comment__respond-form').attr('data-type');
const parent = $('.joe_comment__respond-form').attr('data-coid');
const author = $(".joe_comment__respond-form .head input[name='author']").val();
const mail = $(".joe_comment__respond-form .head input[name='mail']").val();
let text = $(".joe_comment__respond-form .body textarea[name='text']").val();
if (author.trim() === '') return alert('请输入用户名!');
if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return alert('请输入正确的邮箱!');
if (type === 'text' && text.trim() === '') return alert('请输入评论内容!');
if (type === 'draw') {
const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1);
text = '{!{' + txt + '}!} ';
}
$.ajax({
url,
type: 'POST',
data: { author, mail, text, parent },
success(res) {
let arr = [],
str = '';
arr = $(res).contents();
Array.from(arr).forEach(_ => {
if (_.parentNode.className === 'container') str = _;
});
if (!/Joe/.test(res)) return alert(str.textContent.trim() || '');
window.location.href = Joe.changeURLArg(location.href, 'scroll', 'joe_comment');
}
});
});
}
/* 懒加载 */
new LazyLoad('.lazyload');
console.timeEnd('Global.js执行时长');
});
});

View File

@ -1,3 +1,4 @@
/* 首页需要用到的JS */
console.time("Index.js执行时长")
document.addEventListener('DOMContentLoaded', () => {
/* 激活轮播图功能 */

View File

@ -1,6 +1,10 @@
/* 详情页和独立页面需要用到的JS */
console.time('Post&Page.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid');
/* 获取本篇文章百度收录情况 */
{
$.ajax({
@ -62,9 +66,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid');
/* 激活浏览功能 */
{
let viewsArr = localStorage.getItem(Joe.encryption('views')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('views')))) : [];
@ -137,6 +138,13 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
/* 密码保护文章,输入密码访问 */
{
$('.joe_detail__article-protected').on('submit', function (e) {
});
}
console.timeEnd('Post&Page.js执行时长');
});

View File

@ -145,3 +145,4 @@ function _pushRecord($self)
$result = curl_exec($ch);
$self->response->throwJson(json_decode($result));
}

View File

@ -262,4 +262,4 @@ function _getAsideAuthorNav()
";
}
}
}
}

View File

@ -40,16 +40,16 @@
<div class="joe_detail__article">
<?php if ($this->is('post')) : ?>
<?php if ($this->hidden) : ?>
<div data-cid="<?php $this->cid(); ?>" class="joe_detail__article-protected" data-action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>">
<form class="joe_detail__article-protected" action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>">
<div class="contain">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M812.63104 664.064h-439.0912a79.0272 79.0272 0 0 0-78.95552 79.09888v196.9664h518.04672a79.0272 79.0272 0 0 0 78.9504-79.09888v-117.84704a79.0272 79.0272 0 0 0-78.9504-79.11936z" fill="#F4CA1C" p-id="7008"></path>
<path d="M812.97408 382.976h-32.36864V313.3696a272.256 272.256 0 1 0-544.512 0V382.976h-25.0624A113.91488 113.91488 0 0 0 97.28 496.77312v367.32928A113.91488 113.91488 0 0 0 211.03104 977.92h601.94304A113.90976 113.90976 0 0 0 926.72 864.1024V496.77312A113.90976 113.90976 0 0 0 812.97408 382.976zM305.7152 313.3696a202.63424 202.63424 0 1 1 405.26848 0V382.976H305.7152V313.3696zM857.088 864.1024a44.1856 44.1856 0 0 1-44.12416 44.15488H211.03104a44.19584 44.19584 0 0 1-44.11904-44.15488V496.77312a44.19584 44.19584 0 0 1 44.11904-44.16512h601.94304a44.1856 44.1856 0 0 1 44.12416 44.16v367.3344z m-331.71456-309.9648a62.69952 62.69952 0 0 0-34.816 114.82112v103.45984a34.816 34.816 0 1 0 69.632 0v-103.45984a62.69952 62.69952 0 0 0-34.80576-114.82112z" fill="#595BB3" p-id="7009"></path>
</svg>
<input class="password" type="password" placeholder="请输入访问密码...">
<span class="submit">确定</span>
<button class="submit" type="submit">确定</button>
</div>
</div>
</form>
<?php else : ?>
<?php _parseContent($this, $this->user->hasLogin()) ?>
<?php endif; ?>

View File

@ -1,116 +1,134 @@
<?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 class="foot">
<div class="owo" id="OwO_Container"></div>
<div class="submit">
<button>发表评论</button>
</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 endif; ?>
<?php else : ?>
<?php if ($this->hidden) : ?>
<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>
<span>当前文章受密码保护,无法评论</span>
</div>
<?php else : ?>
<?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>
<form method="post" class="joe_comment__respond-form" action="<?php $this->commentUrl() ?>" data-type="text">
<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" 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 class="foot">
<div class="submit">
<span class="cancle joe_comment__cancle">取消</span>
<button type="submit">发表评论</button>
</div>
</div>
</form>
</div>
<?php if ($comments->have()) : ?>
<?php $comments->listComments(); ?>
<?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 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; ?>
<?php endif; ?>
</div>
<?php
function threadedComments($comments, $options)
{ ?>
<li class="comment-list__item" id="<?php $comments->theId(); ?>">
<div class="contain">
<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>
<li class="comment-list__item">
<div class="comment-list__item-contain" id="<?php $comments->theId(); ?>">
<div class="term">
<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>
<span class="reply joe_comment__reply" data-id="<?php $comments->theId(); ?>" data-coid="<?php $comments->coid(); ?>">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
<path d="M947.2 467.968h-276.48v61.44h276.48zM947.2 650.24h-363.52v61.44h363.52zM947.2 832.512H482.304v61.44H947.2zM519.168 179.2l122.368 85.504-352.256 503.808-122.368-85.504L519.168 179.2m-14.848-85.504L81.92 698.368l223.232 156.16L727.04 249.856 504.32 93.696z" p-id="6645"></path>
<path d="M433.152 195.072L397.824 245.76l223.232 155.648 35.328-50.176zM143.36 740.864l-61.44-42.496v237.056l222.72-81.408-60.928-43.008-100.352 36.864z" p-id="6646"></path>
</svg>回复
</span>
</div>
</div>
</div>
</div>
<?php if ($comments->children) : ?>
<div class="children">
<div class="comment-list__item-children">
<?php $comments->threadedComments($options); ?>
</div>
<?php endif; ?>

View File

@ -10,6 +10,21 @@
BAIDU_PUSH: <?php echo $this->options->JBaiduToken ? 'true' : 'false' ?>,
encryption: str => window.btoa(unescape(encodeURIComponent(str))),
decrypt: str => decodeURIComponent(escape(window.atob(str))),
changeURLArg: function(url, arg, arg_val) {
let pattern = arg + '=([^&]*)'
let replaceText = arg + '=' + arg_val
if (url.match(pattern)) {
let tmp = '/(' + arg + '=)([^&]*)/gi'
return url.replace(eval(tmp), replaceText)
} else {
if (url.match('[?]')) {
return url + '&' + replaceText
} else {
return url + '?' + replaceText
}
}
return url + '\n' + arg + '\n' + arg_val
}
}
</script>
<style>