使用Mdict Editor Tool制作Tab词典的致命毛病

不对 :melting_face:,刚刚我仔细研究了下,实际上是你的Tab词典在欧路和mdict显示不全。。。没有和DictTango一样加载出第二到第五词条,第五词条除外,这是简繁通搜。所以根本就不会有这个问题。

显示不全?

拼写不一样的词头没有混合到一个词头里面???
那还要拼写干嘛

因为开启了 strip key,理论上应该要显示的,DictTango显示行为没错吧。
(离)开、离开:、离开]这些经过strip key是等同于离开的。

最新版还没下载完,就老版本而言GoldenDict的问题还更多一点。
Goldendict和DictTango用户应当都会遇到问题。

原因应该是Goldendict的strip key范围认定不规范,是更广的,不仅限于ASCII。多出了几条同时显示。

image

显示stripkey没错,但是混淆它们的namespace就错误了。这不是tab的问题。任何依赖html里面的 id的 字典都会被弄死。

namespace我并不懂,但希望有应对DictTango和Goldendict的解决方案,这两个软件应该覆盖论坛至少50%用户。

我考虑JavaScript不依赖id,而依赖页面的结构(和按钮之间的位置)

相当于邮递员不看地址,看导航。这样即使系统把其他城市的邮件放进邮递员的箱子里面,邮递员还是能送到,只不过是严重浪费汽油。

刚刚问的AI,我个人是不太明白和namespace有什么关系。AI和我想法是一样的,只要为容器赋予不同的属性区分就行了,用递增的序号即可。

如果我同时还存在两个容器在同一页面会怎么样:<qpih><qpihtb class="qpih"><qpiht class="qpihf qpihs" id="qpih1" onclick="qpih_d(this)">美国传统汉英反查词典v3</qpiht></qpihtb><qpihm class="qpihm"><qpihc class="qpihy latent" id="qpih_12285060" style="display:block" tab="美国传统汉英反查词典v3"><span class="pg_exam">〔levant〕Possibly from Spanish levantar (el campo) [to lift, break (camp)] <zh_cn>可能源自 西班牙语 levantar (el campo) [举起,离开(营地)] </zh_cn></span></qpihc></qpihm></qpih><qpih><qpihtb class="qpih"><qpiht class="qpihf qpihs" id="qpih1" onclick="qpih_d(this)">21世纪汉英反查疯狂版</qpiht></qpihtb><qpihm class="qpihm"><qpihc class="qpihy latent" id="qpih_5869278" style="display:block" tab="21世纪汉英反查疯狂版"><span class="pg_exam">〔step〕离开(along):</span></qpihc></qpihm></qpih>

在这种情况下会出现问题,因为JavaScript代码中存在以下几个冲突:

  1. ID冲突:
    两个容器都使用了相同的ID:
<qpiht id="qpih1" onclick="qpih_d(this)">美国传统汉英反查词典v3</qpiht>
<qpiht id="qpih1" onclick="qpih_d(this)">21世纪汉英反查疯狂版</qpiht>

HTML规范要求ID必须是唯一的。

  1. 查找范围问题:
    当前的JavaScript代码:
