美化 V2EX，提升浏览体验！
当前为
// ==UserScript==
// @name V2EX 非同一般的扩展
// @namespace LeoKu(https://leoku.top)
// @version 0.5.1
// @description 美化 V2EX，提升浏览体验！
// @author LeoKu
// @match https://www.v2ex.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
// @grant none
// @license MIT
// ==/UserScript==
"use strict";
// src/web-scripts/globals.ts
var loginName = $('#Top .tools > a[href^="/member"]').text();
var ownerName = $("#Main > .box:nth-child(1) > .header > small > a").text();
var commentBox = $('#Main .box:has(.cell[id^="r_"])');
var commentCells = $('#Main .cell[id^="r_"]');
var cellTableRows = commentCells.find("table > tbody > tr");
var commentData = cellTableRows.map((idx, tr) => {
const id = commentCells[idx].id;
const td = $(tr).find("> td:nth-child(3)");
const name = td.find("> strong > a").text();
const content = td.find("> .reply_content").text();
const likes = Number(td.find("span.small").text());
const floor = td.find("span.no").text();
return { id, name, content, likes, floor, index: idx };
}).get();
// src/web-scripts/nested-comments.ts
function nestedComments() {
let i = 1;
while (i < commentCells.length) {
const cellDom = commentCells[i];
const { name, content } = commentData[i];
if (name === ownerName) {
cellDom.classList.add("owner");
}
if (name === loginName) {
cellDom.classList.add("self");
}
if (content.includes("@")) {
for (let j = i - 1; j >= 0; j--) {
if (content.match(`@${commentData[j].name}`)) {
cellDom.classList.add("responder");
commentCells[j].append(commentCells[i]);
break;
}
}
}
i++;
}
}
// src/web-scripts/popular.ts
function popular() {
const popularCommentData = commentData.filter(({ likes }) => likes > 0).sort((a, b) => b.likes - a.likes);
if (popularCommentData.length > 0) {
const commentContainer = $(`
<div class="extra-comments-mask">
<div class="extra-comments-content box">
<div class="extra-comments-bar">
<span>\u672C\u9875\u5171\u6709 ${popularCommentData.length} \u6761\u70ED\u95E8\u56DE\u590D</span>
<button class="extra-comments-close-btn normal button">\u5173\u95ED<kbd>Esc</kbd></button>
</div>
</div>
</div>
`).css({
position: "fixed",
inset: "0",
"z-index": "999",
"overflow-y": "auto"
}).hide();
{
const commentBoxCount = commentBox.find(".cell:first-of-type > span.gray");
const countText = commentBoxCount.text();
const newCountText = countText.substring(0, countText.indexOf("\u56DE\u590D") + 2);
const countTextSpan = `<span class="count-text">${newCountText}</span><span class="split-dot">\xB7</span>`;
let boundEvent = false;
const clickHandler = (e) => {
const content = $(".extra-comments-content");
if ($(e.target).closest(content).length === 0) {
handleModalClose();
}
};
const keyupHandler = (e) => {
if (e.key === "Escape") {
handleModalClose();
}
};
const handleModalClose = () => {
$(document).off("click", clickHandler);
$(document).off("keydown", keyupHandler);
boundEvent = false;
commentContainer.hide();
document.body.classList.remove("modal-open");
};
const handleModalOpen = () => {
if (!boundEvent) {
$(document).on("click", clickHandler);
$(document).on("keydown", keyupHandler);
boundEvent = true;
}
commentContainer.show();
document.body.classList.add("modal-open");
};
const closeBtn = commentContainer.find(".extra-comments-close-btn");
closeBtn.on("click", handleModalClose);
const popularBtn = $('<span class="popular-btn effect-btn">\u{1F525} \u67E5\u770B\u70ED\u95E8\u56DE\u590D</span>');
popularBtn.on("click", (e) => {
e.stopPropagation();
handleModalOpen();
});
commentBoxCount.empty().append(countTextSpan).append(popularBtn);
}
const templete = $("<templete></templete>");
popularCommentData.forEach(({ index }) => {
templete.append(commentCells.eq(index).clone());
});
commentContainer.find(".extra-comments-content").append(templete.html());
commentBox.append(commentContainer);
}
}
// src/web-scripts/replace-element.ts
function replaceHeart() {
commentCells.find(".small.fade").addClass("heart-box").find('img[alt="\u2764\uFE0F"]').replaceWith(`
<span class="icon-heart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"
></path>
</svg>
</span>
`);
}
function replaceReply() {
commentCells.find('td:last-of-type img[alt="Reply"]').replaceWith(`
<span class="icon-reply effect-btn" title="\u56DE\u590D">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="9 17 4 12 9 7"></polyline>
<path d="M20 18v-2a4 4 0 0 0-4-4H4"></path>
</svg>
</span>
`);
}
// src/web-scripts/style.ts
var style = `@charset "UTF-8";body{--v2p-font-noto-sans:-apple-system,BlinkMacSystemFont,"Noto Sans SC",sans-serif;--v2p-color-main-100:#f1f5f9;--v2p-color-main-200:#e2e8f0;--v2p-color-main-300:#cbd5e1;--v2p-color-main-400:#94a3b8;--v2p-color-main-500:#64748b;--v2p-color-main-600:#475569;--v2p-color-main-700:#334155;--v2p-color-main-800:#1e293b;--v2p-color-main-900:#0f172a;--v2p-color-accent-50:#ecfdf5;--v2p-color-accent-100:#d1fae5;--v2p-color-accent-200:#a7f3d0;--v2p-color-accent-300:#6ee7b7;--v2p-color-accent-400:#34d399;--v2p-color-accent-500:#10b981;--v2p-color-accent-600:#059669;--v2p-color-border:#eee;--v2p-color-wrapper-bg:#f9fafc;--v2p-color-content-bg:#fff;--color-fade:#94a3b8;--color-gray:#94a3b8;--link-color:#1e293b;--box-border-color:#f1f5f9;--box-foreground-color:#1e293b;background-color:var(--v2p-color-wrapper-bg);color:var(--v2p-color-main-800);font-family:var(--v2p-font-noto-sans)}body #Top{background-color:var(--v2p-color-content-bg);height:55px}body #Bottom,body #Top{border:none}body #Wrapper{background-color:inherit;background-image:none}body #Wrapper .content{display:flex;gap:15px}body #Leftbar{float:none;order:1}body #Main{flex:1;margin:0;order:2}body #Rightbar{float:none;order:3}body .box{background-color:var(--v2p-color-content-bg);border:none;border-radius:8px;box-shadow:none;overflow:hidden}body .box .header .gray{color:var(--v2p-color-main-400)}body.modal-open{overflow:hidden}body .normal.button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;gap:5px;height:28px;line-height:28px;outline:none;padding:0 12px;position:relative;user-select:none}body .normal.button,body .normal.button:hover:enabled{background-color:var(--v2p-color-main-100);box-shadow:0 1.8px 0 var(--v2p-color-main-200),0 1.8px 0 var(--v2p-color-main-100);color:var(--v2p-color-main-500);font-weight:500}body .normal.button:hover:enabled{border:none;text-shadow:none}body .normal.button.super,body .normal.button.super:hover:enabled{background-color:var(--v2p-color-accent-100);box-shadow:0 1.8px 0 var(--v2p-color-accent-200),0 1.8px 0 var(--v2p-color-accent-100);color:var(--v2p-color-accent-500)}body .normal.button.super:hover:enabled{border:none;font-weight:500;text-shadow:none}body .normal.button kbd{border:1px solid var(--v2p-color-main-200);border-radius:4px;line-height:normal;padding:0 3px;position:relative;right:-4px}#reply-box.reply-box-sticky{border:none;border-radius:10px;bottom:20px;box-shadow:0 0 15px 5px var(--v2p-color-main-200);overflow:hidden}#reply-box #reply_content{border-color:var(--v2p-color-main-300);border-radius:6px}#search-container{background-color:var(--v2p-color-main-100);border:none;border-radius:6px;height:30px;margin:0 30px}#search-container:before{background-size:14px 14px;filter:none;left:4px;opacity:.6;top:0}#search-container.active{background-color:var(--v2p-color-main-100)}#search-container #search-result{box-shadow:0 0 15px 5px var(--v2p-color-main-200);top:42px}#no-comments-yet{border-color:var(--v2p-color-main-400);color:var(--v2p-color-main-400)}.box .tag,.box>.cell:first-of-type .fr .tag{background-color:var(--v2p-color-main-100);border-radius:5px;font-size:12px}.box .tag:hover,.box>.cell:first-of-type .fr .tag:hover{background-color:var(--v2p-color-main-200);color:currentcolor}#Top .content{height:100%}#Top .site-nav{height:100%;padding:0}#Top .tools{align-items:center;display:flex;font-size:14px;font-weight:400;gap:8px 15px;justify-content:flex-end}#Top .tools .top{border-radius:4px;color:var(--v2p-color-main-400);margin-left:0;padding:3px 5px}#Top .tools .top:hover{color:var(--v2p-color-main-800)}#Top .tools .top:not(.effect-btn):hover{background-color:var(--v2p-color-main-100)}#Top .tools .top.effect-btn{transition:color .3s}#Main>.box{padding:0 12px}#Main>.box .cell{padding:20px 10px}#Main>.box>.cell[id^=r]>table~.cell{padding:20px 0 0 15px}#Main>.box>.cell[id^=r]>table~.cell .cell{padding:20px 0 0}#Main>.box>.cell[id^=r] .cell{border:none}#Main>.box>.cell[id^=r]:hover>table td:last-of-type .fr a{opacity:1}#Main .topic_content{font-size:16px}#Main .cell_tab_current{border-color:var(--v2p-color-main-800)}#Main .cell.item{border-bottom:1px solid var(--v2p-color-border)}#Main .cell.item .item_title{font-weight:600;opacity:.8}#Main .cell.item .item_title:hover{opacity:1}#Main .cell.item .topic-link{color:var(--v2p-color-main-800);text-decoration:none}#Main .cell.item .topic-link:visited{color:var(--v2p-color-main-400)}#Main .cell.item .topic_info{position:relative}#Main .cell.item .topic_info:after{background-color:var(--v2p-color-content-bg);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}#Main .cell.item .topic_info .node{background-color:var(--v2p-color-main-100);border-radius:4px;color:var(--v2p-color-main-400);font-size:13px;padding:5px 6px}#Main .cell.item .topic_info .node,#Main .cell.item .topic_info .votes,#Main .cell.item .topic_info span:first-of-type,#Main .cell.item .topic_info strong:first-of-type{position:relative;z-index:99}#Main .cell.item:hover .count_livid{opacity:1}#Main .cell.item .count_livid{background-color:var(--v2p-color-main-200);border-radius:5px;color:var(--v2p-color-main-400);display:inline-block;font-weight:400;opacity:.8;padding:5px 10px;white-space:nowrap}#Main .cell.item tr>td:nth-child(2){width:30px}#Main #Tabs{align-items:center;display:flex;gap:6px 8px}#Main #SecondaryTabs{background-color:var(--v2p-color-main-100);border-radius:5px;padding:10px}#Main .cell[id^=r] table td:nth-of-type(2){width:15px}#Main .cell[id^=r] table td:last-of-type a.dark{color:var(--v2p-color-main-600);text-decoration:none}#Main .cell[id^=r] table td:last-of-type .fr a{opacity:0;text-decoration:none}#Main .cell[id^=r] table td:last-of-type .fr .no{background-color:transparent;border-radius:5px;color:var(--v2p-color-main-300);font-size:12px;padding:5px 10px}#Main .cell[id^=r]>table:first-of-type tr td:first-of-type{width:40px}#Main .cell[id^=r]>table:first-of-type tr td:first-of-type .avatar{border-radius:5px;width:40px!important}#Main .cell[id^=r]>table~.cell tr td:first-of-type{width:25px}#Main .cell[id^=r]>table~.cell tr td:first-of-type .avatar{border-radius:4px;width:25px!important}#Main .cell[id^=r]>table~.cell tr td:nth-child(3) strong a{font-size:13px;opacity:.75}#Main .cell[id^=r]>table~.cell .reply_content{font-size:14px}#Main .cell[id^=r] .badge.mod,#Main .cell[id^=r] .badge.op{background-color:var(--v2p-color-accent-50);border:1px solid var(--v2p-color-accent-400);border-radius:4px;color:var(--v2p-color-accent-500);font-weight:600;padding:2px 5px}#Main .reply_content{font-size:15px}#Main .reply_content a[href^=http]{background-color:var(--v2p-color-main-100);color:var(--v2p-color-main-500);text-decoration:none}#Main .reply_content a[href^=http]:hover{background-color:var(--v2p-color-accent-50);color:var(--v2p-color-accent-500)}#Main .reply_content a[href^="/member"]{background-color:var(--v2p-color-main-100);color:var(--v2p-color-main-400);font-size:14px;text-decoration:underline}#Main .thank_area{font-size:12px}#Main .tab{background-color:transparent;margin:0}#Main .tab:not(.effect-btn):hover{background-color:var(--v2p-color-main-100)}#Main .tab_current{background-color:var(--v2p-color-main-700)}.topic_buttons{align-items:center;background:none;column-gap:5px;display:flex;flex-direction:row-reverse;padding:8px 0}.topic_buttons .topic_stats{font-size:12px;margin-left:auto;padding:0!important}.topic_buttons a.tb:link{align-items:center;background:none;border-radius:4px;column-gap:5px;display:flex;flex-direction:row-reverse;padding:8px 5px}.topic_buttons .tb:hover:not(.effect-btn){background:var(--v2p-color-main-100);filter:none}.topic_buttons #topic_thank .tb:after{content:"\u{1F64F}"}.topic_buttons .tb:nth-child(2):after{content:"\u2B50"}.topic_buttons .tb:nth-child(3):after{content:"\u{1F426}"}.topic_buttons .tb:nth-child(4):after{content:"\u{1F648}"}#Rightbar .box{opacity:.5;transition:opacity .25s}#Rightbar .box:hover{opacity:1}#Rightbar .balance_area{align-items:center;display:flex}#Bottom .inner .small.fade{display:none}.effect-btn{background:none;background-color:transparent;cursor:pointer;margin:0;position:relative;user-select:none;z-index:1}.effect-btn:before{background-color:var(--v2p-color-main-100);border-radius:5px;bottom:0;content:"";left:-5px;opacity:0;position:absolute;right:-5px;top:0;transform:scale(.6);transition:transform .3s,opacity .3s;z-index:-1}.effect-btn:hover:before{opacity:1;transform:scale(1)}.popular-btn{padding:5px 0}.split-dot{font-size:20px;font-size:15px;font-weight:800;margin:0 8px}.extra-comments-mask{background-color:rgba(0,0,0,.25);overflow:hidden;padding:60px}.extra-comments-content.box{box-sizing:border-box;height:100%;margin:0 auto;overflow-x:hidden;overflow-y:auto;padding:0 20px;position:relative;width:800px}.extra-comments-bar{align-items:center;background-color:var(--v2p-color-content-bg);display:flex;left:0;padding:20px 0;position:sticky;right:0;top:0;z-index:10}.extra-comments-close-btn{margin-left:auto}.heart-box{align-items:center;column-gap:5px;display:inline-flex;position:relative;top:2px}.icon-heart{color:#f43f5e;display:inline-flex}.icon-heart svg{fill:#ffe4e6}.icon-reply{color:var(--v2p-color-main-300);display:inline-flex;position:relative;top:4px;width:20px}`;
function addStyle() {
$(`<style type='text/css'>${style}</style>`).appendTo("head");
}
// src/web-scripts/index.ts
{
$("#Top .site-nav .tools > .top").addClass("effect-btn");
$("#Main .tab").addClass("effect-btn");
$("#Main .topic_buttons a.tb").addClass("effect-btn");
$("#Main .topic-link").attr("target", "_blank");
}
addStyle();
replaceHeart();
replaceReply();
popular();
nestedComments();