有没有针对本站的长楼折叠油猴脚本

偶尔会遇到长楼(例子插件化动画/漫画/小说/影视/音乐/网盘聚合软件汇总列表 - #2,来自 oldsento 之前还习以为常,但突然想着这不很奇怪? ?本站居然没有长楼折叠,看看其他网站,貌似大部分都自带了,而且还各种限制,于是又得找自动展开脚本了:joy:……

总之有的话分享一下,3Q very much!

找到一个镜像https://home.greasyfork.org.cn/zh-hans 搜了下,没有相关脚本,没办法去问一下那些免费xxAI吧

问AI搞了个脚本,但不知哪里有问题,X浏览器,via和Alook测试,没用诶,有没有人指导一下,不懂代码:

// ==UserScript==
// @name         Long Post Collapse
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Collapse long posts in niche forums, with support for Android browsers including X, Via, and Alook
// @author       Your Name
// @match        https://meta.appinn.net/t/topic/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建折叠按钮
    const createCollapseButton = (post) => {
        const button = document.createElement('button');
        button.innerText = '折叠';
        button.style.marginBottom = '10px';
        button.style.cursor = 'pointer'; // 增加鼠标指针样式
        button.style.backgroundColor = '#007bff'; // 按钮背景色
        button.style.color = '#fff'; // 按钮文字颜色
        button.style.border = 'none'; // 去掉边框
        button.style.padding = '5px 10px'; // 增加内边距
        button.style.borderRadius = '5px'; // 圆角
        button.onclick = () => {
            const content = post.querySelector('.post-content');
            if (content.style.display === 'none') {
                content.style.display = 'block';
                button.innerText = '折叠';
            } else {
                content.style.display = 'none';
                button.innerText = '展开';
            }
        };
        return button;
    };

    // 查找所有长楼层
    const posts = document.querySelectorAll('.post');
    posts.forEach(post => {
        const content = post.querySelector('.post-content');
        if (content && content.innerText.length > 500) { // 假设500字以上为长楼层
            const button = createCollapseButton(post);
            post.insertBefore(button, content);
            content.style.display = 'block'; // 默认显示
        }
    });

    // 兼容安卓浏览器的事件处理
    document.addEventListener('touchstart', function(event) {
        if (event.target.tagName === 'BUTTON') {
            event.preventDefault(); // 防止默认行为
        }
    }, { passive: false });

    // 适配 X 浏览器、Via 浏览器和 Alook 浏览器
    const isAndroidBrowser = () => {
        const userAgent = navigator.userAgent.toLowerCase();
        return userAgent.includes('android') && (userAgent.includes('xbrowser') || userAgent.includes('via') || userAgent.includes('alook'));
    };

    if (isAndroidBrowser()) {
        // 针对特定浏览器的额外适配
        console.log('适配 X 浏览器、Via 浏览器和 Alook 浏览器');
        // 这里可以添加特定的适配代码
    }
})();
1 个赞

你可以试试贴子右侧的时间轴线.

虽然不能折叠,但是可以快速定位

应该是楼这个概念不好定义,可能你需要多找几种有楼的网站,让AI分析共性再去开发

因为只是偶尔用的便宜免费AI,所以搞开发能力还是很多限制啊难搞,如果有心人帮忙就好了

sonnet 4.5是这么说的

  • Android浏览器检测逻辑有误:xbrowser、via、alook 可能不是实际的UA标识
  • 适配代码为空,没有实际作用

