在思源笔记中简易实现 Andy Mode

[阿菜1]

思源的片段和主题同时支持css片段和js片段，因此可以自己快速实现许多轻量功能

第一步，先上原链接： Andy Matuschak，有兴趣的小伙伴可以去看看长啥样

第二步，上片段：

css 片段：

.layout__center div.layout-tab-container.fn__flex-1 > div.fn__flex-1.fn__none {
    display: flex !important;
    min-width: 600px;
    border-radius: 0.75em;
    border: 2px solid var(--b3-border-color);
    margin: 10px;
}

.layout__center div.layout-tab-container.fn__flex-1 > div.fn__flex-1 {
    display: flex !important;
    min-width: 600px;
    border-radius: 0.75em;
    border: 2px solid var(--b3-border-color);
    margin: 10px;
}

​

js 片段：

document.querySelectorAll('li[data-type="tab-header"]').forEach(tab => {
    if (tab && tab.getAttribute('data-type') === 'tab-header') {
        console.log('Clicking tab with data-id:', tab.getAttribute('data-id'));
        tab.click();
    }
});

​

第三步，简单解释一下

css片段 的大致思路就是把未激活标签页的 display 改回 flex，用 js片段 的原因在于每次打开思源后，非活动标签页是不加载的，js片段 把每个标签页点一次，对就是这么简单粗暴。

更新

document.querySelectorAll('li[data-type="tab-header"]').forEach(tab => {
    // 用户点击标签页时平滑滚动到对应的内容区域，不支持右边的标签页菜单
    tab.addEventListener('click', () => {
        const tabId = tab.getAttribute('data-id');
        const content = document.querySelector(`.layout__center .fn__flex-1.protyle[data-id="${tabId}"], .layout__center .fn__flex-1.protyle.fn__none[data-id="${tabId}"]`);
        if (content) {
            content.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
        }
    });
});