Greasy Fork

Greasy Fork is available in English.

JustMoeComments

萌娘百科看Lih的镜像站的评论,同时集成了作品讨论的评论

当前为 2024-06-13 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         JustMoeComments
// @namespace    https://github.com/gui-ying233/JustMoeComments
// @version      2.15.0
// @description  萌娘百科看Lih的镜像站的评论,同时集成了作品讨论的评论
// @author       鬼影233
// @license      MIT
// @match        zh.moegirl.org.cn/*
// @match        mzh.moegirl.org.cn/*
// @match        mobile.moegirl.org.cn/*
// @match        moegirl.icu/*
// @match        zh.moegirl.tw/*
// @match        zh.moegirl.tw/*
// @match        mzh.moegirl.tw/*
// @match        mobile.moegirl.tw/*
// @icon         https://moegirl.uk/images/a/a2/%E7%B2%89%E8%89%B2%E5%A4%A7%E7%8C%9B%E5%AD%97.png
// @supportURL   https://github.com/gui-ying233/JustMoeComments/issues
// ==/UserScript==

(async () => {
	"use strict";
	if (
		window.JMC ||
		new URLSearchParams(window.location.search).get("safemode")
	)
		return;
	window.JMC = true;
	await new Promise(resolve => {
		const intervId = setInterval(() => {
			if (typeof mw !== "undefined" && typeof wgULS !== "undefined") {
				clearInterval(intervId);
				resolve();
			}
		}, 50);
	});
	if (
		mw.config.get("wgAction") !== "view" ||
		![0, 2, 4, 12, 274].includes(mw.config.get("wgNamespaceNumber"))
	)
		return;
	const api = new mw.Api();
	const generatePost = ({ username, text, timestamp, like }) => {
		let _timestamp;
		if (typeof timestamp === "number") {
			const diff = Date.now() - timestamp * 1000;
			if (diff > 0 && diff < 86400000) {
				_timestamp = moment(timestamp * 1000)
					.locale(mw.config.get("wgUserLanguage"))
					.fromNow();
			} else {
				_timestamp = moment(timestamp * 1000)
					.locale(mw.config.get("wgUserLanguage"))
					.format("LL, HH:mm:ss");
			}
		} else {
			_timestamp = timestamp;
		}
		const postDiv = document.createElement("div");
		postDiv.className = "comment-thread";
		postDiv.innerHTML = `<div class="comment-post"><div class="comment-avatar"><a href="//moegirl.uk/U:${username}"><img src="//moegirl.uk/extensions/Avatar/avatar.php?user=${username}" decofing="async" loading="lazy" fetchpriority="low"></a></div><div class="comment-body"><div class="comment-user"><a href="//moegirl.uk/U:${username}">${username}</a></div><div class="comment-text">${text}</div><div class="comment-footer"><span class="comment-time">${_timestamp}</span>${
			like ? `<span class="comment-like">赞 ${like}</span>` : ""
		}</div></div></div>`;
		postDiv.querySelector(".comment-avatar > a > img").onerror =
			function () {
				if (new URL(this.src).host === "moegirl.uk")
					this.src = `//commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=${username}`;
			};
		[...postDiv.querySelectorAll("img[src^='/images/']")].forEach(i => {
			i.src = `//img.moegirl.org.cn/common/${new URL(
				i.src
			).pathname.slice(8)}`;
			i.srcset = i.srcset.replaceAll(
				"/images/",
				"//img.moegirl.org.cn/common/"
			);
		});
		[
			...postDiv.querySelectorAll(
				'img[src*="thumb"][src$=".svg.png"], img[src*="thumb"][data-lazy-src$=".svg.png"], img[src*="thumb"][src$=".gif"], img[data-lazy-src*="thumb"][data-lazy-src$=".gif"]'
			),
		].forEach(i => {
			try {
				const _i = i.cloneNode();
				if (
					new mw.Uri(_i.src || _i.dataset.lazySrc).host ===
					"img.moegirl.org.cn"
				) {
					_i.src = _i.src
						.replace("/thumb/", "/")
						.replace(/\.svg\/[^/]+\.svg\.png$/, ".svg")
						.replace(/\.gif\/[^/]+\.gif$/, ".gif");
					_i.removeAttribute("srcset");
					_i.removeAttribute("data-lazy-src");
					_i.removeAttribute("data-lazy-srcset");
					_i.removeAttribute("data-lazy-state");
					_i.classList.remove("lazyload");
					_i.onload = function () {
						i.replaceWith(_i);
					};
				}
			} catch {}
		});
		[
			...postDiv.querySelectorAll(
				"a.extiw[title^='moe:'], a.extiw[title^='zhmoe:']"
			),
		].forEach(a => {
			a.classList.remove("extiw");
			api.get({
				action: "query",
				format: "json",
				titles: decodeURI(a.pathname.slice(1)),
				utf8: 1,
				formatversion: 2,
			}).done(b => {
				if (b.query.pages[0].missing) {
					a.href = `/index.php?title=${a.pathname.slice(
						1
					)}&action=edit&redlink=1`;
					a.title += wgULS(" (页面不存在)", "(頁面不存在)");
					a.classList += "new";
				} else if (
					b.query.pages[0].pageid === mw.config.get("wgArticleId")
				) {
					a.href = "";
					a.title = "";
					a.classList += "mw-selflink selflink";
				} else {
					a.href = a.pathname;
					a.title = a.title.replace(/moe:|zhmoe:/, "");
				}
			});
		});
		[...postDiv.getElementsByTagName("script")].forEach(s => {
			const _s = document.createElement("script");
			_s.innerHTML = s.innerHTML;
			[...s.attributes].forEach(a => {
				_s.setAttribute(a.name, a.value);
			});
			s.parentNode.replaceChild(_s, s);
		});
		return postDiv;
	};
	mw.loader.using(["moment"]).done(() => {
		const commentCSS = document.createElement("style");
		commentCSS.innerHTML =
			"#flowthread{clear:both;padding:1.5em}body.skin-moeskin #flowthread{background-color:var(--theme-background-color)}.comment-container-top:not(:empty){border:1px #ccc solid;border-radius:5px}body.skin-vector .comment-container-top{background-color:rgb(191 234 181 / 20%)}body.skin-moeskin .comment-container-top{background-color:var(--theme-card-background-color)}.comment-container-top>div:first-child{height:24px;line-height:24px;text-indent:1em;font-size:small;border-radius:5px 5px 0 0;font-weight:bold}body.skin-vector .comment-container-top>div:first-child{background-color:rgb(18 152 34 / 47%);color:#fff}body.skin-moeskin .comment-container-top>div:first-child{background-color:var(--theme-accent-color);color:var(--theme-accent-link-color)}.comment-thread{border-top:1px solid rgba(0,0,0,0.13)}.comment-thread .comment-thread{margin-left:40px}.comment-post{padding:10px}.comment-avatar{float:left}.comment-avatar img{width:50px;height:50px}.comment-body{padding-left:60px}.comment-thread>div:not(:first-of-type) .comment-avatar img{width:30px;height:30px}.comment-thread>div:not(:first-of-type) .comment-body{padding-left:40px}.comment-user,.comment-user a{color:#777;font-size:13px;margin-right:8px}.post-content .comment-text{position:static}.comment-text{font-size:13px;line-height:1.5em;margin:.5em 0;word-wrap:break-word;position:relative;overflow:hidden;min-height:1em}.comment-footer{font-size:12px;margin-right:8px;color:#999}.comment-like{margin-left:5px}";
		document.head.appendChild(commentCSS);
		const containerTop = document.createElement("div");
		containerTop.className = "comment-container-top";
		const container = document.createElement("div");
		container.className = "comment-container";
		const postContent = document.createElement("div");
		postContent.id = "flowthread";
		postContent.className = "post-content";
		postContent.appendChild(containerTop);
		postContent.appendChild(container);
		document
			.getElementById(
				mw.config.get("skin") === "vector"
					? "footer"
					: "moe-global-footer"
			)
			.appendChild(postContent);
		fetch(
			`https://moegirl.uk/api.php?${new URLSearchParams({
				action: "query",
				format: "json",
				prop: "pageprops",
				titles: mw.config.get("wgPageName"),
				utf8: 1,
				formatversion: 2,
				origin: "*",
			})}`
		)
			.then(a => a.json())
			.then(a =>
				(function getComment(offset) {
					fetch(
						`https://moegirl.uk/api.php?${new URLSearchParams({
							action: "flowthread",
							format: "json",
							type: "list",
							pageid: a.query.pages[0].pageid,
							limit: 15,
							offset,
							utf8: 1,
							formatversion: 2,
							origin: "*",
						})}`
					)
						.then(b => b.json())
						.then(b => {
							if (b.flowthread.popular.length) {
								document.body.getElementsByClassName(
									"comment-container-top"
								)[0].innerHTML = "<div>热门评论</div>";
								for (const post of b.flowthread.popular) {
									const _post = generatePost(post);
									_post.classList.add("comment-popular");
									document.body
										.getElementsByClassName(
											"comment-container-top"
										)[0]
										.appendChild(_post);
								}
							}
							for (const post of b.flowthread.posts) {
								const _post = generatePost(post);
								_post.id = `comment-${post.id}`;
								if (post.parentid) {
									document
										.getElementById(
											`comment-${post.parentid}`
										)
										.appendChild(_post);
								} else {
									document
										.getElementsByClassName(
											"comment-container"
										)[0]
										.appendChild(_post);
								}
							}
							if (b.flowthread.count > offset + 15) {
								new IntersectionObserver(
									(entries, observer) => {
										entries.forEach(entry => {
											if (entry.isIntersecting) {
												getComment(offset + 15);
												observer.unobserve(
													entry.target
												);
											}
										});
									}
								).observe(
									document.querySelector(
										".comment-container > div.comment-thread:last-of-type"
									)
								);
							}
						});
				})(0)
			)
			.catch(() => {
				fetch(
					"https://testingcf.jsdelivr.net/gh/gui-ying233/JustMoeComments/flowthread.json"
				)
					.then(a => a.json())
					.then(a => {
						let f = 0;
						for (const t of a) {
							if (
								t.title !==
								mw.config.get("wgPageName").replace("_", " ")
							)
								continue;
							a = t.posts;
							f = 1;
							break;
						}
						if (!f) return;
						for (const b of a) {
							if (+b.status) continue;
							const _post = generatePost({
								username: b.username,
								text: b.text,
								timestamp: "",
							});
							_post.id = `comment-${b.id}`;
							(b.parentid
								? document.getElementById(
										`comment-${b.parentid}`
								  )
								: document.getElementsByClassName(
										"comment-container"
								  )[0]
							).appendChild(_post);
						}
					});
			});
		if (mw.config.get("skin") !== "moeskin") return;
		setTimeout(() => {
			if (
				![
					(mw.config.get("wgPageName"),
					mw.config.get("wgPageName").replace(/^(.+)\(.+?\)$/, "$1"),
					document.getElementById("firstHeading").innerText),
				].includes(
					document.body.getElementsByClassName("artwork-title")[0]
						?.innerText
				)
			)
				return;
			document.body.getElementsByClassName("comment-item").forEach(c => {
				if (
					!c.getElementsByClassName("comment-title")[0].innerText &&
					!c.getElementsByClassName("comment-content")[0].innerText
				)
					return;
				const post = {
					like: +c
						.getElementsByClassName("n-button-group")[0]
						.innerText.split("\n")[0],
					username:
						c.getElementsByClassName("comment-author")[0].innerText,
					text:
						c.getElementsByClassName("comment-title")[0].innerText +
						(c.getElementsByClassName("comment-title")[0]
							.innerText &&
						c.getElementsByClassName("comment-content")[0].innerText
							? document.createElement("br").outerHTML
							: "") +
						c.getElementsByClassName("comment-content")[0]
							.innerText,
					timestamp:
						c.getElementsByClassName("comment-time")[0].innerText,
				};
				document
					.getElementsByClassName("comment-container")[0]
					.appendChild(generatePost(post));
			});
		}, 5000);
	});
})();