From 1718bd7eda230ecc5f26fa75938c712c0ea38ad4 Mon Sep 17 00:00:00 2001
From: Eltrac <45323514+BigCoke233@users.noreply.github.com>
Date: Thu, 25 Jul 2019 18:25:55 +0800
Subject: [PATCH] Add files via upload
---
about.php | 41 +++++++++++++
assets/css/dark.miracles.css | 34 +++++++++--
assets/css/miracles.min.css | 83 +++++++++++++++++++++++---
assets/js/comment.ajax.js | 109 +++++++++++++++++++++++++++++++++++
assets/js/miracles.min.js | 25 +++++++-
includes/comments.php | 3 +-
includes/footer.php | 2 +-
includes/head.php | 16 ++---
includes/header.php | 1 +
index.php | 2 +-
libs/Options.php | 4 ++
screenshot.png | Bin 0 -> 623078 bytes
12 files changed, 295 insertions(+), 25 deletions(-)
create mode 100644 about.php
create mode 100644 assets/js/comment.ajax.js
create mode 100644 screenshot.png
diff --git a/about.php b/about.php
new file mode 100644
index 00000000..6fb1152d
--- /dev/null
+++ b/about.php
@@ -0,0 +1,41 @@
+need('includes/head.php');
+$this->need('includes/header.php');
+?>
+
+
+
+
+
+ author->gravatar(300); ?>
+ fields->name==!''): ?>
+
fields->name(); ?>
+
+
+
+ fields->github==!''): ?>
+
+
+ fields->qq==!''): ?>
+
+
+ fields->bilibili==!''): ?>
+
+
+ fields->email==!''): ?>
+
+
+
+
+
+ content(); ?>
+
+
+need('includes/comments.php'); ?>
+
+need('includes/footer.php'); ?>
\ No newline at end of file
diff --git a/assets/css/dark.miracles.css b/assets/css/dark.miracles.css
index bb722434..1b698040 100644
--- a/assets/css/dark.miracles.css
+++ b/assets/css/dark.miracles.css
@@ -35,6 +35,12 @@
.body-dark .comment-reply a {
background: transparent
}
+/* No Shadow */
+.body-dark .options {
+ box-shadow: 0 0 0 #fff;
+ -moz-box-shadow: 0 0 0 #fff;
+ -webkit-box-shadow: 0 0 0 #fff;
+}
/* Need Shadow */
.body-dark .dark-button,
.body-dark .post-body,
@@ -44,7 +50,8 @@
.body-dark .OwO-body,
.body-dark .OwO-open .OwO-logo,
.body-dark .OwO .OwO-body .OwO-items .OwO-item:hover,
-.body-dark .options {
+.body-dark .options,
+.body-dark .comment-pagenav a {
box-shadow: 0 0 36px #323232!important;
-moz-box-shadow: 0 0 36px #323232!important;
-webkit-box-shadow: 0 0 36px #323232!important
@@ -65,7 +72,11 @@
.body-dark .comment-author,
.body-dark .bubble.saying-body,
.body-dark .tags-item a,
-.body-dark .options-button-active {
+.body-dark .options-button-active,
+.body-dark .drawer-footer,
+.body-dark .drawer-search,
+.body-dark .drawer-content a:hover,
+.body-dark .comment-pagenav a {
background: #646464!important;
}
/* Need #5a5a5a bg */
@@ -88,7 +99,11 @@
.body-dark .dialog,
.body-dark .options,
.body-dark .options-theme-label,
-.body-dark .options-family-button {
+.body-dark .options-family-button,
+.body-dark .drawer,
+.body-dark .drawer-icon,
+.body-dark .drawer-search-form input,
+.body-dark .drawer-search-form button {
background: #5a5a5a!important
}
/* OwO */
@@ -126,7 +141,13 @@
.body-dark .mobile-menu-footer,
.body-dark .options-family-button,
.body-dark .options-theme-item:hover .options-theme-label,
-.body-dark .options-contentsize-button {
+.body-dark .options-contentsize-button,
+.body-dark .drawer,
+.body-dark .drawer a,
+.body-dark .drawer-open .drawer-button,
+.body-dark .drawer-icon,
+.body-dark .drawer-search-form button,
+.body-dark .drawer-search-form input {
color: #fafafa!important
}
/* Need #5a5a5a color */
@@ -146,7 +167,10 @@
.body-dark .mobile-menu-title,
.body-dark .mobile-menu-footer,
.body-dark .saying-textarea,
-.body-dark .options hr{
+.body-dark .options hr,
+.body-dark .drawer,
+.body-dark .drawer-search-form button,
+.body-dark .drawer-search-form input {
border-color: #6e6e6e!important;
}
.body-dark .tip {
diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
index 08420f65..10257223 100644
--- a/assets/css/miracles.min.css
+++ b/assets/css/miracles.min.css
@@ -83,15 +83,19 @@ hr {
}
.html-filter-sepia {
filter: sepia(30%);
- -webkit-filter: sepia(30%);;
- -moz-filter: sepia(30%);;
- -ms-filter: sepia(30%);;
- -o-filter: sepia(30%);;
+ -webkit-filter: sepia(30%);
+ -moz-filter: sepia(30%);
+ -ms-filter: sepia(30%);
+ -o-filter: sepia(30%);
filter:progid:DXImageTransform.Microsoft.BasicImage(sepia=0.30);
}
/* 组件 */
/* > 按钮 */
+button {
+ outline: none;
+ cursor: pointer
+}
.button {
border: 3px solid #ccc;
border-radius: 30px;
@@ -114,6 +118,36 @@ hr {
background: rgb(235,235,235);
color: #fff;
}
+/* > Alert */
+.alert {
+ background: rgb(80,80,80);
+ color: #fff;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ padding: 10px 18px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ margin: 0 auto;
+ box-shadow: 0 0 4px #000;
+ -moz-box-shadow: 0 0 4px #000;
+ -webkit-box-shadow: 0 0 4px #000;
+ z-index: 40;
+ transition: all 0.3s;
+}
+.alert.ready {
+ top: -200px;
+}
+.alert-close {
+ border: none;
+ background: rgb(0,0,0,0);
+ transform: scale(0.8);
+ color: #fff;
+ float: right;
+ margin-top: -36px;
+}
/* Large Mask */
.mask {
@@ -124,7 +158,7 @@ hr {
right: 0;
background: rgb(70,70,70,0);
z-index: -100;
- transition: all 0.4s;
+ transition: background 0.4s;
}
.mask-open {
background: rgb(70,70,70,0.7);
@@ -272,7 +306,7 @@ hr {
color: rgb(80,80,80);
text-shadow: 0 0 0 #fff;
}
-.drawer-open #live2dcanvas {
+#live2dcanvas {
z-index: 0!important;
}
@@ -343,7 +377,10 @@ hr {
.index-banner {
margin-top: -21px;
width: 100%;
- text-align: center
+ text-align: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
}
.dark-cover,
.banner-mask {
@@ -632,6 +669,34 @@ hr {
font-size: 160%;
}
+/* 关于页面 */
+.about-avatar img {
+ margin: 0 auto;
+ display: block;
+ padding: 2px;
+ border: 3px solid #ddd;
+ border-radius: 100%;
+ height: 200px;
+ width: 200px;
+}
+.about-name {
+ text-align: center;
+ font-size: 35px;
+ margin: 20px 0;
+ margin-bottom: 0;
+}
+.about-social {
+ text-align: center;
+ margin-top: 15px;
+}
+.about-social a {
+ transform: scale(1.2);
+ border-radius: 100%;
+ padding: 5px 10px;
+}
+.about-social a:hover {
+ background: rgb(246,246,246);
+}
/* 标签云 */
.tags-list {
@@ -1316,6 +1381,10 @@ iframe[src*="//player.bilibili.com/player.html"] {
}
/* > Pad and up */
@media (min-width:768px) {
+ .alert {
+ min-width: 300px;
+ max-width: 700px
+ }
.drawer-avatar img {
height: 220px;
width: 220px;
diff --git a/assets/js/comment.ajax.js b/assets/js/comment.ajax.js
new file mode 100644
index 00000000..44d770eb
--- /dev/null
+++ b/assets/js/comment.ajax.js
@@ -0,0 +1,109 @@
+/**
+ * Ajax Comment
+ * 半成品,还有报错,所以没有引用
+ */
+var replyTo = '';
+var bindButton = function() {
+ //绑定“评论回复”和“取消回复”的事件
+ $(".comment-reply a").click(
+ function () {
+ replyTo = $(this).parent().parent().parent().parent().parent().parent().attr("id");
+ }
+ );
+ $(".cancel-comment-reply a").click(function () { replyTo = ''; });
+}
+function commentCounts() {
+ //显示在评论区的评论数加一
+ var counts = parseInt($(".comment-title").text());
+ $(".comment-title").html($(".comment-title").html().replace(/\d+/, counts + 1));
+};
+function beforeSendComment() {
+ //发送前的一些处理
+ $(".comment-submit button").text("提交中");
+}
+function afterSendComment(ok) {
+ //发送后的处理
+ //清空replyTo变量,以及结束过渡动画、重新绑定回复按钮等等
+ //ok作为一个评论或失败的标志
+
+ if (ok) {
+ $(".comment-textarea").val('');
+ replyTo = '';
+ }
+ bindButton();
+}
+//主体部分
+beforeSendComment();
+$("#comment-form").submit(function() {
+ //监听评论表单submit事件
+ var commentData = $(this).serializeArray(); //获取表单POST的数据
+ beforeSendComment();
+ $.ajax({
+ type: $(this).attr('method'),
+ url: $(this).attr('action'),
+ data: commentData,
+ error: function(e) {
+ //失败的处理
+ //这里比较随意,比如可以直接刷新页面
+ console.log('Ajax Comment Error');
+ window.location.realod();
+ },
+ success: function(data) {
+ if (!$('.comments', data).length) {
+ var msg = $('title').eq(0).text().trim().toLowerCase() === 'error' ? $('.container', data).eq(0).text() : '评论提交失败!';
+ alertSend(msg);
+ afterSendComment(false);
+ return false;
+ }
+ }
+ })
+ return false;
+});
+var newComment;
+/** 获取新评论的id */
+newCommentId = $(".comment-list", data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function (a, b) { return a - b }).pop();
+if(replyTo === '') {
+ if(!$('.comment-list').length) {
+ //检查是否已有评论
+ newComment = $("#li-comment-" + newCommentId, data);
+ //没有的话需要先嵌入评论列表的结构
+ //具体结构需要参照评论的模板而定,参照下图
+ $('.comment-title').after('
');
+ //插入评论
+ $('.comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+ }
+ else if($('.prev').length) {
+ //这里是当前评论不在第一页的情况
+ //所以这里可以进行比如跳转到第一页的操作,当然也可以进行别的操作
+ $('.comment-pagenav ul li a').eq(1).click();
+ }
+ else {
+ //当前页面直接在最前面插入评论
+ newComment = $("#li-comment-" + newCommentId, data);
+ $('.comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+ }
+ //页面滑动到评论列表头部
+ $('html,body').animate({scrollTop:$('.comment-title').offset().top - 100},1000);
+ }
+else {
+ //取数据
+ newComment = $("#li-comment-" + newCommentId, data);
+ //处理子级评论
+ if ($('#' + replyTo).find('.comment-children').length) {
+ //当前父评论已经有嵌套的结构
+ //直接插入新的评论
+ $('#' + replyTo + ' .comment-children .comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+ TypechoComment.cancelReply();
+ }
+ else {
+ //当前父评论没有嵌套的结构
+ //先构建嵌套的结构再进插入子评论
+ //插入的结构视模板具体情况而定
+ $('#' + replyTo).append('');
+ $('#' + replyTo + ' .comment-children .comment-list').first().prepend((newComment).addClass('animated fadeInUp'));
+ TypechoComment.cancelReply();
+ }
+}
+commentCounts();
+afterSendComment(true);
+alertSend("评论提交成功!");
\ No newline at end of file
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
index 0ef02640..3cbce15d 100644
--- a/assets/js/miracles.min.js
+++ b/assets/js/miracles.min.js
@@ -285,6 +285,28 @@ function toggleDrawer() {
}
}
+/**
+ * Alert
+ */
+function alertSend(content) {
+ $(".alert-content").text(content);
+ $(".alert").removeClass("ready");
+}
+function alertClose() {
+ $(".alert").addClass("ready");
+}
+
+/**
+ * Listen copy event
+ */
+$(document).ready(function() {
+ $("body").bind({
+ copy : function(){
+ alertSend("复制成功!若使用请注明原作者及原地址!");
+ }
+ });
+});
+
/**
* Load Live2D
*/
@@ -329,5 +351,4 @@ if(loadPjax = true) {
afterPjax();
panguLoad();
});
-}
-
+}
\ No newline at end of file
diff --git a/includes/comments.php b/includes/comments.php
index 52915614..785f2d6b 100644
--- a/includes/comments.php
+++ b/includes/comments.php
@@ -118,4 +118,5 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/includes/footer.php b/includes/footer.php
index 30469944..91f036d5 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -43,7 +43,7 @@
afterPjax = function() {is('post') || $this->is('page')): ?>owoLoad();options->pjax_complete(); ?>}
-
+
footer(); ?>