|
匿名
发表于 2019-4-24 17:21:38
|阅读模式
本帖最后由 匿名 于 2020-10-9 02:27 编辑 4 E8 M/ H. s0 t
& |6 o/ l; v* d% K: E5 Q- C. {
; [' Y0 ?1 t& k更新历史! Y8 e, P5 L* v1 R' ] B* x
v' d7 I* Q$ {$ y+ | ?2019.4.24 9:22 PM添加新内容, m! P& j& h5 G* _
6 _+ B9 `$ {$ N; s
2019.4.24 5:21 PM
5 N! R( ^4 k) b( Y9 Y开始写此文,尚未完成先保存一下2 q) n9 |" p4 w6 k& @/ ?
: M4 p7 h5 [: B$ E6 H: g4 V1 u, D8 |+ R4 X$ }' a
前言( J! X7 \2 c3 R7 Q' J2 D9 ^
. ?6 u& J$ b- L大家好啊!
# V- i3 M- s) j& O& [% G) s7 |* l4 T
0 G4 H# i8 h; z7 C9 \. l+ c最近我自己制作了Macmillan在线词典,也修改了其他几个词典,都已经发出来了。大家也给了很多反馈,绝大多数的问题我也都修复了。这个过程中确实学习到了很多东西,有技术方面的,当然也有和mdict词库紧密相关的。这个帖子就是想分享一下我在制作mdict词库方面的经验,和大家讨论一下。下面的内容仅仅代表我(ogrishman)的一家之言,具体说的对不对,我们一起讨论讨论。然后我们一起完善这个帖子,并且宣传这个帖子,这样大家制作词库的时候都follow best practice,词库的质量一定会得到提高,而且问题还会少很多。下面我就一条一条列出我要说的这些best practices。
" J% L+ |7 X4 m0 [; D) I+ W# y. L% Z& S, a9 S5 d; m, T- K! r, w
' V. k1 j. s, Q: T3 C
, s9 A1 J) a3 X" C
正文
6 o, h$ w: N! n* D6 A2 c5 z- t4 \) @" c7 ? h& n. H- I+ W
- 词库相关文件的命名要一致,并且清晰全面0 l" y" R# J, l+ l' _2 h
比如我们要制作一个Oxford Advanced Learner's Dictionary第九版的词库,那么相关的文件名可以命名为:1 {% Q( L7 Y+ F$ t5 d- T6 v
/ t& Z8 @" _. C9 c9 S! b+ T% j* ?" vOxford Advanced Learner's Dictionary 9th.mdx
, w; O, N" j9 Z9 q) R5 cOxford Advanced Learner's Dictionary 9th.mdd
! ?3 z1 U1 l* n/ B8 a5 R* gOxford Advanced Learner's Dictionary 9th.1.mdd
( ^! h6 l) u2 _* X- L, FOxford Advanced Learner's Dictionary 9th.js0 w% |4 ?4 A( H& R7 Y
Oxford Advanced Learner's Dictionary 9th.css
3 O5 Y) ]. R5 k1 A% f我们要考虑到,某些情况下我们可能必须把很多词库的文件放到一个文件夹里,这时遵守这一点的优点就突显出来了,用户可以一眼看出哪些文件属于哪个词典,而且文件排序一般也会把这些相关文件排在一起。这里要注意,不要用缩写,比如OALD9.mdx,这样不够清晰!
+ c$ ?4 A% c. X; L' r# [6 P6 [, d9 @2 v5 T5 @0 ]# ]7 X. K
& M, t v$ y# G( e- 每个词典都要提供外置的js文件和css文件供有能力的用户深度定制词典
0 n9 X5 d$ m2 s; G" l6 m 每个词典最好都有外置的js文件和css文件。css文件基本上现在所有词典都会有,但是我建议,即使你的词库没有用到js,也在你的词条里加入一个外置js文件,这样可以给用户留下自己扩展的空间。; a+ ?1 m" v& S3 c1 B" l) P
i5 \# {+ d$ C8 h& B5 g
- 你的词库中的一个词条只是整个网页中的一部分,深入理解这一点,并且牢牢记住/ k3 s9 m" k' X7 W- V- ?
现在主流的词典软件(欧路词典、GoldenDict)在渲染一个单词时候都是用网页的形式。现在基本上所有用户都会安装多于一本的词典,这些不同的词典中的相同的词条凑成了一个网页,也就是您看到的结果。比如下图是我在Windows上的欧路词典查询frequency后的结果,其中部分词典的结果被我折叠起来了,其中每个红色方框表示一个词典的结果:
! h) z: o, ^* K( Z4 t
; U9 E4 T! Z$ o$ m7 q2 k& O l [/ m* H" m2 v
; O0 n) i$ e! M" I1 t, w/ y+ q: W0 r这里要理解的是,这里每个红色方框不是单独的一个网页,而是整个网页的一部分!理解这一点非常重要,不然你制作的词典可能会有各种各样的问题,比如影响了其他词典的正常显示,或者被其他词典的CSS或者JS所影响。具体在应用中怎样实践对这一点的理解,请继续看下面的内容。) S3 \2 h3 F: N ^
E. }9 W: l3 s/ O, Y: J0 I& Y7 o1 N! V& |* a7 c% A* C7 W
- mdx源文件中,每个词条要用单独的一个<div>标签包含起来
0 c0 N6 D2 f& ?9 L0 P 比如在mdx源文件中,有一个词条:
; d) e, e% N' I* D
& Q7 M# }, y% f3 @
, Q5 Y" {. M7 u2 A' [; u这样写非常不好!我们已经说过,您的词典中的一个词条只是最终整个查询结果网页的一部分。现在您的这个词条虽然有一些div标签有class属性,可以用来添加CSS,但是如果其他的某个词典里面也有<div class="pf">,那么您针对您的词典制作的CSS就会影响其他词典。正确的做法是,把整个词条的所有内容包含在一个div标签内,并且给这个div标签一个很独特,针对您当前制作词典的一个id或者class属性。比如我们可以修改上面的例子,如下:2 ~& s: l/ h7 E; [$ P* n @, ]
! p% d& G, y$ w. h5 e6 a4 U
# X k/ a0 t, G* w6 X0 ]
) o! i( K6 p+ d. q7 r: D这个示例中,我们用了<div id="tldimproved">来包住了您的词条的所有内容,这样,在CSS和JS中您可以仅仅针对您的词典内容进行样式的设置,而不会影响其他词典。那具体该怎样设置CSS和JS呢?请继续看。
2 i$ q+ p$ M* ^2 y" ~
$ O& x' C$ @( W3 x) J! ?$ j6 O E# Z2 A
- 正确使用CSS,仅仅对您自己的词条设置样式5 c4 `# J9 O. R1 `
上面我说了,最终查询结果的网页中,您的词条内容仅仅是其中的一部分,所以您设置CSS时候必须只针对您自己的词典,这样才不会影响其他词典的显示。有了上一条的包含住整个词条的div标签,这个任务就很好完成了。
+ @/ F' F1 C: N6 X" x0 V0 I/ k
' `0 v$ g2 Y, W3 i! y( j比如假设您的词条中有一段内容:
) ?- o0 z( a0 t" `; W. J# d3 e# l0 t9 m; E2 O# n
<div class="gdc">
+ S+ J4 k6 x9 n& b9 @4 O+ {# J <div class="dcb">" t" f3 U2 S6 F3 L; }9 w' G
<span class="pos">n.</span>
/ S& ]% K( r2 ]( l P4 w2 C <span class="dcn">(提供各种生活和服务设施的)汽车宿营地</span> J& F- d1 T5 a+ F9 {9 w
</div>! X: _% A& M& C2 b5 m9 v
</div>6 Y( ?+ U6 `. T( M
$ {! e5 }! e3 W' }% t- o& b" l2 t# W
0 v; l Q5 t9 p+ r$ k* n; N
要对这个class="gdc"的div标签设置CSS,你可能会写: \( c# H/ y [6 Z) v+ I
9 @9 [$ N9 C4 k* Y J.gdc {...}1 |5 A6 T% p$ x- W' d
+ I+ K( \2 W9 t7 q" ?0 ^或者9 x) G6 {+ U# ^" U; ]5 B
# R& D+ D. `, j* C L; {, Hdiv.gdc {...}0 V& y' A/ d3 |; i
5 y7 w3 `0 g% U) q/ a+ l# w
这两种写法都不好!因为我们已经有了<div id="tldimproved">包含住整个词条的内容,那么正确的写法是:% p3 s( x# }! z) z" n3 ~) z6 U. D1 W
7 D) z3 N$ I$ \) f6 w; n8 Kdiv#tldimproved .gdc {...}7 {# _: \3 r7 x$ h- I/ P8 F3 X9 a
或者
; n) f! r$ W5 s! ndiv#tldimproved div.gdc {...}# e6 k2 g* `; R$ C ?: W
或者% S7 s5 B7 u; z8 k) p1 {6 V
div#tldimproved > .gdc {...}
' k2 f& B* a% [- B S/ w8 O: a或者5 S9 ~+ ^9 K: t3 |3 w$ ]
div#tldimproved > div.gdc {...}
9 [1 }5 c- d, z/ y6 ]/ W) W H. ]
这样写的效果是,您指定的CSS只会对<div id="tldimproved">里面的那个css等于gdc的标签生效,而其他词典不可能有一个div叫做tldimproved的,这样也就避免了CSS的冲突。
0 J7 F# E9 l' N$ Y2 _+ h" e I0 \" ]* F7 e: L+ J" a( {
+ Y/ \- k( E2 w: N# w
- 正确使用JS,仅仅对您自己的词条内容进行修改8 A0 q6 Y$ `% m% G/ C1 ^% P; @
上面我说了,最终查询结果的网页中,您的词条内容仅仅是其中的一部分,所以您编写JS的时候必须只针对您自己的词条,这样才不会影响其他词典的显示。有了包含住整个词条的div标签,这个任务就很好完成了。
- Q. w) d" ]) G' I" @通常在JS中,您最终的目标是动态地修改您的词条,不管是修改内容还是修改CSS,反正目标就是修改。修改的第一步是获取要修改的对象,获取的对象如果错了,那么您做的修改可能就应用到了不正确的地方。比如您想给您的词条中的图片加一个三个像素的边框,如果您使用JS不当,那最终结果可能是您修改了所有词典中的图片,都加上了边框。那么怎样正确地获得你要修改的对象呢?我们还以上面的示例代码为例:5 W& _% m/ i4 o# z4 Q: I6 m
9 \' s- ^0 y9 J) `# S<div class="gdc">
- c ~+ a5 D5 x( f$ i U9 }9 x <div class="dcb">
# H; x, g2 M2 z7 s <span class="pos">n.</span>
% A# ^1 r, [: X" L, F/ F+ H6 ]% n+ _' n <span class="dcn">(提供各种生活和服务设施的)汽车宿营地</span>( J8 H: m- T G) u7 [) g
</div>$ H/ A/ R# c% `: \
</div>
0 s9 R& G# x5 W, Y; \; E2 t3 o. F, X& J
正确的方法是:
) }" u+ J7 q0 R/ J6 @0 r! a; a- h& b5 x2 |6 o
如果您使用jQuery:! ]# {2 T. t: V, A6 D, o
$("div#tldimproved div#gdc")
6 `1 \3 D: p7 }* f2 r% l+ J5 _或者; e8 Q: ~ Z# H( X- ]2 g; R
$("div#tldimproved > div#gdc"); u# H% ^4 [% _1 e
或者& {5 ?. C2 N8 }0 `- `. @$ \+ D
$("div#tldimproved #gdc")* O' A- J5 r- l
或者
# w- A! ]5 {, ` N# a' n9 [$("div#tldimproved > #gdc")3 l& v2 K" s# h8 `
. n0 Y2 @$ G) A1 d7 f" j! f
+ I y8 {' s5 K6 x; K' {7 v如果您使用的是vanilla JavaScript,那么正确的方法是:1 L' X" [1 [% a+ s
document.getElementById("tldimproved ").getElementById("...")7 n/ O# k# F7 v- K- g9 [
或者1 b% t/ W" _4 J* ], v' L7 ?& R
document.getElementsByTagName("body")[0].getElementById("tldimproved").getElementById("...")
3 s$ d! `( V6 C+ \$ T或者
- N) D$ u2 }) Udocument.querySelector("div#tldimproved")...." B0 x, b1 C1 |$ ^
或者- J% C" S2 H/ B* m
document.querySelectorAll("body")[0].querySelector("div#tldimproved")....
4 X' L+ s( I7 I y5 g6 L' n+ |等等,因为vanilla JS写起来比较复杂,我仅仅列出了几个常用的函数,大家应该领会我的意思了,就是你不管干嘛,总要表明“我想要获取的是id等于tldimproved下面的内容”,这个思想和上面的关于CSS的写法是完全一样的,目标只有一个,就是您只是修改您自己的内容,而不会影响其他词典!
5 C, `/ L1 u4 D4 d% L6 ]
; H$ ~; R+ {4 K9 W7 W+ w" i- 正确使用CSS reset framework
' H3 z3 K4 i* t. h% r5 z" O 现在有很多CSS reset framework,有些人在自己的mdict词库中使用,上来就是:( ?3 f |! o6 I9 p( ?3 M
* {
" p) g& b, k( D! |. o% o) a+ k" X box-sizing: border-box;
1 B, j4 g+ N0 x" @% h# I" k, M}' I$ y! ^0 @, x! j+ X2 _
::before,
7 }$ q. K# g( G5 @" z) _::after {4 V0 h2 _/ l' s) |& e0 A: D
box-sizing: inherit;1 X2 t" k8 q8 R. j+ n: Q) p3 f% X
}
$ _! j! E: j9 v" E/ t0 ehtml {# R; u) d5 w3 f" h
line-height: 1.15; /* 1 */5 t6 R+ ` h; h8 M2 q3 [
-webkit-text-size-adjust: 100%; /* 2 */& L! o: z" _4 _* f3 f9 P' b
-webkit-tap-highlight-color: transparent; /* 3*/
2 |4 o9 j* q3 Z- Q0 b2 b9 ]}& A6 G6 p) x9 S
body {2 _. N0 P# w9 {1 G
margin: 0;% I9 U0 R( R3 E6 O
}
0 G* n' g& h' n/ d1 f' Pmain {6 j3 G0 Y4 v7 H: A
display: block;
+ S9 v3 i6 m3 b* ~: t d: {1 e}: p, i7 T: ?) \3 y
5 P/ f" }0 {- R- c+ {0 b2 O+ d2 M' a" L3 [) @1 ~* Y3 t$ P
这么做不合适!如果你理解我上面反复强调的内容,你的词条只是最终查询结果网页中的一部分,那么相信你能理解为什么这么做不合适。你的词库只应该设置你自己词条的样式,而上面的CSS修改的所有词条的设置,尤其是box-sizing,这会导致其他大量词典显示不正常。正确的方式是,仅仅修改你自己词典的样式!所以,你可以写成比如像下面这样:! }* j% M A1 W' @: G) A, u
" m% k: Y2 W5 @7 K- zdiv#tldimproved * {8 c/ u0 e* n& q( X
box-sizing: border-box;4 b+ r8 B. r- C. K4 [( W# {
}, G/ y* g( b, t- z) N: R3 M
div#tldimproved ::before,
" J/ a* O0 Z( [" X |6 \! P4 Jdiv#tldimproved ::after {
$ i6 k; V2 I, x% @0 [* N! T4 X6 [4 _ box-sizing: inherit;
& _3 w% W" s5 _) n9 n6 F% J/ c* g}
9 _" }4 S2 e7 G! Ydiv#tldimproved main {
: y# R- }% s$ @3 ^ display: block;
+ b. F8 o: L, w4 r( x6 x+ n+ H}
; l" C# U' E0 j
' Z) V/ y" y" h' j' Y) X
, B- c% ?2 A/ |$ ^2 c- L8 f大家理解我的意思了吧,牢记一点,只修改自己词典的内容,不要影响到其他词典!
p. Q' j; A3 ~" b; o
! u' r2 ~# O0 Z. A |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
评分
-
2
查看全部评分
-
本帖被以下淘专辑推荐:
- · 词典制作|主题: 217, 订阅: 40
- · 词典制作|主题: 111, 订阅: 24
- · 排版|主题: 62, 订阅: 5
- · MDX制作|主题: 1, 订阅: 0
|