最近学习到的制作mdict词库时候的一些经验

阅读模式 · 发表于 2019-4-24 17:21:38

本帖最后由匿名于 2020-10-9 02:27 编辑

更新历史

2019.4.24 9:22 PM添加新内容

2019.4.24 5:21 PM
开始写此文，尚未完成先保存一下

前言

大家好啊！

最近我自己制作了Macmillan在线词典，也修改了其他几个词典，都已经发出来了。大家也给了很多反馈，绝大多数的问题我也都修复了。这个过程中确实学习到了很多东西，有技术方面的，当然也有和mdict词库紧密相关的。这个帖子就是想分享一下我在制作mdict词库方面的经验，和大家讨论一下。下面的内容仅仅代表我（ogrishman）的一家之言，具体说的对不对，我们一起讨论讨论。然后我们一起完善这个帖子，并且宣传这个帖子，这样大家制作词库的时候都follow best practice，词库的质量一定会得到提高，而且问题还会少很多。下面我就一条一条列出我要说的这些best practices。

正文

词库相关文件的命名要一致，并且清晰全面" [: p* u% O0 V' K# a+ ~

比如我们要制作一个Oxford Advanced Learner's Dictionary第九版的词库，那么相关的文件名可以命名为：

Oxford Advanced Learner's Dictionary 9th.mdx) w+ L4 @2 _/ n# Y
Oxford Advanced Learner's Dictionary 9th.mdd) d4 d5 }$ G2 ]5 X
Oxford Advanced Learner's Dictionary 9th.1.mdd0 I ~( F. _3 C% C
Oxford Advanced Learner's Dictionary 9th.js- O4 \3 h' R0 {% T& y
Oxford Advanced Learner's Dictionary 9th.css

我们要考虑到，某些情况下我们可能必须把很多词库的文件放到一个文件夹里，这时遵守这一点的优点就突显出来了，用户可以一眼看出哪些文件属于哪个词典，而且文件排序一般也会把这些相关文件排在一起。这里要注意，不要用缩写，比如OALD9.mdx，这样不够清晰！

每个词典都要提供外置的js文件和css文件供有能力的用户深度定制词典
& [5 e, c7 R4 j% H

每个词典最好都有外置的js文件和css文件。css文件基本上现在所有词典都会有，但是我建议，即使你的词库没有用到js，也在你的词条里加入一个外置js文件，这样可以给用户留下自己扩展的空间。

你的词库中的一个词条只是整个网页中的一部分，深入理解这一点，并且牢牢记住
3 C$ y% \( v5 j) x" d- E* `

现在主流的词典软件（欧路词典、GoldenDict）在渲染一个单词时候都是用网页的形式。现在基本上所有用户都会安装多于一本的词典，这些不同的词典中的相同的词条凑成了一个网页，也就是您看到的结果。比如下图是我在Windows上的欧路词典查询frequency后的结果，其中部分词典的结果被我折叠起来了，其中每个红色方框表示一个词典的结果：

这里要理解的是，这里每个红色方框不是单独的一个网页，而是整个网页的一部分！理解这一点非常重要，不然你制作的词典可能会有各种各样的问题，比如影响了其他词典的正常显示，或者被其他词典的CSS或者JS所影响。具体在应用中怎样实践对这一点的理解，请继续看下面的内容。

mdx源文件中，每个词条要用单独的一个<div>标签包含起来. e6 S; v6 K# Y0 Z

比如在mdx源文件中，有一个词条：

这样写非常不好！我们已经说过，您的词典中的一个词条只是最终整个查询结果网页的一部分。现在您的这个词条虽然有一些div标签有class属性，可以用来添加CSS，但是如果其他的某个词典里面也有<div class="pf">，那么您针对您的词典制作的CSS就会影响其他词典。正确的做法是，把整个词条的所有内容包含在一个div标签内，并且给这个div标签一个很独特，针对您当前制作词典的一个id或者class属性。比如我们可以修改上面的例子，如下：

这个示例中，我们用了<div id="tldimproved">来包住了您的词条的所有内容，这样，在CSS和JS中您可以仅仅针对您的词典内容进行样式的设置，而不会影响其他词典。那具体该怎样设置CSS和JS呢？请继续看。

正确使用CSS，仅仅对您自己的词条设置样式
* l! ~: x5 w' g1 X4 E

上面我说了，最终查询结果的网页中，您的词条内容仅仅是其中的一部分，所以您设置CSS时候必须只针对您自己的词典，这样才不会影响其他词典的显示。有了上一条的包含住整个词条的div标签，这个任务就很好完成了。

比如假设您的词条中有一段内容：

<div class="gdc">
      <div class="dcb">
         <span class="pos">n.</span>
         <span class="dcn">(提供各种生活和服务设施的)汽车宿营地</span>
      </div>
</div>

要对这个class="gdc"的div标签设置CSS，你可能会写：

.gdc {...}

或者

div.gdc {...}

这两种写法都不好！因为我们已经有了<div id="tldimproved">包含住整个词条的内容，那么正确的写法是：

div#tldimproved .gdc {...}
或者
div#tldimproved div.gdc {...}
或者
div#tldimproved > .gdc {...}
或者
div#tldimproved > div.gdc {...}

这样写的效果是，您指定的CSS只会对<div id="tldimproved">里面的那个css等于gdc的标签生效，而其他词典不可能有一个div叫做tldimproved的，这样也就避免了CSS的冲突。

正确使用JS，仅仅对您自己的词条内容进行修改$ y& W& m& k6 R j& O }8 u

上面我说了，最终查询结果的网页中，您的词条内容仅仅是其中的一部分，所以您编写JS的时候必须只针对您自己的词条，这样才不会影响其他词典的显示。有了包含住整个词条的div标签，这个任务就很好完成了。
通常在JS中，您最终的目标是动态地修改您的词条，不管是修改内容还是修改CSS，反正目标就是修改。修改的第一步是获取要修改的对象，获取的对象如果错了，那么您做的修改可能就应用到了不正确的地方。比如您想给您的词条中的图片加一个三个像素的边框，如果您使用JS不当，那最终结果可能是您修改了所有词典中的图片，都加上了边框。那么怎样正确地获得你要修改的对象呢？我们还以上面的示例代码为例：

<div class="gdc">
      <div class="dcb">
         <span class="pos">n.</span>
         <span class="dcn">(提供各种生活和服务设施的)汽车宿营地</span>
      </div>
</div>

正确的方法是：

如果您使用jQuery：
$("div#tldimproved div#gdc")
或者
$("div#tldimproved > div#gdc")
或者
$("div#tldimproved #gdc")
或者
$("div#tldimproved > #gdc")

如果您使用的是vanilla JavaScript，那么正确的方法是：
document.getElementById("tldimproved ").getElementById("...")
或者
document.getElementsByTagName("body")[0].getElementById("tldimproved").getElementById("...")
或者
document.querySelector("div#tldimproved")....
或者
document.querySelectorAll("body")[0].querySelector("div#tldimproved")....
等等，因为vanilla JS写起来比较复杂，我仅仅列出了几个常用的函数，大家应该领会我的意思了，就是你不管干嘛，总要表明“我想要获取的是id等于tldimproved下面的内容”，这个思想和上面的关于CSS的写法是完全一样的，目标只有一个，就是您只是修改您自己的内容，而不会影响其他词典！

正确使用CSS reset framework ]0 w. x5 M0 ]$ H% d8 R% X4 P% t

