纯 CSS 实现 Boost 自动折叠展开功能
- 内容介绍
- 文章标签
- 相关推荐
感觉 Boost 很多时，会分散注意力，影响阅读。
于是写了一个样式，实现 Boost 自动折叠/展开功能。
默认只显示两个 Boost，鼠标移到上面时，显示全部内容。
声明：本样式不会影响任何功能，隐藏任何内容。
建议使用 Stylus 安装，也可以用油猴脚本管理器安装。
有问题，欢迎随时反馈。
安装链接: Discourse - Collapse Boosts
SCR-20260407-tlvj591×231 15.7 KB
折叠后效果：
SCR-20260407-lzca381×123 6.36 KB
鼠标移到上面时：
SCR-20260407-lzgc802×305 95.2 KB
--【壹】--：
可以可以，总算有折叠的了，明天试试看你的
--【贰】--：
这个是纯 CSS 实现，不会增加任何请求，对服务器不会有影响。
也没有完全隐藏，还原始皇加的功能。
支持折叠一下，还可以展开。
--【叁】--：
是的。有的回复的 boost 想跳过，有的想看。都可以方便控制。
--【肆】--：
好家伙，更新了新功能上来更多脚本还原新功能，服务器上了压力，也没实际解决问题。要不回撤吧
--【伍】--：
感谢。没想到 CSS 还能实现计数器功能，学到了。
回头我更新发布一下。
--【陆】--：
感谢楼主分享，很棒的折叠实现方案！
我基于这个脚本稍微修改了下，支持在 boosts 后添加一个计数器，显示隐藏的 boosts 数量。
image961×444 34.3 KB
// ==UserScript==
// @name Discourse - Collapse Boosts
// @namespace https://github.com/utags
// @version 3.0.0
// @description 自动折叠 boost。
// @author Pipecraft
// @license MIT
// @grant GM_addStyle
// @run-at document-start
// @match *://*.meta.discourse.org/*
// @match *://*.linux.do/*
// @match *://*.idcflare.com/*
// @match *://*.www.nodeloc.com/*
// @match *://*.meta.appinn.net/*
// @match *://*.community.openai.com/*
// @match *://*.community.cloudflare.com/*
// @match *://*.community.wanikani.com/*
// @match *://*.forum.cursor.com/*
// @match *://*.forum.obsidian.md/*
// @match *://*.forum-zh.obsidian.md/*
// @match *://*.www.uscardforum.com/*
// @downloadURL https://update.greasyfork.org/scripts/572868/Discourse%20-%20Collapse%20Boosts.user.js
// @updateURL https://update.greasyfork.org/scripts/572868/Discourse%20-%20Collapse%20Boosts.meta.js
// ==/UserScript==
(function() {
let css = `
.discourse-boosts__list {
max-width: fit-content;
/* 初始化计数器 */
counter-reset: boosts;
}
.discourse-boosts__bubble{
/* 计数器累加 */
counter-increment: boosts;
/*如果想尽可能减少 boosts 对信息流干扰，可开启下方透明度*/
/*opacity: 70%;*/
transition: opacity 180ms ease;
}
/* boosts 列表后添加数值 */
.discourse-boosts__list::after{
/*减去默认显示数量*/
counter-increment: boosts -2;
content: counter(boosts)"+";
opacity: 50%;
color: var(--primary);
font-size: var(--font-down-2);
line-height: 1;
transition: opacity 180ms ease;
}
/* 第三个和它后面的 boost */
.discourse-boosts__bubble:nth-child(n + 3) {
opacity: 0%;
display: inline-flex;
max-inline-size: 0;
max-block-size: 0;
padding: 0;
margin-inline-start: calc(var(--space-1) * -1);
overflow: hidden;
pointer-events: none;
transition-property:
opacity, max-inline-size, max-block-size, padding, margin-inline-start;
transition-duration: 180ms, 0ms, 0ms, 0ms, 0ms;
transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms;
transition-timing-function: ease, linear, linear, linear, linear;
}
/* 鼠标移到 boost 上面时 */
.discourse-boosts__list:hover .discourse-boosts__bubble {
opacity: 100%;
max-inline-size: 999px;
max-block-size: 999px;
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
margin-inline-start: 0;
pointer-events: auto;
transition-delay: 120ms, 120ms, 120ms, 120ms, 120ms;
}
/* 鼠标悬停时隐藏数值*/
.discourse-boosts__list:hover::after{
opacity: 0%;
}
/* boosts ≤ 2 时，隐藏数值 */
.discourse-boosts__list:has(>.discourse-boosts__bubble:first-child:nth-last-child(-n+3))::after {
opacity: 0%;
}
.discourse-boosts-trigger {
order: -1;
}
`;
if (typeof GM_addStyle !== "undefined") {
GM_addStyle(css);
} else {
const styleNode = document.createElement("style");
styleNode.appendChild(document.createTextNode(css));
(document.querySelector("head") || document.documentElement).appendChild(styleNode);
}
})();
--【柒】--：
感谢佬提供的方案。
优化部分逻辑后，提交了新版本。
--【捌】--：
可以的呀 想看或者不想看 自己都可以通过鼠标来控制 挺不错的
--【玖】--：
厉害的大佬，这么快就实现boost折叠功能了
感觉 Boost 很多时，会分散注意力，影响阅读。
于是写了一个样式，实现 Boost 自动折叠/展开功能。
默认只显示两个 Boost，鼠标移到上面时，显示全部内容。
声明：本样式不会影响任何功能，隐藏任何内容。
建议使用 Stylus 安装，也可以用油猴脚本管理器安装。
有问题，欢迎随时反馈。
安装链接: Discourse - Collapse Boosts
SCR-20260407-tlvj591×231 15.7 KB
折叠后效果：
SCR-20260407-lzca381×123 6.36 KB
鼠标移到上面时：
SCR-20260407-lzgc802×305 95.2 KB
--【壹】--：
可以可以，总算有折叠的了，明天试试看你的
--【贰】--：
这个是纯 CSS 实现，不会增加任何请求，对服务器不会有影响。
也没有完全隐藏，还原始皇加的功能。
支持折叠一下，还可以展开。
--【叁】--：
是的。有的回复的 boost 想跳过，有的想看。都可以方便控制。
--【肆】--：
好家伙，更新了新功能上来更多脚本还原新功能，服务器上了压力，也没实际解决问题。要不回撤吧
--【伍】--：
感谢。没想到 CSS 还能实现计数器功能，学到了。
回头我更新发布一下。
--【陆】--：
感谢楼主分享，很棒的折叠实现方案！
我基于这个脚本稍微修改了下，支持在 boosts 后添加一个计数器，显示隐藏的 boosts 数量。
image961×444 34.3 KB
// ==UserScript==
// @name Discourse - Collapse Boosts
// @namespace https://github.com/utags
// @version 3.0.0
// @description 自动折叠 boost。
// @author Pipecraft
// @license MIT
// @grant GM_addStyle
// @run-at document-start
// @match *://*.meta.discourse.org/*
// @match *://*.linux.do/*
// @match *://*.idcflare.com/*
// @match *://*.www.nodeloc.com/*
// @match *://*.meta.appinn.net/*
// @match *://*.community.openai.com/*
// @match *://*.community.cloudflare.com/*
// @match *://*.community.wanikani.com/*
// @match *://*.forum.cursor.com/*
// @match *://*.forum.obsidian.md/*
// @match *://*.forum-zh.obsidian.md/*
// @match *://*.www.uscardforum.com/*
// @downloadURL https://update.greasyfork.org/scripts/572868/Discourse%20-%20Collapse%20Boosts.user.js
// @updateURL https://update.greasyfork.org/scripts/572868/Discourse%20-%20Collapse%20Boosts.meta.js
// ==/UserScript==
(function() {
let css = `
.discourse-boosts__list {
max-width: fit-content;
/* 初始化计数器 */
counter-reset: boosts;
}
.discourse-boosts__bubble{
/* 计数器累加 */
counter-increment: boosts;
/*如果想尽可能减少 boosts 对信息流干扰，可开启下方透明度*/
/*opacity: 70%;*/
transition: opacity 180ms ease;
}
/* boosts 列表后添加数值 */
.discourse-boosts__list::after{
/*减去默认显示数量*/
counter-increment: boosts -2;
content: counter(boosts)"+";
opacity: 50%;
color: var(--primary);
font-size: var(--font-down-2);
line-height: 1;
transition: opacity 180ms ease;
}
/* 第三个和它后面的 boost */
.discourse-boosts__bubble:nth-child(n + 3) {
opacity: 0%;
display: inline-flex;
max-inline-size: 0;
max-block-size: 0;
padding: 0;
margin-inline-start: calc(var(--space-1) * -1);
overflow: hidden;
pointer-events: none;
transition-property:
opacity, max-inline-size, max-block-size, padding, margin-inline-start;
transition-duration: 180ms, 0ms, 0ms, 0ms, 0ms;
transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms;
transition-timing-function: ease, linear, linear, linear, linear;
}
/* 鼠标移到 boost 上面时 */
.discourse-boosts__list:hover .discourse-boosts__bubble {
opacity: 100%;
max-inline-size: 999px;
max-block-size: 999px;
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
margin-inline-start: 0;
pointer-events: auto;
transition-delay: 120ms, 120ms, 120ms, 120ms, 120ms;
}
/* 鼠标悬停时隐藏数值*/
.discourse-boosts__list:hover::after{
opacity: 0%;
}
/* boosts ≤ 2 时，隐藏数值 */
.discourse-boosts__list:has(>.discourse-boosts__bubble:first-child:nth-last-child(-n+3))::after {
opacity: 0%;
}
.discourse-boosts-trigger {
order: -1;
}
`;
if (typeof GM_addStyle !== "undefined") {
GM_addStyle(css);
} else {
const styleNode = document.createElement("style");
styleNode.appendChild(document.createTextNode(css));
(document.querySelector("head") || document.documentElement).appendChild(styleNode);
}
})();
--【柒】--：
感谢佬提供的方案。
优化部分逻辑后，提交了新版本。
--【捌】--：
可以的呀 想看或者不想看 自己都可以通过鼠标来控制 挺不错的
--【玖】--：
厉害的大佬，这么快就实现boost折叠功能了