function qpih_d(t) {
    var y = document.getElementsByTagName("qpiht"); // 获取所有tab标签
    var l = document.getElementsByTagName("qpihc"); // 获取所有内容面板

这会获取页面上所有的qpiht和qpihc元素,而不是限定在当前容器内。

  1. 索引对应混乱:
    由于获取了所有元素,索引对应关系会混乱。

修复建议:

  1. 修改HTML结构,添加容器区分:
<qpih data-container="dict1">
  <qpihtb class="qpih">
    <qpiht class="qpihf qpihs" id="qpih1_dict1" onclick="qpih_d(this, 'dict1')">美国传统汉英反查词典v3</qpiht>
  </qpihtb>
  <qpihm class="qpihm">
    <qpihc class="qpihy latent" id="qpih_12285060" data-container="dict1">...</qpihc>
  </qpihm>
</qpih>

<qpih data-container="dict2">
  <qpihtb class="qpih">
    <qpiht class="qpihf qpihs" id="qpih1_dict2" onclick="qpih_d(this, 'dict2')">21世纪汉英反查疯狂版</qpiht>
  </qpihtb>
  <qpihm class="qpihm">
    <qpihc class="qpihy latent" id="qpih_5869278" data-container="dict2">...</qpihc>
  </qpihm>
</qpih>
  1. 修改JavaScript代码:
function qpih_d(t, containerId) {
    // 获取当前容器
    const container = t.closest('qpih');
    
    // 在当前容器内查找元素
    var y = container.getElementsByTagName("qpiht");
    for (e = 0; e < y.length; e++) {
        y[e].classList.remove("active");
    }
    
    var l = container.getElementsByTagName("qpihc");
    var newIndex = parseInt(t.id.split('_')[0].substring(4)) - 1;

    if (qpih_clicked && qpih_onTabIndex[containerId] == newIndex) {
        for (e = 0; e < l.length; e++) {
            l[e].setAttribute("class", "qpihy")
        }
        qpih_clicked = false;
    } else {
        qpih_onTabIndex[containerId] = newIndex;
        for (e = 0; e < l.length; e++) {
            tab = l[e];
            if (qpih_onTabIndex[containerId] === e) {
                tab.classList.add("active");
                tab.classList.remove("latent");
            } else {
                tab.classList.add("latent");
                tab.classList.remove("active");
            }
        }
        t.classList.add('active');
        qpih_clicked = true;
    }
}

// 修改全局变量
var qpih_onTabIndex = {
    dict1: 0,
    dict2: 0
};
  1. 考虑使用更现代的方案:
class TabContainer {
    constructor(container) {
        this.container = container;
        this.currentIndex = 0;
        this.clicked = false;
        this.init();
    }
    
    init() {
        // 初始化逻辑
    }
    
    switchTab(tab) {
        // 切换tab逻辑
    }
}

// 使用
document.querySelectorAll('qpih').forEach(container => {
    new TabContainer(container);
});

主要改进点:

  1. 添加容器标识,避免ID冲突
  2. 限定元素查找范围在当前容器内
  3. 为每个容器维护独立的状态
  4. 使用现代JavaScript特性提高可维护性
  5. 添加错误处理和边界检查
  6. 支持多实例共存

这样的改进可以让多个tab容器在同一页面正常工作,互不影响。

主贴的用例是 meandmyhomies 自己写的工具做的tab,Mdict Editor Tool制作的可参考 【阿彌陀佛】书法字典合集(囊括32部书法字典)五体书法大全64万图片2024.7.2 - 汉汉 - FreeMdict Forum

这就是dictango的问题,完全不是字典本身的问题。
把N个页面合并到一个页面,是相当于把不同城市的包裹放到一个邮递员手里一样的错误。

没办法,人家开发者就这么做的,自然有他的考虑,总不能GoldenDict一大堆开发者和DictTango的开发者愚蠢这么多年都不改吧。我们制作者要做的就是兼容。

要我说欧路和Mdict的显示才叫真正的不规范。。。其他Strip Key内容直接吞了。

愚蠢不至于,只是懒惰。合并了html文件,还要求里面的id不受影响是不可能的。

id就是唯一的标签,软件硬是把它变不唯一了,难道是字典的问题么

1 Like

没看到截屏显示被吞了。mdict里面显示词头的时候,会显示你选择的一个,没有选择的不显示,而不是吞了。

strip key内容合并,明显是更利于使用者查词典的。你总不希望为了显示不规范的词头对应词条你要点好几次吧。

strip key是·为了缩小搜索范围,一次显示多个不同的词头本身很好,但是把它们堆积到一个页面里面,就违背了html的规矩。

简言之,软件事情没做完,责任丢给了字典(页面)

让我这个懒惰的开发者来发表一点意见吧,其实这种词典在DictTango最佳的食用方式是阅读模式,因为阅读模式是按词条查看的,并没有合并。

其实是 Javascript 环境的隔离问题,ID 不唯一不是问题,Javascript 可以实现 100% 隔离的,完全看词典作者的能力。要聚合显示不同词典的内容,词典作者就要自己做好 Javascript 隔离,软件这边没法做更多,除非一次只显示一本词典的结果。

这就是说邮递员包里面有全国各地的包裹,因为地址上面的门牌号码都是1234.

然后说是邮递员能力问题,而不是系统调度和上游分流的问题。

1 Like

制作tab词典还有个小问题,是css相互覆盖,也理应要对每个tab使用不同class标志,不同词典对应的每条css前方添加限定selector,因为我们无法保证不同词典都不会使用相同的class。Mdict Editor Tool显然没有修改css。