最近学习到的制作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。

正文

词库相关文件的命名要一致，并且清晰全面
G0 l: d! J5 Q0 o8 T0 I3 o# M. M

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

Oxford Advanced Learner's Dictionary 9th.mdx
* O% j6 G+ u# W& w5 i4 K vOxford Advanced Learner's Dictionary 9th.mdd, m# H- Q9 h& s! B; x. h
Oxford Advanced Learner's Dictionary 9th.1.mdd$ u6 g8 y6 K, S) p3 \ x$ Z. ?7 W
Oxford Advanced Learner's Dictionary 9th.js: F3 D6 }# Q% ]
Oxford Advanced Learner's Dictionary 9th.css

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

每个词典都要提供外置的js文件和css文件供有能力的用户深度定制词典9 T- j: ^' O" u: t

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

你的词库中的一个词条只是整个网页中的一部分，深入理解这一点，并且牢牢记住3 {" C- U# B& F

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

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

mdx源文件中，每个词条要用单独的一个<div>标签包含起来1 s. ?) g5 i- y" {$ k

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

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

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

正确使用CSS，仅仅对您自己的词条设置样式7 p" T1 c+ {) g! G& F

上面我说了，最终查询结果的网页中，您的词条内容仅仅是其中的一部分，所以您设置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，仅仅对您自己的词条内容进行修改
- r* m' b% S+ v& b0 S' I

上面我说了，最终查询结果的网页中，您的词条内容仅仅是其中的一部分，所以您编写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+ g) O ~" O0 T. U

现在有很多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:441 h6 a* s. i6 {: K, b, g& r: Q0 X
赞成总结一下制作词库应follow的 best practices。( z: Y5 O: B9 }4 l; r8 u9 V2 r
5 V( m% r. B. V) a
正如楼主所说的，手机上可能必须把很多词库的文件放到 ...

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

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

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

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

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

zzzz_sleep 发表于 2019-4-25 06:012 I- W" x0 b) q' j5 w+ I
经验虽好，但是不可能实行。1 ~. b1 U3 v8 ~8 ^* ?6 E( z7 E

" ]) ~ F/ h8 w# o5 h Z N: K, w现在好多词典基本的 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词库时候的一些经验

本帖子中包含更多资源

评分

本帖被以下淘专辑推荐: