求助隐藏面包屑中的部分文本

你可能想要的是这种效果吧

求如何在面包屑中隐藏重复项

感谢大佬回复。
不过我想要的不是隐藏重复项，而是隐藏列表项的文本，也就是变成下图的效果

关联 Issue #13513 · siyuan-note/siyuan

明白了，不过，css 实现不了，必须通过 js 实现。

你试试下面这个代码是否你想要的效果。

(()=>{
    // 监听面包屑项出现
    whenElementExist('.layout__center').then(() => {
        observeElementExist('.protyle-breadcrumb__item', (element) => {
            const xlinkHref = element.querySelector('svg use')?.getAttribute('xlink:href');
            if(xlinkHref !== '#iconListItem') return;
            const text = element.querySelector('.protyle-breadcrumb__text');
            if(!text) return;
            text.style.display = 'none';
        }, '.layout__center');
    });

    // 等待元素出现（简版）
    function whenElementExist(selector) {
        return new Promise(resolve => {
            const check = () => {
                const el = typeof selector==='function'?selector():document.querySelector(selector);
                if (el) resolve(el); else requestAnimationFrame(check);
            };
            check();
        });
    }
  
    // 监听元素出现
    function observeElementExist(selector, callback, observeNode) {
        const handleMutations = (mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach(node => {
                        if (node.matches && node.matches(selector)) {
                            callback(node);
                            //observer.disconnect(); // 一旦找到元素，停止监听
                        }
                    });
                }
            }
        };
  
        // 创建一个MutationObserver实例
        const config = { attributes: false, childList: true, subtree: true };
        const observer = new MutationObserver(handleMutations);
  
        // 选择需要监听的父节点
        observeNode = typeof observeNode === 'string' ? document.querySelector(observeNode) : observeNode;
        const targetNode = observeNode || document.body;
  
        // 开始监听目标节点的变化
        observer.observe(targetNode, config);
    }
})();
​

对就是这个效果！谢谢大佬！

就是有点小问题，编辑器页面的面包屑生效了，但是嵌入块的面包屑 和反链面板的面包屑没有生效。

可以使用 css 代码片段

@namespace xlink 'http://www.w3.org/1999/xlink';

.protyle-breadcrumb__item:has(use[xlink|href*=iconListItem]) .protyle-breadcrumb__text {
    display: none;
}
​

用这个代码试试。（之前的代码为了优化性能，缩小了监控范围导致的）

(()=>{
    // 监听面包屑项出现
    observeElementExist('.protyle-breadcrumb__item', (element) => {
        const xlinkHref = element.querySelector('svg use')?.getAttribute('xlink:href');
        if(xlinkHref !== '#iconListItem') return;
        const text = element.querySelector('.protyle-breadcrumb__text');
        if(!text) return;
        text.style.display = 'none';
    }, document.body);
  
    // 监听元素出现
    function observeElementExist(selector, callback, observeNode) {
        const handleMutations = (mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach(node => {
                        if (node.matches && node.matches(selector)) {
                            callback(node);
                            //observer.disconnect(); // 一旦找到元素，停止监听
                        }
                    });
                }
            }
        };
  
        // 创建一个MutationObserver实例
        const config = { attributes: false, childList: true, subtree: true };
        const observer = new MutationObserver(handleMutations);
  
        // 选择需要监听的父节点
        observeNode = typeof observeNode === 'string' ? document.querySelector(observeNode) : observeNode;
        const targetNode = observeNode || document.body;
  
        // 开始监听目标节点的变化
        observer.observe(targetNode, config);
    }
})();
​

如果还有问题，告诉我反链面板的面包屑怎么查看的？另外，你说的嵌入块面板屑应该指的是聚焦窗口的面包屑吧。

这个有效！！！

我之前试验过这个方案，当时明明没效果的，下图注释掉的部分是当时的片段。

可是今天突然有效果了，好奇怪

效果好像和昨天的一样，只有编辑器页面是生效的

1. 反链面板是 alt+b 打开的那个侧边栏面板。
2. 嵌入块是 {{sql}} 然后我勾选了「显示嵌入块面包屑」

明白了，这个可以。

(()=>{
    // 监听面包屑项出现
    observeElementExist('.protyle-breadcrumb__item', (element) => {
        const xlinkHref = element.querySelector('svg use')?.getAttribute('xlink:href');
        if(xlinkHref !== '#iconListItem') return;
        const text = element.querySelector('.protyle-breadcrumb__text');
        if(!text) return;
        text.style.display = 'none';
    }, document.body);
  
    // 监听元素出现
    function observeElementExist(selector, callback, observeNode) {
        const handleMutations = (mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach(node => {
                        if(!node || node.nodeType !== Node.ELEMENT_NODE) return;
                        if (node.matches && node.matches(selector)) {
                            callback(node);
                        } else if (node.querySelector(selector)) {
                            const nodes = node.querySelectorAll(selector);
                            nodes.forEach(node => {
                                callback(node);
                            });
                        }
                    });
                }
            }
        };
  
        // 创建一个MutationObserver实例
        const config = { attributes: false, childList: true, subtree: true };
        const observer = new MutationObserver(handleMutations);
  
        // 选择需要监听的父节点
        observeNode = typeof observeNode === 'string' ? document.querySelector(observeNode) : observeNode;
        const targetNode = observeNode || document.body;
  
        // 开始监听目标节点的变化
        observer.observe(targetNode, config);
    }
})();
​

另外吐槽下：

我也很奇怪那个 css，一摸一样的代码，我第一次试那个样式也没用，第二次试就好了 😄 。

这个代码完全符合！感谢大佬！ respect❤️

另外吐槽下：

我也很奇怪那个 css，一摸一样的代码，我第一次试那个样式也没用，第二次试就好了 😄 。

原来不止我一个人~ 太奇怪了