[1] 通过 article-style.css 调整发音库 Sound-En

deeke

  d, a# _  ?6 I
171010：使用外链图床，更换图例。增加内容：“修改 dsl 词典的发音按钮”。
7 Y( F1 v5 C+ x- m) a  f------------------------------------------

) \, I% [; _6 l- y  k0 m7 a4 |------------------------------------------
# [! U+ |$ y/ y) ]5 W% }' e感谢 Hugh 制作、分享的 英语发音库 ，这些年来一直在用。
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。
9 f' O/ V3 M) ], p6 s4 b
: v: k) @4 D9 r3 c- E: ?, C1. 在网上找两个图片表示英音、美音。
0 t: D7 O: q9 v; u- C改名为 snd_uk.png  、 snd_us.png ，放到 Sound-En.mdx 同一文件夹中。
我的屏幕小，所以用 64x64 的尺寸。
& }* X1 ~/ T2 ]1 W; Q+ [0 j' B

2. 在 GD 里找到 Sound-En 的词典编号。
鼠标右键“审查元素”，或直接按 F12 。每台电脑的词典编号并不相同。
3 u- z9 ~9 c; G- \. n8 D

1. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1

复制代码

& ]- [! M$ b, r# h
3 W6 g  @+ o9 O* U7 }3. 修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
调整各种 前后左右、高矮胖瘦。

1. /* Sound-En | Start */
   5 O# c' e. e+ t" b
2. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 { font-size: .875rem; }
   
3. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 b { margin-right: .5125rem; }
   0 H2 }) c; S1 [* l6 |
4. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 i { color: gray; }
     M! G; ?' a6 A  l$ C4 V
5. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src$="Sound.png"] { display: none; }
   
6. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src*="snd_u"] {
   
7.   position: relative;
   
8.   right: .275rem;
   
9.   bottom: .045rem;
   
10.   width: 1rem;
    
11.   height: 1rem;
    & M+ M- b8 W  Q: ]7 K
12. }
    
13. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a { text-decoration: none; outline: none; }
    & X- f' ?5 H! C8 D; `1 _$ m
14. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a::after {
    , y) [( w8 R% n7 {
15.   font-family: "Segoe UI Symbol";
    + E9 x; D. x4 s' C/ c, p
16.   font-size: 1rem;
    
17.   position: relative;
    
18.   top: .065rem;
    
19.   right: .2rem;
    ! ^! N4 _1 q2 \% ]7 _
20.   content: "\1F50A";
    
21.   vertical-align: baseline;
    5 G. l& P( u1 U; b6 [
22. }
    
23. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:link { color: black; }
    2 j) ?# V: l1 ~  _
24. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:visited { color: black; }
    
25. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:hover { color: purple; }
    
26. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:active { color: purple; }
    
27. /* Sound-En | End */

复制代码

------------------------------------------
修改 dsl 词典的发音按钮
% P* \0 r1 D- ]" X% B+ a. ~
修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ”。
* l) y& y2 O* u4 K; T0 d

1. .dsl_s_wav>a>img { display: none; }
   
2. .dsl_s_wav>a { text-decoration: none; outline: none; }
   ( @! t: L/ e. k& k- i, q
3. .dsl_s_wav>a::after {
   
4.   font-family: "Segoe UI Symbol";
   
5.   font-size: 1rem;
   8 ?$ w5 Z# m9 I6 _' q  _
6.   line-height: 0;
   
7.   position: relative;
   
8.   top: .065rem;
   
9.   content: "\1F50A";
   8 _7 \" v& j/ P
10.   vertical-align: baseline;
    
11. }
    - w7 v( a+ ~! m8 e8 v
12. .dsl_s_wav>a:link { color: black; }
    
13. .dsl_s_wav>a:visited { color: black; }
    
14. .dsl_s_wav>a:hover { color: purple; }
    
15. .dsl_s_wav>a:active { color: purple; }

复制代码

------------------------------------------
# @& x& ]. m2 p& J: {6 M
搞定收工，别忘了评分呦~~~

skydan05

谢谢deeke分享！