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

deeke

% H( K4 P& I) L. @  b
9 @3 D" R. O: C171010：使用外链图床，更换图例。增加内容：“修改 dsl 词典的发音按钮”。
0 Y5 b" L+ f, m% |& ?4 r8 g; J------------------------------------------

" V7 r4 v5 d' Q9 x( _9 ]3 W1 `------------------------------------------
感谢 Hugh 制作、分享的 英语发音库 ，这些年来一直在用。
: F* K) z2 x( L* s. i- }. J我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

1. 在网上找两个图片表示英音、美音。
改名为 snd_uk.png  、 snd_us.png ，放到 Sound-En.mdx 同一文件夹中。
我的屏幕小，所以用 64x64 的尺寸。
; z: r/ v4 B/ Q# X3 Z
  [' ?; i, A1 G" y" m
2. 在 GD 里找到 Sound-En 的词典编号。
鼠标右键“审查元素”，或直接按 F12 。每台电脑的词典编号并不相同。
7 [# \! ?& j/ ^% A# J

1. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1

复制代码

3. 修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
+ N. N" F; a' q: e调整各种 前后左右、高矮胖瘦。
* O2 O, y) G, R

1. /* Sound-En | Start */
   . F6 q9 V. l! N; p3 M7 M
2. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 { font-size: .875rem; }
   5 i( p9 s# A: I  A6 x5 h
3. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 b { margin-right: .5125rem; }
   ! _, I' m1 X5 D+ X
4. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 i { color: gray; }
   
5. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src$="Sound.png"] { display: none; }
   5 G  K/ u6 c1 p: j+ o
6. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src*="snd_u"] {
   7 U; p% q. i+ {; `) r
7.   position: relative;
   5 U% I! g7 O1 k! g  t- {0 S( i
8.   right: .275rem;
   2 a2 g" S' x/ ?' d
9.   bottom: .045rem;
   2 Z. s! G" w1 v0 H$ ^
10.   width: 1rem;
    
11.   height: 1rem;
    
12. }
    
13. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a { text-decoration: none; outline: none; }
    
14. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a::after {
    
15.   font-family: "Segoe UI Symbol";
    & r, i0 {# `' V4 {3 P  n+ ^
16.   font-size: 1rem;
    
17.   position: relative;
    
18.   top: .065rem;
    7 C0 t8 y% L& S# ~
19.   right: .2rem;
    
20.   content: "\1F50A";
    
21.   vertical-align: baseline;
    
22. }
    5 E) M+ u4 |4 J. B) D
23. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:link { color: black; }
    
24. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:visited { color: black; }
    
25. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:hover { color: purple; }
    
26. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:active { color: purple; }
    3 `8 |# @0 A3 E- c
27. /* Sound-En | End */

复制代码

% d' X+ p: x8 Q1 c2 X2 W' A4 G7 g------------------------------------------
修改 dsl 词典的发音按钮
4 Z- s% e! T% z$ e" @- E
  u% _& t9 _* G) D# Q1 ?修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ”。
  G# w8 J# @2 `) f

1. .dsl_s_wav>a>img { display: none; }
   & J5 |4 Q0 {3 s! s' \
2. .dsl_s_wav>a { text-decoration: none; outline: none; }
   
3. .dsl_s_wav>a::after {
   . {4 M0 r8 q2 \" [8 C2 D9 a
4.   font-family: "Segoe UI Symbol";
   ( x0 x3 }; b6 K7 a1 L. K, W2 U0 W
5.   font-size: 1rem;
   
6.   line-height: 0;
   
7.   position: relative;
   
8.   top: .065rem;
     P: h9 q$ K; U" N* e5 X, C
9.   content: "\1F50A";
   
10.   vertical-align: baseline;
    
11. }
    8 P. j9 H9 y- `3 h7 S# x
12. .dsl_s_wav>a:link { color: black; }
    
13. .dsl_s_wav>a:visited { color: black; }
      G; \4 Q- O! i. _$ ?- {3 n
14. .dsl_s_wav>a:hover { color: purple; }
    ! m9 Q2 y# _. d7 \8 }+ v- t
15. .dsl_s_wav>a:active { color: purple; }

复制代码

------------------------------------------
0 ^  _% A9 C3 H5 Q
搞定收工，别忘了评分呦~~~

skydan05

谢谢deeke分享！