更新

assets/css/joe.global.min.scss

@@ -1673,8 +1673,6 @@
 			overflow: hidden;
 			code[class*='language-'] {
 				display: block;
-				max-height: 500px;
-				overflow-y: auto;
 				white-space: pre-wrap;
 				word-break: break-all;
 				word-wrap: break-word;
@@ -2251,6 +2249,70 @@
 			}
 		}
 	}
+	&__leaving {
+		padding-top: 15px;
+		&-none {
+			padding: 15px 0;
+			text-align: center;
+			user-select: none;
+			color: var(--minor);
+		}
+		&-list {
+			position: relative;
+			height: 500px;
+			.item {
+				display: none;
+				position: absolute;
+				width: 200px;
+				min-height: 140px;
+				overflow: hidden;
+				box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
+				user-select: none;
+				opacity: 0.88;
+				.user {
+					display: flex;
+					align-items: center;
+					padding: 0 10px;
+					color: rgba(255, 255, 255, 1);
+					border-bottom: 1px dashed rgba(255, 255, 255, 0.85);
+					height: 40px;
+					cursor: move;
+					.avatar {
+						width: 20px;
+						height: 20px;
+						border-radius: 50%;
+					}
+					.nickname {
+						min-width: 0;
+						flex: 1;
+						margin: 0 5px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						a {
+							color: rgba(255, 255, 255, 1);
+						}
+					}
+					.date {
+						margin-left: auto;
+					}
+				}
+				.wrapper {
+					padding: 10px;
+					.content {
+						max-height: 140px;
+						overflow-y: auto;
+						word-break: break-all;
+						line-height: 24px;
+						color: #fff;
+						.draw_image {
+							max-width: 100%;
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_footer {

assets/js/joe.leaving.js

@@ -0,0 +1,107 @@
+document.addEventListener('DOMContentLoaded', () => {
+	const encryption = str => window.btoa(unescape(encodeURIComponent(str)));
+	const decrypt = str => decodeURIComponent(escape(window.atob(str)));
+
+	/* 当前页的CID */
+	const cid = $('.joe_detail').attr('data-cid');
+
+	/* 获取本篇文章百度收录情况 */
+	{
+		$.ajax({
+			url: Joe.BASE_API,
+			type: 'POST',
+			data: { routeType: 'baidu_record', site: window.location.href },
+			success(res) {
+				if (res.data && res.data === '已收录') {
+					$('#Joe_Baidu_Record').css('color', '#67C23A');
+					$('#Joe_Baidu_Record').html('已收录');
+				} else {
+					/* 如果填写了Token，则自动推送给百度 */
+					if (Joe.BAIDU_PUSH) {
+						$('#Joe_Baidu_Record').html('<span style="color: #E6A23C">未收录，推送中...</span>');
+						const _timer = setTimeout(function () {
+							$.ajax({
+								url: Joe.BASE_API,
+								type: 'POST',
+								data: {
+									routeType: 'baidu_push',
+									domain: encodeURI(window.location.hostname),
+									url: encodeURI(window.location.href)
+								},
+								success(res) {
+									if (res.error) {
+										$('#Joe_Baidu_Record').html('<span style="color: #F56C6C">推送失败，请检查！</span>');
+									} else {
+										$('#Joe_Baidu_Record').html('<span style="color: #67C23A">推送成功！</span>');
+									}
+								}
+							});
+							clearTimeout(_timer);
+						}, 1000);
+					} else {
+						const url = `https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}`;
+						$('#Joe_Baidu_Record').html(`<a target="_blank" href="${url}" rel="noopener noreferrer nofollow" style="color: #F56C6C">未收录，提交收录</a>`);
+					}
+				}
+			}
+		});
+	}
+
+	/* 激活浏览功能 */
+	{
+		let viewsArr = localStorage.getItem(encryption('views')) ? JSON.parse(decrypt(localStorage.getItem(encryption('views')))) : [];
+		const flag = viewsArr.includes(cid);
+		if (!flag) {
+			$.ajax({
+				url: Joe.BASE_API,
+				type: 'POST',
+				data: { routeType: 'handle_views', cid },
+				success(res) {
+					if (res.code !== 1) return;
+					$('#Joe_Article_Views').html(`${res.data.views} 阅读`);
+					viewsArr.push(cid);
+					const name = encryption('views');
+					const val = encryption(JSON.stringify(viewsArr));
+					localStorage.setItem(name, val);
+				}
+			});
+		}
+	}
+
+	/* 激活随机样式 */
+	{
+		let _index = 100;
+		const colors = ['#F8D800', '#0396FF', '#EA5455', '#7367F0', '#32CCBC', '#F6416C', '#28C76F', '#9F44D3', '#F55555', '#736EFE', '#E96D71', '#DE4313', '#D939CD', '#4C83FF', '#F072B6', '#C346C2', '#5961F9', '#FD6585', '#465EFB', '#FFC600', '#FA742B', '#5151E5', '#BB4E75', '#FF52E5', '#49C628', '#00EAFF', '#F067B4', '#F067B4', '#ff9a9e', '#00f2fe', '#4facfe', '#f093fb', '#6fa3ef', '#bc99c4', '#46c47c', '#f9bb3c', '#e8583d', '#f68e5f'];
+		const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+		const maxWidth = $('.joe_detail__leaving-list').width();
+		const maxHeight = $('.joe_detail__leaving-list').height();
+		const radius1 = ['20px 300px', '20px 400px', '20px 500px', '30px 300px', '30px 400px', '30px 500px', '40px 300px', '40px 400px', '40px 500px'];
+		const radius2 = ['300px 20px', '400px 20px', '500px 20px', '300px 30px', '400px 30px', '500px 30px', '300px 40px', '400px 40px', '500px 40px'];
+		$('.joe_detail__leaving-list .item').each((index, item) => {
+			const zIndex = random(1, 99);
+			const background = colors[random(0, colors.length - 1)];
+			const width = Math.ceil($(item).width());
+			const height = Math.ceil($(item).height());
+			const top = random(0, maxHeight - height);
+			const left = random(0, maxWidth - width);
+			$(item).css({
+				display: 'block',
+				zIndex,
+				background,
+				top,
+				left,
+				borderTopLeftRadius: radius2[random(0, radius2.length - 1)],
+				borderTopRightRadius: radius1[random(0, radius1.length - 1)],
+				borderBottomLeftRadius: radius1[random(0, radius1.length - 1)],
+				borderBottomRightRadius: radius1[random(0, radius1.length - 1)]
+			});
+			$(item).draggabilly({ containment: true });
+			$(item).on('dragStart', e => {
+				_index++;
+				$(item).css({
+					zIndex: _index,
+				});
+			});
+		});
+	}
+});

assets/js/joe.leaving.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",()=>{const e=e=>window.btoa(unescape(encodeURIComponent(e))),o=e=>decodeURIComponent(escape(window.atob(e))),t=$(".joe_detail").attr("data-cid");$.ajax({url:Joe.BASE_API,type:"POST",data:{routeType:"baidu_record",site:window.location.href},success(e){if(e.data&&"已收录"===e.data)$("#Joe_Baidu_Record").css("color","#67C23A"),$("#Joe_Baidu_Record").html("已收录");else if(Joe.BAIDU_PUSH){$("#Joe_Baidu_Record").html('<span style="color: #E6A23C">未收录，推送中...</span>');const e=setTimeout(function(){$.ajax({url:Joe.BASE_API,type:"POST",data:{routeType:"baidu_push",domain:encodeURI(window.location.hostname),url:encodeURI(window.location.href)},success(e){e.error?$("#Joe_Baidu_Record").html('<span style="color: #F56C6C">推送失败，请检查！</span>'):$("#Joe_Baidu_Record").html('<span style="color: #67C23A">推送成功！</span>')}}),clearTimeout(e)},1e3)}else{const e=`https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}`;$("#Joe_Baidu_Record").html(`<a target="_blank" href="${e}" rel="noopener noreferrer nofollow" style="color: #F56C6C">未收录，提交收录</a>`)}}});{let a=localStorage.getItem(e("views"))?JSON.parse(o(localStorage.getItem(e("views")))):[];const i=a.includes(t);i||$.ajax({url:Joe.BASE_API,type:"POST",data:{routeType:"handle_views",cid:t},success(o){if(1!==o.code)return;$("#Joe_Article_Views").html(`${o.data.views} 阅读`),a.push(t);const i=e("views"),n=e(JSON.stringify(a));localStorage.setItem(i,n)}})}{let e=100;const o=["#F8D800","#0396FF","#EA5455","#7367F0","#32CCBC","#F6416C","#28C76F","#9F44D3","#F55555","#736EFE","#E96D71","#DE4313","#D939CD","#4C83FF","#F072B6","#C346C2","#5961F9","#FD6585","#465EFB","#FFC600","#FA742B","#5151E5","#BB4E75","#FF52E5","#49C628","#00EAFF","#F067B4","#F067B4","#ff9a9e","#00f2fe","#4facfe","#f093fb","#6fa3ef","#bc99c4","#46c47c","#f9bb3c","#e8583d","#f68e5f"],t=(e,o)=>Math.floor(Math.random()*(o-e+1))+e,a=$(".joe_detail__leaving-list").width(),i=$(".joe_detail__leaving-list").height(),n=["20px 300px","20px 400px","20px 500px","30px 300px","30px 400px","30px 500px","40px 300px","40px 400px","40px 500px"],d=["300px 20px","400px 20px","500px 20px","300px 30px","400px 30px","500px 30px","300px 40px","400px 40px","500px 40px"];$(".joe_detail__leaving-list .item").each((l,c)=>{const s=t(1,99),p=o[t(0,o.length-1)],r=Math.ceil($(c).width()),x=Math.ceil($(c).height()),u=t(0,i-x),h=t(0,a-r);$(c).css({display:"block",zIndex:s,background:p,top:u,left:h,borderTopLeftRadius:d[t(0,d.length-1)],borderTopRightRadius:n[t(0,n.length-1)],borderBottomLeftRadius:n[t(0,n.length-1)],borderBottomRightRadius:n[t(0,n.length-1)]}),$(c).draggabilly({containment:!0}),$(c).on("dragStart",o=>{e++,$(c).css({zIndex:e})})})}});

assets/js/joe.short.js

@@ -0,0 +1,341 @@
+document.addEventListener('DOMContentLoaded', () => {
+	/*
+	 *
+	 *
+	 * *
+	 * 开放类组件
+	 * *
+	 *
+	 *
+	 */
+
+	/* 便条按钮 */
+	class JoeAnote extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				icon: this.getAttribute('icon') || 'fa-download',
+				href: this.getAttribute('href') || '#',
+				type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary',
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标签按钮'
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <a class="joe_detail__article-anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
+                    <span class="icon"><i class="fa ${this.options.icon}"></i></span><span class="content">${this.options.content}</span>
+                </a>
+            `;
+		}
+		render() {
+			this.innerHTML = this.template;
+		}
+	}
+	window.customElements.define('joe-anote', JoeAnote);
+	/* 多彩按钮 */
+	class JoeAbtn extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				icon: this.getAttribute('icon') || '',
+				color: this.getAttribute('color') || '#ff6800',
+				href: this.getAttribute('href') || '#',
+				radius: this.getAttribute('radius') || '17.5px',
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '多彩按钮'
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <a class="joe_detail__article-abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
+                    <span class="icon"><i class="${this.options.icon} fa"></i></span><span class="content">${this.options.content}</span>
+                </a>
+            `;
+		}
+		render() {
+			this.innerHTML = this.template;
+		}
+	}
+	window.customElements.define('joe-abtn', JoeAbtn);
+	/* Dplayer */
+	class JoeDplayer extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				src: this.getAttribute('src'),
+				player: this.getAttribute('player')
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <iframe class="joe_detail__article-player" allowfullscreen="true" src="${this.options.player + this.options.src}"></iframe>
+            `;
+		}
+		render() {
+			if (this.options.src) this.innerHTML = this.template;
+			else this.innerHTML = '播放地址未填写！';
+		}
+	}
+	window.customElements.define('joe-dplayer', JoeDplayer);
+	/* BiliBili */
+	class JoeBilibili extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				bvid: this.getAttribute('bvid')
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <iframe class="joe_detail__article-player" allowfullscreen="true" src="//player.bilibili.com/player.html?bvid=${this.options.bvid}"></iframe>
+            `;
+		}
+		render() {
+			if (this.options.bvid) this.innerHTML = this.template;
+			else this.innerHTML = 'Bvid未填写！';
+		}
+	}
+	window.customElements.define('joe-bilibili', JoeBilibili);
+	/* 居中标题 */
+	class JoeMtitle extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '居中标题'
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <div class="joe_detail__article-mtitle">
+                    <span class="text">${this.options.content}</span> 
+                </div>
+            `;
+		}
+		render() {
+			this.innerHTML = this.template;
+		}
+	}
+	window.customElements.define('joe-mtitle', JoeMtitle);
+	/* 点击复制 */
+	class JoeCopy extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				text: this.getAttribute('text') || '默认文本',
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '点击复制'
+			};
+			this.render();
+		}
+		get template() {
+			return `<span class="joe_detail__article-copy">${this.options.content}</span>`;
+		}
+		render() {
+			this.innerHTML = this.template;
+			this.event();
+		}
+		event() {
+			this.$copy = this.querySelector('.joe_detail__article-copy');
+			new ClipboardJS(this.$copy, { text: () => this.options.text }).on('success', () => Qmsg.success('复制成功！'));
+		}
+	}
+	window.customElements.define('joe-copy', JoeCopy);
+	/* 消息提示 */
+	class JoeMessage extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '提示内容'
+			};
+			this.render();
+		}
+		get template() {
+			return `
+				<div class="joe_detail__article-message ${this.options.type}">
+					<div class="icon"></div>
+					<div class="content">${this.options.content}</div>
+				</div>
+			`;
+		}
+		render() {
+			this.innerHTML = this.template;
+		}
+	}
+	window.customElements.define('joe-message', JoeMessage);
+	/* 默认卡片 */
+	class JoeCard extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				width: this.getAttribute('width') || '100%',
+				label: this.getAttribute('label') || '默认标题',
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '默认内容'
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <div class="joe_detail__article-card" style="width: ${this.options.width}">
+                    <div class="title">${this.options.label}</div>
+                    <div class="content">${this.options.content}</div>
+                </div>
+            `;
+		}
+		render() {
+			this.innerHTML = this.template;
+		}
+	}
+	window.customElements.define('joe-card', JoeCard);
+	/* 回复可见 - 显示状态 */
+	class JoeShow extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '默认隐藏的内容'
+			};
+			this.render();
+		}
+		render() {
+			this.innerHTML = this.options.content;
+		}
+	}
+	window.customElements.define('joe-show', JoeShow);
+	/* 时间轴 */
+	class JoeTimeline extends HTMLElement {
+		
+	}
+	/*
+	 *
+	 *
+	 * *
+	 * 私有化组件
+	 * *
+	 *
+	 *
+	 */
+
+	/* 网易云音乐 - 单首 */
+	class JoeMusic extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				id: this.getAttribute('id'),
+				width: this.getAttribute('width') || '100%',
+				height: this.getAttribute('height') || '86px',
+				autoplay: this.getAttribute('autoplay') ? 1 : 0
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <style>
+                    .container {
+                        width: 100%;
+                    }
+                    .container iframe {
+                        display: block;
+                        margin: 0 auto;
+                        border: none;
+                        vertical-align: middle;
+                    }
+                </style>
+                <div class="container">
+                    <iframe src="//music.163.com/outchain/player?type=2&id=${this.options.id}&auto=${this.options.autoplay}&height=66" width="${this.options.width}" height="${this.options.height}"></iframe>
+                </div>
+            `;
+		}
+		render() {
+			this.innerHTML = '';
+			this._shadowRoot = this.attachShadow({ mode: 'closed' });
+			if (this.options.id) this._shadowRoot.innerHTML = this.template;
+			else this._shadowRoot.innerHTML = '网易云歌曲ID未填写！';
+		}
+	}
+	window.customElements.define('joe-music', JoeMusic);
+	/* 网易云音乐 - 歌单 */
+	class JoeMlist extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				id: this.getAttribute('id'),
+				width: this.getAttribute('width') || '100%',
+				height: this.getAttribute('height') || '450px',
+				autoplay: this.getAttribute('autoplay') ? 1 : 0
+			};
+			this.render();
+		}
+		get template() {
+			return `
+                <style>
+                    .container {
+                        width: 100%;
+                    }
+                    .container iframe {
+                        display: block;
+                        margin: 0 auto;
+                        border: none;
+                        vertical-align: middle;
+                    }
+                </style>
+                <div class="container">
+                    <iframe src="//music.163.com/outchain/player?type=0&id=${this.options.id}&auto=${this.options.autoplay}&height=430" width="${this.options.width}" height="${this.options.height}"></iframe>
+                </div>
+            `;
+		}
+		render() {
+			this.innerHTML = '';
+			this._shadowRoot = this.attachShadow({ mode: 'closed' });
+			if (this.options.id) this._shadowRoot.innerHTML = this.template;
+			else this._shadowRoot.innerHTML = '网易云歌单ID未填写！';
+		}
+	}
+	window.customElements.define('joe-mlist', JoeMlist);
+	/* 回复可见 - 隐藏状态 */
+	class JoeHide extends HTMLElement {
+		constructor() {
+			super();
+			this.render();
+		}
+		get template() {
+			return `
+                <style>
+                    .container {
+                        background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
+                        padding: 15px 0;
+                        text-align: center;
+                        position: relative;
+                        user-select: none;
+                        line-height: normal;
+                    }
+                    .container i {
+                        position: relative;
+                        font-style: normal;
+                        cursor: pointer;
+                        color: var(--theme);
+                    }
+                </style>
+                <div class="container">
+                    此处内容作者设置了 <i>回复</i> 可见
+                </div>
+            `;
+		}
+		render() {
+			this.innerHTML = '';
+			this._shadowRoot = this.attachShadow({ mode: 'closed' });
+			this._shadowRoot.innerHTML = this.template;
+			this.event();
+		}
+		event() {
+			this.$button = this._shadowRoot.querySelector('i');
+			this.$button.addEventListener('click', () => {
+				const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15;
+				window.scrollTo({ top, behavior: 'smooth' });
+			});
+		}
+	}
+	window.customElements.define('joe-hide', JoeHide);
+});