现在有很多CSS reset framework，有些人在自己的mdict词库中使用，上来就是：
* {
  box-sizing: border-box;
}
::before,
::after {
  box-sizing: inherit;
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
body {
  margin: 0;
}
main {
  display: block;
}

这么做不合适！如果你理解我上面反复强调的内容，你的词条只是最终查询结果网页中的一部分，那么相信你能理解为什么这么做不合适。你的词库只应该设置你自己词条的样式，而上面的CSS修改的所有词条的设置，尤其是box-sizing，这会导致其他大量词典显示不正常。正确的方式是，仅仅修改你自己词典的样式！所以，你可以写成比如像下面这样：

div#tldimproved * {
box-sizing: border-box;
}
div#tldimproved ::before,
div#tldimproved ::after {
box-sizing: inherit;
}
div#tldimproved main {
display: block;
}

大家理解我的意思了吧，牢记一点，只修改自己词典的内容，不要影响到其他词典！

Gyngreenlie · 发表于 2019-4-24 20:25:05

经验好贴，先收藏起来。赞。

cocowind · 发表于 2019-4-24 18:44:09

本帖最后由 cocowind 于 2019-4-24 18:45 编辑

赞成总结一下制作词库应follow的 best practices。

正如楼主所说的，手机上可能必须把很多词库的文件放到一个文件夹里，因此命名不能过于简单，否则可能因名称重复而导致js/css互相干扰。
另外，鉴于有The little dict这样的发音词典大全集，所有词典的音频文件都应放在“词典名字.1.mdd”里，用户可根据需要选择是否下载以避免臃肿。同时，css中设置自适应代码，当文件夹中没有“词典名字.1.mdd”时隐去发音图标。
还有，双解词典应该有中文翻译内容的隐藏功能，要有标注以便可通过js来实现。

zzzz_sleep · 发表于 2019-4-24 20:21:05

cocowind 发表于 2019-4-24 18:44
7 R5 M0 j5 g' N2 C" e赞成总结一下制作词库应follow的 best practices。
" D+ t! B l7 _0 ~
) J( B1 y! ?& P, i2 A7 a8 U正如楼主所说的，手机上可能必须把很多词库的文件放到 ...

在手机必须把很多词库的文件放到同一个文件夹里，这个到没想过。

zzzz_sleep · 发表于 2019-4-25 06:01:26

经验虽好，但是不可能实行。

现在好多词典基本的 html / css 规范都不能保证，如何保证你这些额外要求。

ogrishman · 发表于 2019-4-25 12:31:22

zzzz_sleep 发表于 2019-4-25 06:01
- i& C6 g5 B/ L/ u, B+ p经验虽好，但是不可能实行。" Q g! ~# }9 b h' {4 ?7 m8 p
5 J: h/ j9 {: [
现在好多词典基本的 html / css 规范都不能保证，如何保证你这些额外要求。

您说的很对，昨天看了一下朗文五加加，标签都没有闭合。这个只能自己修改了，或者自己做词库的时候遵守这些。

tarzan1200 · 发表于 2019-6-7 00:40:30

thanks alot

cocowind · 发表于 2019-12-20 13:44:17

正确的做法是，把整个词条的所有内容包含在一个div标签内，并且给这个div标签一个很独特，针对您当前制作词典的一个id或者class属性。
-------
学了点HTML/css的皮毛，回头看这个贴，觉得楼主说的这一点确实不错。
很多mdx/css没有做到这一点，好在GoldenDict自动把各个词典查询结果分别包含在一个div标签内，不然真的很容易乱套。

Wallacebai · 发表于 2020-3-9 08:35:42

学习了，收藏。

leonlai2000 · 发表于 2021-7-26 13:35:13

请问一下，我想把一万多个单词的mp3音频制作成一个mdd格式的发音库，该怎么弄？

		自动登录	找回密码
密码			免费注册

[教程] 最近学习到的制作mdict词库时候的一些经验

本帖子中包含更多资源

评分

本帖被以下淘专辑推荐: