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

优化Twikoo评论样式

This commit is contained in:
1152958806@qq.com 2023-08-08 23:06:28 +08:00
parent ba1a0a1608
commit 42af0acc39
2 changed files with 153 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
templates/assets/zhheo/blogex.js
View File

@ -173,7 +173,7 @@ function navTitle() {
var titlevalue = document.title;
var postName = document.getElementsByClassName("post-title")[0];
if(postName==null || postName==''){
document.getElementById("page-name-text").innerHTML = titlevalue;
document.getElementById("page-name-text").innerHTML = titlevalue;
}else{
document.getElementById("page-name-text").innerHTML = postName?.innerText;
}
@ -504,6 +504,50 @@ function getArrayItems(arr, num) {
return return_array;
}
//评论增加放大功能
function owoBig() {
new MutationObserver((e=>{
for (let t of e)
if ("childList" === t.type)
for (let e of t.addedNodes)
if (e.classList && e.classList.contains("OwO-body")) {
let t = e
, o = ""
, n = !0
, a = document.createElement("div");
a.id = "owo-big",
document.querySelector("body").appendChild(a),
t.addEventListener("contextmenu", (e=>e.preventDefault())),
t.addEventListener("mouseover", (e=>{
"LI" === e.target.tagName && n && (n = !1,
o = setTimeout((()=>{
let t = 3 * e.target.clientWidth
, o = e.x - e.offsetX - (t - e.target.clientWidth) / 2
, n = e.y - e.offsetY;
a.style.height = 3 * e.target.clientHeight + "px",
a.style.width = t + "px",
a.style.left = o + "px",
a.style.top = n + "px",
a.style.display = "flex",
a.innerHTML = `<img src="${e.target.querySelector("img").src}">`
}
), 300))
}
)),
t.addEventListener("mouseout", (e=>{
a.style.display = "none",
n = !0,
clearTimeout(o)
}
))
}
}
)).observe(document.getElementById("post-comment"), {
childList: !0,
subtree: !0
})
}
// 检测按键
window.onkeydown = function (e) {
if (e.keyCode === 123) {
@ -524,8 +568,8 @@ document.querySelector('#console').addEventListener('wheel', (e) => {
//自动调整即刻短文尺寸
window.addEventListener("resize", (function() {
document.querySelector("#waterfall") && heo.reflashEssayWaterFall()
}
document.querySelector("#waterfall") && heo.reflashEssayWaterFall()
}
));
//首页大卡片恢复显示
@ -541,59 +585,6 @@ $(".topGroup").hover(function () {
}
});
//评论增加放大功能
// 如果当前页有评论就执行函数
if (document.getElementById('post-comment')) owoBig();
function owoBig() {
// 监听dom插入
document.getElementById('post-comment').addEventListener('DOMNodeInserted', (dom) => {
// 如果有class且值为OwO-body
if (dom.target.classList && dom.target.classList.value == 'OwO-body') {
let owo_body = dom.target
if (owo_body) {
let owo_time = ''
let flag = true;
// 创建盒子
let div = document.createElement('div')
div.id = 'owo-big'
document.querySelector('body').appendChild(div)
// 禁用右键（手机端长按会出现右键菜单，为了体验给禁用掉）
owo_body.addEventListener('contextmenu', e => e.preventDefault())
// 鼠标移入
owo_body.addEventListener('mouseover', (e) => {
if (e.target.tagName == 'LI' && flag) {
flag = false;
// 移入300毫秒后显示盒子
owo_time = setTimeout(() => {
let m = 3 // 设置倍数
let height = e.path[0].clientHeight * m // 盒子高
let width = e.path[0].clientWidth * m // 盒子宽
let left = (e.x - e.offsetX) - (width - e.path[0].clientWidth) / 2 // 盒子与屏幕左边距离
let top = e.y - e.offsetY // 盒子与屏幕顶部距离
div.style.height = height + 'px'
div.style.width = width + 'px'
div.style.left = left + 'px'
div.style.top = top + 'px'
div.style.display = 'flex'
div.innerHTML = `<img src="${e.target.querySelector('img').src}">`
}, 300);
}
})
// 鼠标移出
owo_body.addEventListener('mouseout', (e) => {
div.style.display = 'none';
flag = true
clearTimeout(owo_time)
})
}
}
});
}
//文章页面上一篇下一篇
// document.addEventListener('scroll', btf.throttle(function () {
@ -622,17 +613,17 @@ function owoBig() {
// 页面百分比
function percent() {
let e = document.documentElement.scrollTop || window.pageYOffset
, t = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight
, o = Math.round(e / t * 100)
, n = document.querySelector("#percent");
, t = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight
, o = Math.round(e / t * 100)
, n = document.querySelector("#percent");
var a = window.scrollY + document.documentElement.clientHeight
, i = document.getElementById("post-tools") || document.getElementById("footer");
, i = document.getElementById("post-tools") || document.getElementById("footer");
i.offsetTop + i.offsetHeight / 2 < a || o > 90 ? (document.querySelector("#nav-totop").classList.add("long"),
n.innerHTML = "返回顶部") : (document.querySelector("#nav-totop").classList.remove("long"),
n.innerHTML = "返回顶部") : (document.querySelector("#nav-totop").classList.remove("long"),
o >= 0 && (n.innerHTML = o)),
endresult = t - e,
endresult < 100 ? $(".needEndHide").addClass("hide") : $(".needEndHide").removeClass("hide"),
window.onscroll = percent
endresult = t - e,
endresult < 100 ? $(".needEndHide").addClass("hide") : $(".needEndHide").removeClass("hide"),
window.onscroll = percent
}
// 首页分页隐藏置顶内容
@ -648,9 +639,12 @@ function checkUrlAndAddHideBanner() {
function initBlog() {
heo.initIndexEssay(),
checkUrlAndAddHideBanner()
checkUrlAndAddHideBanner()
}
// 如果当前页有评论就执行函数
document.getElementById("post-comment") && owoBig()
//检查是否开启快捷键
// if (localStorage.getItem('keyboardToggle') !== 'false') {
// document.querySelector("#consoleKeyboard").classList.add("on");
@ -840,7 +834,7 @@ document.addEventListener('pjax:send', function () {
heo.showLoading();
}
})
document.addEventListener('DOMContentLoaded', function () {
@ -858,7 +852,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
heo.qrcodeCreate()
heo.onlyHome()
heo.addNavBackgroundInit()
// heo.changeTimeInEssay()
heo.reflashEssayWaterFall()

175
templates/assets/zhheo/zhheoblog.css
View File

@ -12887,6 +12887,11 @@ div#post-comment {
font-weight: bold;
}
.el-input--small .el-input__inner {
padding: 8px;
padding-left: 16px
}
/* 头像 */
.tk-avatar {
width: 32px !important;
@ -13012,38 +13017,64 @@ img.tk-avatar-img {
}
/* 填写项标题 */
.el-input-group__append, .el-input-group__prepend {
background-color: var(--heo-card-bg) !important;
color: var(--heo-fontcolor) !important;
border-color: var(--heo-card-border) !important;
border: var(--style-border)!important;
font-weight: bold;
.el-input-group__append,.el-input-group__prepend {
background-color: var(--heo-card-bg)!important;
color: var(--heo-fontcolor)!important;
border-color: var(--heo-card-border)!important;
border: none!important;
font-weight: 700
}
/* 输入框 */
.el-input__inner {
background: var(--heo-background) !important;
border: 1px solid var(--heo-card-border) !important;
color: var(--heo-fontcolor) !important;
padding-left: 8px;
background: var(--heo-secondbg)!important;
border: none!important;
color: var(--heo-fontcolor)!important;
padding-left: 8px
}
.el-input.el-input--small.el-input-group.el-input-group--prepend {
border-radius: 12px;
background: var(--heo-secondbg);
border: var(--style-border-always);
}
.el-input-group--prepend .el-input__inner,.el-input-group__append {
border-radius: 12px!important
}
.page .el-input.el-input--small.el-input-group.el-input-group--prepend {
background: var(--heo-card-bg)
}
@media screen and (max-width: 769px) {
.el-input__inner {
background:var(--heo-card-bg)!important
}
.el-input.el-input--small.el-input-group.el-input-group--prepend {
background: var(--heo-card-bg);
margin-bottom: 0
}
}
.page .el-input__inner {
background: var(--heo-card-bg) !important;
background: var(--heo-card-bg)!important
}
.el-input__inner:focus {
border: 1px solid var(--heo-main) !important;
border: none!important
}
/* 评论输入框 */
.el-textarea__inner {
background: var(--heo-background) !important;
background: var(--heo-secondbg) !important;
color: var(--heo-fontcolor) !important;
border-radius: 12px !important;
min-height: 100px !important;
padding: 16px 16px 40px 16px !important;
border: var(--style-border-always) !important;
box-shadow: none!important;
}
@media screen and (max-width: 768px) {
@ -13171,17 +13202,17 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
/* 发送按钮正常状态 */
.tk-comments .el-button--primary {
border-color: var(--heo-fontcolor) !important;
color: var(--heo-card-bg) !important;
border-radius: 4px !important;
border-color: var(--heo-fontcolor)!important;
color: var(--heo-card-bg)!important;
border-radius: 12px!important;
box-shadow: var(--heo-shadow-black);
transition: 0.3s;
transition: .3s;
width: 5rem;
position: absolute;
top: -53px;
right: 0px;
margin-left: 0.5rem !important;
height: 32px;
top: -43px;
right: 0;
margin-left: .5rem!important;
height: 32px
}
/* 发送按钮禁用状态 */
@ -13189,31 +13220,35 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
.tk-comments .el-button--primary.is-disabled:active,
.tk-comments .el-button--primary.is-disabled:focus,
.tk-comments .el-button--primary.is-disabled:hover {
opacity: 0.4;
opacity: 0.2;
}
.tk-row-actions-start {
position: absolute;
top: -100px;
left: 17px;
top: -84px;
left: 17px
}
.tk-submit {
margin-top: .8rem!important
}
@media screen and (max-width: 768px) {
.tk-submit .el-button--primary {
width: 5rem;
height: 132px;
top: -161px;
width:5rem;
height: 122px;
top: -132px
}
.tk-row-actions-start {
top: -210px;
top: -176px
}
}
.tk-comments-title {
/* position: absolute;
bottom: 0;
left: 0; */
left: 0 */
}
.tk-extras {
@ -13222,24 +13257,24 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
}
.tk-icon.__comments:first-child {
/* display: none; */
width: 0.6em;
width: 0.6em
}
.tk-icon.__comments {
/* margin-left: 0 !important; */
/* margin-left: 0!important;
color: var(--heo-main)!important */
}
.tk-row.actions {
margin-bottom: 0.5rem !important;
margin-left: 0px !important;
margin-top: 0.5rem !important;
justify-content: space-around !important;
margin-bottom: 0!important;
margin-left: 0!important;
margin-top: 0!important;
justify-content: space-around!important
}
.tk-meta-input {
position: relative !important;
margin-top: 0.8rem;
margin-top: 8px;
width: calc(100% - 5.5rem);
}
@ -13491,6 +13526,12 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
z-index: 1003;
}
.tk-meta-input .el-input .el-input-group__prepend {
-webkit-user-select: none;
border-radius: 10px 0 0 10px;
border-right: var(--style-border-always)
}
@media screen and (min-width: 768px) {
.post-reward:hover > .reward-main {
display: flex !important;
@ -13518,7 +13559,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
}
.tk-meta-input .el-input .el-input-group__prepend {
padding: 0 0.3rem !important;
padding: 0 8px!important
}
.tk-meta-input {
@ -13679,47 +13720,9 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
}
}
/* 代码高亮 */
/*#article-container figure.highlight {*/
/* border-radius: 8px 8px 4px 4px;*/
/*}*/
/*#article-container figure.highlight,*/
/*#article-container pre {*/
/* color: #f8f8f2;*/
/* background: #696969*/
/*}*/
/*#article-container figure.highlight .highlight-tools {*/
/* background: #3f3f3f;*/
/* color: var(--heo-fontcolor);*/
/*}*/
/*#article-container figure.highlight .gutter pre {*/
/* color: #d3d3d3 !important;*/
/* background: grey;*/
/* border-right: var(--style-border-always);*/
/*}*/
/*#article-container figure.highlight figcaption a {*/
/* color: #a9a9a9 !important*/
/*}*/
/*#article-container pre,*/
/*#article-container .highlight:not(.js-file-line-container) {*/
/* background-color: var(--heo-card-bg) !important;*/
/* color: var(--heo-fontcolor);*/
/* box-shadow: var(--heo-shadow-border);*/
/* border: var(--style-border-always);*/
/*}*/
/*#article-container figure.highlight pre span::selection {*/
/* background: var(--heo-main) !important;*/
/* color: var(--heo-white) !important;*/
/*}*/
/* 表情窗口owo */
/* .OwO .OwO-body {
.OwO .OwO-body {
border: var(--style-border-always) !important;
border-radius: 8px !important;
overflow: hidden;
@ -13735,7 +13738,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
.OwO .OwO-body .OwO-items .OwO-item:hover {
box-shadow: var(--heo-shadow-lightblack) !important;
border-radius: 8px;
} */
}
#twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span {
line-height: 48px;
@ -13753,10 +13756,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
transition: 0.3s;
}
.OwO-packages {
background: var(--heo-background);
padding-left: 8px !important;
}
.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active {
background: var(--heo-secondbg) !important;
@ -13766,6 +13766,15 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
margin: 12px 8px !important;
min-height: 197px;
} */
.OwO .OwO-body .OwO-items-show {
margin: 12px 8px !important;
min-height: 197px;
}
.OwO-packages {
background: var(--heo-background);
padding-left: 8px !important;
}
/* 文章列表页 */
/* ---------------------------------------------------------------- */
@ -15013,7 +15022,7 @@ figure.gallery-group:hover .gallery-group-name::after {
display: flex;
justify-content: center;
position: relative;
width:calc(100% / 4 - 5px);
width:calc(100% / 4 - 5px);
margin-bottom: 10px
}