优化后的脚本

         1 +  // ==UserScript==
         2 +  // @name         Long Post Collapse
         3 +  // @namespace    http://tampermonkey.net/
         4 +  // @version      0.4
         5 +  // @description  Collapse long posts in niche forums, with support for Android
           + browsers including X, Via, and Alook
         6 +  // @author       Your Name
         7 +  // @match        https://meta.appinn.net/t/topic/*
         8 +  // @grant        none
         9 +  // ==/UserScript==
        10 +
        11 +  (function() {
        12 +      'use strict';
        13 +
        14 +      const CONFIG = {
        15 +          minLength: 500,  // 最小字数阈值
        16 +          buttonCollapsed: '展开',
        17 +          buttonExpanded: '折叠'
        18 +      };
        19 +
        20 +      // 创建折叠按钮
        21 +      const createCollapseButton = (post) => {
        22 +          const button = document.createElement('button');
        23 +          button.className = 'post-collapse-btn';
        24 +          button.innerText = CONFIG.buttonExpanded;
        25 +          button.style.cssText = `
        26 +              margin-bottom: 10px;
        27 +              cursor: pointer;
        28 +              background-color: #007bff;
        29 +              color: #fff;
        30 +              border: none;
        31 +              padding: 5px 10px;
        32 +              border-radius: 5px;
        33 +              font-size: 14px;
        34 +              transition: background-color 0.2s;
        35 +          `;
        36 +
        37 +          button.onmouseenter = () => button.style.backgroundColor = '#0056b3';
        38 +          button.onmouseleave = () => button.style.backgroundColor = '#007bff';
        39 +
        40 +          button.onclick = (e) => {
        41 +              e.preventDefault();
        42 +              const content = post.querySelector('.post-content');
        43 +              if (content.style.display === 'none') {
        44 +                  content.style.display = 'block';
        45 +                  button.innerText = CONFIG.buttonExpanded;
        46 +              } else {
        47 +                  content.style.display = 'none';
        48 +                  button.innerText = CONFIG.buttonCollapsed;
        49 +              }
        50 +          };
        51 +
        52 +          return button;
        53 +      };
        54 +
        55 +      // 处理单个帖子
        56 +      const processPost = (post) => {
        57 +          // 防止重复处理
        58 +          if (post.dataset.collapseProcessed) return;
        59 +
        60 +          const content = post.querySelector('.post-content');
        61 +          if (content && content.innerText.trim().length > CONFIG.minLength) {
        62 +              // 检查是否已有按钮
        63 +              if (!post.querySelector('.post-collapse-btn')) {
        64 +                  const button = createCollapseButton(post);
        65 +                  post.insertBefore(button, content);
        66 +              }
        67 +              post.dataset.collapseProcessed = 'true';
        68 +          }
        69 +      };
        70 +
        71 +      // 处理所有帖子
        72 +      const processAllPosts = () => {
        73 +          document.querySelectorAll('.post').forEach(processPost);
        74 +      };
        75 +
        76 +      // 初始处理
        77 +      processAllPosts();
        78 +
        79 +      // 监听动态加载的内容
        80 +      const observer = new MutationObserver((mutations) => {
        81 +          let shouldProcess = false;
        82 +          mutations.forEach(mutation => {
        83 +              mutation.addedNodes.forEach(node => {
        84 +                  if (node.nodeType === 1) {
        85 +                      if (node.classList?.contains('post') ||
           + node.querySelector?.('.post')) {
        86 +                          shouldProcess = true;
        87 +                      }
        88 +                  }
        89 +              });
        90 +          });
        91 +          if (shouldProcess) {
        92 +              processAllPosts();
        93 +          }
        94 +      });
        95 +
        96 +      observer.observe(document.body, {
        97 +          childList: true,
        98 +          subtree: true
        99 +      });
       100 +  })();

呃前面的行号能去掉么?手机浏览器复制会带走啊

经测试,alook,X,via没用诶

长楼折叠是什么效果

示例:

隔壁chii.in / bgm.tv 还是用的基于该网站开发的折叠组件,该网站自带了开发环境,这方面窝不太懂具体是啥

你是需要一个手动添加截断的功能么?

为啥是手动?如果可以设置成自动/默认那也可以

用了Opus 4.5,我电脑上测试可以了

