[js] 思源笔记左侧空白部分显示自定义文字 + 学习

原贴[js] 思源笔记左侧空白部分显示自定义文字 - 链滴

还可以再学习一下[js] 思源笔记左侧空白区域显示心灵毒鸡汤或倒计时 - 链滴

学习得到光标所在块得到 id

通过块 id 遍历 DOM 树结构获得面包屑及其它

document.addEventListener 函数

防抖函数

/*css部分*/
.fn__flex-1.dock__item--space {
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	font-size: 20px; /* 字体大小 */
	writing-mode: vertical-rl; /* 竖向排列 */
	text-align: center; /* 文字居中对齐 */
}

//左侧空白部分显示自定义文字js部分
// 获取左侧栏目标元素
var targetElement = document.querySelector('div.fn__flex-1.dock__item--space');
targetElement.textContent = '过 犹 不 及';
// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    };
}

// 检查 breadcrumbElement 的函数
function checkBreadcrumbElement(event) {
    const clickedElement = event.target;

    // 向上遍历DOM树直到找到具有data-node-id属性的元素
    let element = clickedElement;
    while (element && !element.hasAttribute('data-node-id')) {
        element = element.parentNode;
    }

    // 如果找到了具有data-node-id属性的元素
    if (element) {
        const nodeId = element.getAttribute('data-node-id');
        console.log('找到的data-node-id是:', nodeId);

        // 获取data-node-id元素的祖父元素
        let grandParentElement = element.parentNode.parentNode;

        // 查找祖父元素的兄弟元素中是否有protyle-breadcrumb类
        let siblingElements = Array.from(grandParentElement.parentNode.children).filter(child => child !== grandParentElement);
        let breadcrumbElement = siblingElements.find(sibling => sibling.classList.contains('protyle-breadcrumb'));
        console.log("breadcrumbElement", breadcrumbElement);

        if (breadcrumbElement) {
            // 找到protyle-breadcrumb元素下的protyle-breadcrumb__bar
            let breadcrumbBar = breadcrumbElement.querySelector('.protyle-breadcrumb__bar');
            if (breadcrumbBar) {
                // 在protyle-breadcrumb__bar下寻找所有的protyle-breadcrumb__item
                let breadcrumbItems = breadcrumbBar.querySelectorAll('.protyle-breadcrumb__item');
                console.log("breadcrumbItems", breadcrumbItems);
                if (breadcrumbItems.length > 0) {
                    // 获取第二个倒数的面包屑项
                    let secondLastBreadcrumbItem = breadcrumbItems[breadcrumbItems.length - 2];
                    if (secondLastBreadcrumbItem) {
                        // 获取第二个倒数面包屑项的文本内容
                        let textElement = secondLastBreadcrumbItem.querySelector('.protyle-breadcrumb__text');
                        if (textElement) {
                            let textContent = textElement.textContent;
targetElement.textContent =textContent;
                            console.log('第二个倒数的标题内容是:', textContent);
                        }
                    } else {
                        console.log('没有找到第二个倒数的面包屑项');
                    }
                } else {
                    console.log('没有找到protyle-breadcrumb__item元素');
                }
            } else {
                console.log('没有找到protyle-breadcrumb__bar元素');
            }
        } else {
            console.log('没有找到protyle-breadcrumb元素');
        }
    } else {
        console.log('没有找到具有data-node-id属性的元素');
    }
}

// 为点击事件绑定防抖后的事件处理函数
document.addEventListener('click', debounce(checkBreadcrumbElement, 100));