added：昼夜模式，毛玻璃特效
This commit is contained in:
Vaica committed
1 parent
739c8056d6
commit
c83c28fb9c
9 files changed
+696
-185
No files matched your search
+375
-37
@@ -13,18 +13,87 @@
|
||||
}
|
||||
|
||||
@charset "UTF-8";:root {
|
||||
--background-color: #fff;
|
||||
--background-dark-color: #201d1e;
|
||||
--text-content-color: #222;
|
||||
--text-content-dark-color: #000000;
|
||||
--background-color: #fafafa;
|
||||
--background-dark-color: #020617;
|
||||
--text-content-color: #24292e;
|
||||
--text-content-dark-color: #d1d5db;
|
||||
--text-title-color: #111827;
|
||||
--text-title-dark-color: #e5e7eb;
|
||||
--text-highlight-color: #696565;
|
||||
--frame-dark-color: #332D2F;
|
||||
--frame-dark-color: #1f2933;
|
||||
--frame-color: #eee;
|
||||
--erji-color: #666;
|
||||
--sanji-color: #999
|
||||
/* artalk自定义颜色 */
|
||||
--sanji-color: #999;
|
||||
--bankuai-color: #f6f6f6;
|
||||
--text-highlight-color: #000;
|
||||
--link-color-light: #374151;
|
||||
--link-hover-color-light: #111827;
|
||||
--link-color-dark: #e5e7eb;
|
||||
--link-hover-color-dark: #d1d5db;
|
||||
--card-shadow-light: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
|
||||
--card-shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.45);
|
||||
}
|
||||
|
||||
[data-theme="dark"] body {
|
||||
color: var(--text-content-dark-color);
|
||||
background-color: var(--background-dark-color);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .main {
|
||||
background: rgba(15, 23, 42, 0.94);
|
||||
box-shadow: var(--card-shadow-dark);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header nav {
|
||||
border-top-color: #1f2933;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header nav ul.flat li a {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header nav ul.flat li.active a {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .meta {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .footer {
|
||||
border-top-color: #1f2933;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-content {
|
||||
color: var(--text-content-dark-color);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: var(--text-title-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-title {
|
||||
color: var(--text-title-dark-color);
|
||||
}
|
||||
|
||||
.theme-toggle-button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
color: #586069;
|
||||
}
|
||||
|
||||
.theme-toggle-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-toggle-button {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -50,10 +119,10 @@
|
||||
|
||||
body {
|
||||
font-family: 'zql', serif;
|
||||
color: #24292e;
|
||||
color: var(--text-content-color);
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
background: #fafafa;
|
||||
background: var(--background-color);
|
||||
background-image: url('../image/bg.svg');
|
||||
background-image: url(https://usj.cc/usr/uploads/2023/06/3287615239.jpg);
|
||||
background-image:url(data:image/webp;base64,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 truncated
|
||||
@@ -155,14 +224,23 @@ blockquote {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: #24292e;
|
||||
text-decoration: none
|
||||
a {
|
||||
color: var(--link-color-light);
|
||||
text-decoration: none;
|
||||
transition: color 0.35s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline
|
||||
color: var(--link-hover-color-light);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a {
|
||||
color: var(--link-color-dark);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:hover {
|
||||
color: var(--link-hover-color-dark);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -205,18 +283,84 @@ ul {
|
||||
overflow: hidden;
|
||||
margin: 60px auto;
|
||||
padding: 50px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-shadow: var(--card-shadow-light);
|
||||
border-radius: 8px;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, backdrop-filter 0.35s ease;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.head_author_img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-theme-tip {
|
||||
margin-left: 10px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #111827;
|
||||
color: #f9fafb;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
|
||||
opacity: 0;
|
||||
transform: translateY(2px) scale(0.98);
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.avatar-theme-tip.is-visible {
|
||||
opacity: 1;
|
||||
animation: avatar-tip-float 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.avatar-theme-tip.is-hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.96);
|
||||
animation: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .avatar-theme-tip {
|
||||
background: #f9fafb;
|
||||
color: #111827;
|
||||
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@keyframes avatar-tip-float {
|
||||
0% {
|
||||
transform: translateY(2px) scale(0.98);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px) scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(2px) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.header h1,
|
||||
@@ -230,10 +374,12 @@ ul {
|
||||
.header h2 {
|
||||
font-size: .9rem;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header nav {
|
||||
border-top: 1px solid #f4f4f4;
|
||||
transition: border-color 0.35s ease;
|
||||
}
|
||||
|
||||
.header nav ul,
|
||||
@@ -269,8 +415,10 @@ ul {
|
||||
|
||||
.header .site-description {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -49px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.header .site-description nav {
|
||||
@@ -292,6 +440,39 @@ ul {
|
||||
color: #586069;
|
||||
}
|
||||
|
||||
/* Pjax 页面切换过渡动画 */
|
||||
.js-Pjax-remove.pjax-leave.pjax-forward,
|
||||
.js-Pjax-remove.pjax-leave.pjax-backward {
|
||||
animation: pjax-fade-out 0.22s ease-in forwards;
|
||||
}
|
||||
|
||||
.js-Pjax-add.pjax-enter.pjax-forward,
|
||||
.js-Pjax-add.pjax-enter.pjax-backward {
|
||||
animation: pjax-fade-in 0.22s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes pjax-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pjax-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.section .section-header {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
@@ -349,6 +530,7 @@ ul {
|
||||
border-top: 1px solid #f4f4f4;
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
transition: color 0.35s ease, border-color 0.35s ease;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@@ -477,16 +659,28 @@ ul {
|
||||
|
||||
#scrollUp {
|
||||
bottom: 50px;
|
||||
right: 80px;
|
||||
background: #f8f8f8;
|
||||
right: 50px;
|
||||
background: #ffffff;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../image/uptop.svg);
|
||||
background-position: center center;
|
||||
/* 将背景图像居中对齐 */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
#scrollUp::before {
|
||||
content: "⇡";
|
||||
}
|
||||
|
||||
[data-theme="dark"] #scrollUp {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/*美化框*/
|
||||
@@ -533,7 +727,7 @@ ul {
|
||||
margin: 10px 0;
|
||||
padding: 15px 15px 15px 35px;
|
||||
/*border-radius: 5px;*/
|
||||
box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
|
||||
box-shadow: 6px 0 14px -6px rgba(15, 23, 42, 0.85), -6px 0 14px -6px rgba(15, 23, 42, 0.55);
|
||||
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 0, 0, 1) 0%, rgba(64, 64, 64, 1) 90.2%);
|
||||
}
|
||||
|
||||
@@ -617,32 +811,58 @@ darkb-text:active {
|
||||
|
||||
.link-title {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.link-title span {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: none;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .link-title span {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
h3.diy-h3 {
|
||||
font-size: rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.05rem;
|
||||
padding-left: 1px;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.a-archives {
|
||||
margin-top: 10px;
|
||||
margin-top: 6px;
|
||||
display: inline-block;
|
||||
color: #374151;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.articles_date_time {
|
||||
padding: 3px 5px;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
background-color: rgba(52, 58, 64, .1);
|
||||
color: #324b64;
|
||||
margin-right: 5px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .a-archives {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .articles_date_time {
|
||||
background-color: rgba(148, 163, 184, .25);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/*友链*/
|
||||
@@ -849,6 +1069,72 @@ label {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.skills-section {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.skills-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skills-row {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skills-track {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
white-space: nowrap;
|
||||
animation: skills-scroll 26s linear infinite;
|
||||
}
|
||||
|
||||
.skills-track-reverse {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
font-size: 0.8rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
@keyframes skills-scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] .section-title {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .skill-tag {
|
||||
border-color: rgba(31, 41, 55, 0.85);
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
@@ -1742,6 +2028,11 @@ input[type=submit] {
|
||||
fill: var(--gray-200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] canvas[data-zr-dom-id] {
|
||||
filter: brightness(0.78) contrast(0.9) saturate(0.85);
|
||||
transition: filter 0.35s ease;
|
||||
}
|
||||
|
||||
/* 弹幕css */
|
||||
.barrage {
|
||||
display: -webkit-box;
|
||||
@@ -1865,13 +2156,15 @@ input[type=submit] {
|
||||
bottom: auto!important
|
||||
}
|
||||
|
||||
.artalk .atk-item.atk-nick,
|
||||
.atk-item.atk-nick {
|
||||
color: #000!important;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.artalk .atk-item.atk-nick a,
|
||||
.atk-item.atk-nick a {
|
||||
color: #999!important
|
||||
color: #000!important
|
||||
}
|
||||
|
||||
.atk-ua {
|
||||
@@ -1907,6 +2200,12 @@ input[type=submit] {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-send-btn {
|
||||
background: rgba(15, 23, 42, 0.9) !important;
|
||||
border-color: #4b5563 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.atk-list-header .atk-dropdown-wrap .atk-dropdown-item.active span,.atk-list-header .atk-dropdown-wrap .atk-dropdown-item span:hover {
|
||||
color: var(--text-highlight-color)!important
|
||||
}
|
||||
@@ -1927,6 +2226,44 @@ input[type=submit] {
|
||||
margin-top: -4px!important
|
||||
}
|
||||
|
||||
.artalk .atk-content p {
|
||||
color: var(--text-content-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .artalk .atk-content p {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
}
|
||||
|
||||
.artalk .atk-main-editor input.atk-nick,
|
||||
.artalk .atk-main-editor input.atk-email,
|
||||
.artalk .atk-main-editor input.atk-link {
|
||||
color: var(--text-content-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .artalk .atk-main-editor input.atk-nick,
|
||||
[data-theme="dark"] .artalk .atk-main-editor input.atk-email,
|
||||
[data-theme="dark"] .artalk .atk-main-editor input.atk-link {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-loading {
|
||||
background-color: #111827!important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-loading-spinner svg circle {
|
||||
stroke: #e5e7eb!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .uk-divider-icon {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
[data-theme="dark"] .uk-divider-icon::after,
|
||||
[data-theme="dark"] .uk-divider-icon::before {
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.atk-comment>.atk-main>.atk-body>.atk-content img {
|
||||
height: 2rem!important;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
|
||||
@@ -2017,8 +2354,7 @@ img[atk-emoticon] {
|
||||
|
||||
.atk-main-editor {
|
||||
background: 0 0!important;
|
||||
/*border: 1px solid var(--frame-dark-color)!important*/
|
||||
border: 1px solid var(--frame-color)!important
|
||||
border: 1px solid var(--frame-dark-color)!important
|
||||
}
|
||||
|
||||
.atk-textarea {
|
||||
@@ -2054,6 +2390,7 @@ img[atk-emoticon] {
|
||||
color: #666!important
|
||||
}
|
||||
|
||||
.artalk .atk-item.atk-nick,
|
||||
.atk-item.atk-nick {
|
||||
color: var(--text-content-dark-color)!important
|
||||
}
|
||||
@@ -2071,6 +2408,7 @@ img[atk-emoticon] {
|
||||
color: #999!important
|
||||
}
|
||||
|
||||
.artalk .atk-item.atk-nick a,
|
||||
.atk-item.atk-nick a {
|
||||
color: #666!important
|
||||
}
|
||||
|
||||
@@ -145,4 +145,72 @@ function flattenComments(comments) {
|
||||
// 调用异步的弹幕加载函数
|
||||
if (document.querySelector("#Comments") && !isMobile()) {
|
||||
loadBarrager()
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentTheme() {
|
||||
var theme = document.documentElement.getAttribute('data-theme');
|
||||
if (!theme) {
|
||||
theme = 'light';
|
||||
}
|
||||
return theme;
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
try {
|
||||
localStorage.setItem('theme', theme);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function updateThemeToggle(theme) {
|
||||
var button = document.getElementById('theme-toggle');
|
||||
if (theme === 'dark') {
|
||||
if (button) {
|
||||
button.textContent = '日间';
|
||||
}
|
||||
} else {
|
||||
if (button) {
|
||||
button.textContent = '夜间';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
var current = getCurrentTheme();
|
||||
var next = current === 'dark' ? 'light' : 'dark';
|
||||
applyTheme(next);
|
||||
updateThemeToggle(next);
|
||||
if (window.Artalk && window.Artalk.get) {
|
||||
try {
|
||||
var ctx = Artalk.get('#Comments');
|
||||
if (ctx && ctx.setDarkMode) {
|
||||
ctx.setDarkMode(next === 'dark');
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var theme = getCurrentTheme();
|
||||
updateThemeToggle(theme);
|
||||
var button = document.getElementById('theme-toggle');
|
||||
if (button) {
|
||||
button.addEventListener('click', toggleTheme);
|
||||
}
|
||||
var avatarWrapper = document.querySelector('.head_author_img');
|
||||
var avatarTip = document.querySelector('.avatar-theme-tip');
|
||||
if (avatarWrapper) {
|
||||
avatarWrapper.style.cursor = 'pointer';
|
||||
avatarWrapper.addEventListener('click', toggleTheme);
|
||||
}
|
||||
if (avatarTip) {
|
||||
avatarTip.classList.add('is-visible');
|
||||
var hideOnce = function () {
|
||||
avatarTip.classList.add('is-hidden');
|
||||
};
|
||||
setTimeout(hideOnce, 9000);
|
||||
if (avatarWrapper) {
|
||||
avatarWrapper.addEventListener('click', hideOnce);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,9 +1,22 @@
|
||||
// 定义pjax 预设pjax
|
||||
var pjax = new Pjax({
|
||||
// 这里填写页面中改变的部分（和 CSS 选择器用法一样）
|
||||
selectors: ["#pjax-container","title"],
|
||||
selectors: ["title", "#pjax-container"],
|
||||
cacheBust: false,
|
||||
elements: "a",
|
||||
switches: {
|
||||
"#pjax-container": Pjax.switches.sideBySide
|
||||
},
|
||||
switchesOptions: {
|
||||
"#pjax-container": {
|
||||
classNames: {
|
||||
add: "pjax-enter",
|
||||
remove: "pjax-leave",
|
||||
backward: "pjax-backward",
|
||||
forward: "pjax-forward"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// 设置图片灯箱回调函数
|
||||
function lazyimg_pjax() {
|
||||
|
||||
Reference in new issue
Block a user