// ==UserScript==
// @name         Discourse 帖子折叠
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  折叠超过6em高度的帖子回复,点击展开/收起
// @author       Jerry
// @match        *://meta.appinn.net/*
// @match        *://*.discourse.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const MAX_HEIGHT = '6em';

    GM_addStyle(`
        .post-collapsed {
            max-height: ${MAX_HEIGHT};
            overflow: hidden;
            position: relative;
        }
        .post-collapsed::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3em;
            background: linear-gradient(transparent, var(--secondary, #fff));
            pointer-events: none;
        }
        .post-expand-btn {
            display: block;
            width: 100%;
            padding: 8px;
            margin-top: 4px;
            background: var(--tertiary-low, #e9e9e9);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            color: var(--primary, #333);
            text-align: center;
        }
        .post-expand-btn:hover {
            background: var(--tertiary, #ddd);
        }
        .post-expand-btn:active {
            transform: scale(0.98);
        }
        @media (max-width: 768px) {
            .post-expand-btn {
                padding: 12px;
                font-size: 16px;
            }
        }
    `);

    function processPost(article) {
        if (article.dataset.collapsed !== undefined) return;

        const content = article.querySelector('.cooked');
        if (!content) return;

        // 标记已处理
        article.dataset.collapsed = 'false';

        // 检测实际高度
        const checkHeight = () => {
            const emInPx = parseFloat(getComputedStyle(content).fontSize);
            const maxPx = emInPx * 6;

            if (content.scrollHeight > maxPx + 10) {
                if (!content.classList.contains('post-collapsed')) {
                    content.classList.add('post-collapsed');
                    article.dataset.collapsed = 'true';

                    // 添加展开按钮
                    let btn = article.querySelector('.post-expand-btn');
                    if (!btn) {
                        btn = document.createElement('button');
                        btn.className = 'post-expand-btn';
                        btn.textContent = '展开全部';
                        btn.onclick = () => {
                            const isCollapsed = content.classList.toggle('post-collapsed');
                            btn.textContent = isCollapsed ? '展开全部' : '收起';
                            article.dataset.collapsed = isCollapsed ? 'true' : 'false';
                        };
                        content.parentNode.insertBefore(btn, content.nextSibling);
                    }
                }
            }
        };

        // 等待图片加载后再检测
        const images = content.querySelectorAll('img');
        if (images.length > 0) {
            let loaded = 0;
            images.forEach(img => {
                if (img.complete) {
                    loaded++;
                } else {
                    img.onload = img.onerror = () => {
                        loaded++;
                        if (loaded === images.length) checkHeight();
                    };
                }
            });
            if (loaded === images.length) checkHeight();
        } else {
            checkHeight();
        }
    }

    function processAllPosts() {
        document.querySelectorAll('article.boxed, .topic-post').forEach(processPost);
    }

    // 初始处理
    processAllPosts();

    // 监听动态加载的帖子
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === 1) {
                    if (node.matches('article.boxed, .topic-post')) {
                        processPost(node);
                    }
                    node.querySelectorAll?.('article.boxed, .topic-post').forEach(processPost);
                }
            });
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

经过测试,安卓x浏览器4.8.2,via5.9.0正常,alook10.9没用,

话说折叠太狠了吧:cry:,4行字符都要折叠诶,可以自定义行数和字符总数么?具体改哪里?

发现bug,脚本执行很慢,x浏览器上很多时候都没反应或要等一段时间

就是开头这个地方,6em=4行高,你自己换算下
安卓浏览器对脚本支持还是太弱,印象中via好像已经停止开发了吧?

https://m.wandoujia.com/apps/6609177

  • via v6.7.1
  • 更新时间:2025年09月09日 10:12
  • 最新6.8.0

我有个问题啊,目前对于长文,并不会一次性全部加载,本身也是只显示几层楼啊

有时候想刷楼看评论,但是可能某个楼层特别长,比如软件更新了,写了一串介绍,电脑上其实还好,手机确实就挺烦的