xxhk.org

学习骇客

Anki 标签的隐藏、省略和置顶处理

2024 / 10 / 24

场景

在使用 Anki 或 学习骇客的配套方案时，经常需要使用标签组织笔记。例如，通过多级标签表示书籍的结构，如“结构::书名::章节名”。又或者，通过多级标签表示主题的结构，如“分布式认知::原理”“分布式认知::依据”“分布式认知::方法”。

但是标签多了以后，有些可能不需要在复习界面查看，有些则不需要显示过长的完整版，另外有一些重要的标签为了防止被遮挡或被省略可能就需要提前或置顶显示。

作用

隐藏：隐藏不需要看到的标签。

省略：省略较长的标签，例如书名和章节名两个部分只提取特定长度的标签供复习时参考，而超出长度的部分则省略。

置顶：将特定标签放在标签字段的最开头显示，避免省略导致的看不见。

这是未处理的效果：

这是处理后的效果，仅在复习窗口、预览窗口生效，编辑窗口看到的仍然是完整的标签。

处理过程：

  • 隐藏导入标签“WR”标签；

  • 隐藏主题标签里的“主题::”字符；

  • 省略“结构”标签里的书名、章节名超出部分。

方法

第一步，进入模板窗口，修改标签字段<div class="mytag">{{Tags}}</div>，添加 mytag 的类名供 JavaScript 选择。如果正面和背面都有标签字段{{Tags}}，则要在“正面内容模板”和“背面内容模板”里分别添加两次。

第二步，在 media 文件夹里创建 CSS 文件，命名为 _mytag.css，文件内容如下：

.mytag {
    visibility: hidden;
}
.mytag.processed {
    visibility: visible;
}

第三步，在 media 文件夹里创建 JS 文件，命名为 _mytag.js，文件内容如下：

// 定义处理标签的主函数
function processAllTags() {
    const tagElements = document.querySelectorAll("div.mytag:not(.processed)");
    
    if (tagElements.length === 0) return;

    tagElements.forEach(tagElement => {
        let tags = tagElement.textContent;
        let structureTag = '';
        
        const structureMatch = tags.match(/结构::([^:]+)::([^\s]+)/);
        if (structureMatch) {
            const fullStructureTag = structureMatch[0];
            const bookName = structureMatch[1];
            const chapterName = structureMatch[2];
            
            const processedBookName = bookName.length > 8 ? 
                bookName.substring(0, 8) + '...' : bookName;
            
            const processedChapterName = chapterName.length > 6 ? 
                chapterName.substring(0, 6) + '...' : chapterName;
            
            structureTag = `结构::${processedBookName}::${processedChapterName} `;
            tags = tags.replace(fullStructureTag, '');
        }

        tags = tags.replace(/主题::/g, '')
                  .replace(/\bWR\b/g, '')
                  .replace(/XX\S*\s*/g, '')
                  .replace(/\s*\S*YY(?=\s|$)/g, '')
                  .replace(/\s*\S*ZZ\S*\s*/g, '')
                  .replace(/\s+/g, ' ')
                  .trim();

        tagElement.textContent = structureTag + tags;
        tagElement.classList.add('processed');
    });
}

// 防抖函数，避免频繁执行
function debounce(func, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(() => func(), wait);
    };
}

// 使用防抖包装处理函数
const debouncedProcess = debounce(processAllTags, 10);

// 创建 MutationObserver 实例
const observer = new MutationObserver((mutations) => {
    // 检查变化是否与我们关心的元素相关
    for (const mutation of mutations) {
        if (mutation.target.classList?.contains('mytag') || 
            mutation.target.querySelector?.('.mytag')) {
            debouncedProcess();
            break;
        }
    }
});

// 开始观察 DOM 变化
document.addEventListener('DOMContentLoaded', () => {
    // 先处理一次现有的标签
    processAllTags();
    
    // 开始观察整个文档的变化
    observer.observe(document.body, {
        childList: true,    // 观察子节点的添加或删除
        subtree: true,      // 观察所有后代节点
        characterData: true // 观察文本内容的变化
    });
});

第四步：在 Anki 模板中引用这些文件。和第一步一样，视模板需要可能也需要添加两遍。

<!-- 在卡片模板的前端和后端都添加这些引用 -->
<head>
    <!-- 引入 CSS -->
    <link rel="stylesheet" href="_mytag.css">
    <!-- 引入 JavaScript -->
    <script src="_mytag.js"></script>
</head>

以下是学习骇客提供的一些配套 Anki 的方法，其中大部分都用到了结构标签和主题标签。配合以上处理方式使用更佳。

❤️ Chrome extensions:

地址： https://chromewebstore.google.com/search/XXHK

Weread to Anki - XXHK

YouTube to Anki - XXHK

Highlight to Anki - XXHK

❤️ Anki addons:

地址：https://ankiweb.net/shared/addons?search=XXHK

Edit Field During Review - XXHK

Send to Flomo - XXHK

Export Notes - XXHK

Images Transfer - XXHK