笔记下面反链框里的反链笔记--能显示其下面的反链数量吗？

疑问解答
22

请问反链列表，能否显示在右侧？就像思源那样。
因为有时候页面太长，拉下来比较麻烦。

23

再请教下这个啊，这个结果能按照反链数量的多少进行排列吗？ :grinning:

24

反链列表，能否显示在右侧？

其实默认就是显示在右侧栏吧? 运行命令行, 里面这个就是

image

25

按照反链数量的多少进行排列

其实这已经在反链面板里承载太多新要素了

这也许从技术上仍然是可行的 (通过 monkey-patch 例如 obsidian-query-control/src/main.ts 的方案) 且这个 monkey-patch 还需要给排序策略增加一条 “按照反链数量排”

// 此为 Ob 自带的反链面板六种排序
AF = [["alphabetical", "alphabeticalReverse"], ["byModifiedTime", "byModifiedTimeReverse"], ["byCreatedTime", "byCreatedTimeReverse"]]
, LF = {
  alphabetical: Sf.plugins.fileExplorer.labelSortAToZ,
  alphabeticalReverse: Sf.plugins.fileExplorer.labelSortZToA,
  byModifiedTime: Sf.plugins.fileExplorer.labelSortNewToOld,
  byModifiedTimeReverse: Sf.plugins.fileExplorer.labelSortOldToNew,
  byCreatedTime: Sf.plugins.fileExplorer.labelSortCreatedNewToOld,
  byCreatedTimeReverse: Sf.plugins.fileExplorer.labelSortCreatedOldToNew
}
, PF = {
  alphabetical: function(e, t) {
      return Xf(e.basename, t.basename)
  },
  alphabeticalReverse: function(e, t) {
      return -PF.alphabetical(e, t)
  },
  byModifiedTime: function(e, t) {
      return t.stat.mtime - e.stat.mtime
  }, ...

但是没看懂这个技术, 我现在还不会弄这个


目前我只知道直接操作 DOM 的办法

// 参考 https://forum-zh.obsidian.md/t/topic/25760/35
this.app.workspace.onLayoutReady(() => {
    let stTimer;
    // new Notice(`将要执行反链面板增补属性5 stTimer ${stTimer}`);
    this.app.workspace.on('active-leaf-change', async (activeLeaf) => {
        // 定时防止无效触发，只取最后一个触发
        if(stTimer) clearTimeout(stTimer);
        // new Notice(`重新设置 stTimer ${stTimer}`);
        stTimer = setTimeout(() => {
            patch_backlink_pane();
        }, 2000)
    })
})

function patch_backlink_pane() {
    var dv = app.plugins.plugins.dataview.api;
    var backlink_data = dv.page(app.workspace.getActiveFile().path).file.inlinks.array().reduce((acc, link) => {
        acc[dv.page(link).file.name] = 
        dv.page(link).file.inlinks.length;   // <-- 收集 "反链数" 可以改为其他属性
        return acc;
    }, {});
    console.log(backlink_data);

    document.querySelectorAll('.backlink-pane .search-result-file-title .tree-item-inner').forEach(elem => {
        const note_title = elem.innerText.trim();

        var backlink_info_span = elem.nextSibling;

        if (backlink_info_span && backlink_info_span.classList.contains('backlink-info-patch')) {
            // 如果存在且具有类名 'backlink-info-patch'，则直接操作其内容
            backlink_info_span.textContent = `🔗[${backlink_data[note_title] ?? '-'}]`; 
        } else {
            var new_span = document.createElement('span');
            new_span.className = 'backlink-info-patch';
            new_span.style.color = 'red'; // 设置文字颜色为红色
            new_span.style.backgroundColor = 'yellow';
            new_span.style.marginLeft = '0.5em';

            elem.parentNode.insertAfter(new_span, elem);
            new_span.textContent = `🔗[${backlink_data[note_title] ?? '-'}]`; 
        }
    });


    // 需要按照 backlink_data[note_title] (其中是数字或 undefined) 
    // 对所有的 tree-item 排序, 操作 DOM 节点

    const resultsContainer = document.querySelector('.backlink-pane .search-result-container .search-results-children');
    const treeItems = Array.from(resultsContainer.querySelectorAll('.tree-item'));

    // 按照 backlink_data[note_title] 排序
    treeItems.sort((a, b) => {
        const titleA = a.querySelector('.tree-item-inner').innerText.trim();
        const titleB = b.querySelector('.tree-item-inner').innerText.trim();
        const backlinkCountA = backlink_data[titleA] ?? -1;
        const backlinkCountB = backlink_data[titleB] ?? -1;
        return backlinkCountB - backlinkCountA; // 降序排序
    });
    treeItems.forEach(item => resultsContainer.appendChild(item)); // 将排序后的元素重新添加到 DOM 中
}

这等于是直接编辑 DOM 节点了, 交互时乱跳, 勉强能用吧


PS. 其实楼主之后几个需求, 真不如直接拿 dataview 解决, 个人不太建议继续折腾这个默认的反链面板

26

好的，谢谢您的建议！
有时候会有点好奇，感谢您每次的耐心回复！ :pray: