-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
382 lines (381 loc) · 23.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!doctype html>
<html lang="zh-yue-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>粵語拼音輸入法 Jyutping IME</title>
<meta
name="description"
content="粵語拼音輸入法，使用 rime-cantonese 詞庫，基於香港語言學學會粵語拼音方案（粵拼）。Windows, macOS, Linux, iOS, Android 全平台支援。粵拼打字係練習粵語發音嘅最佳方法，亦係輸入粵文最自然嘅方法。即刻下載試用啦！"
/>
<meta property="og:title" content="粵語拼音輸入法 Jyutping IME" />
<meta
property="og:description"
content="粵語拼音輸入法，使用 rime-cantonese 詞庫，基於香港語言學學會粵語拼音方案（粵拼）。Windows, macOS, Linux, iOS, Android 全平台支援。粵拼打字係練習粵語發音嘅最佳方法，亦係輸入粵文最自然嘅方法。即刻下載試用啦！"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://jyutping.net" />
<meta property="og:image" content="https://jyutping.net/assets/og-image.png" />
<meta name="twitter:title" content="粵語拼音輸入法 Jyutping IME" />
<meta
name="twitter:description"
content="粵語拼音輸入法，使用 rime-cantonese 詞庫，基於香港語言學學會粵語拼音方案（粵拼）。Windows, macOS, Linux, iOS, Android 全平台支援。粵拼打字係練習粵語發音嘅最佳方法，亦係輸入粵文最自然嘅方法。即刻下載試用啦！"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Can_CLID" />
<meta name="twitter:image" content="https://jyutping.net/assets/og-image.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E8N1DMVXRF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-E8N1DMVXRF");
</script>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&family=Palette+Mosaic&display=swap" rel="stylesheet" />
<script src="./src/index.ts" type="module"></script>
</head>
<body>
<div id="container">
<div id="background">
<img alt="粵語拼音輸入法" src="./assets/background.png" />
</div>
<div id="content">
<main>
<section id="hero">
<div id="foreground">
<div id="box">
<img alt="粵語拼音輸入法" src="./assets/demo.gif" />
<div>
<h1>粵拼打字 真係好易</h1>
<p>即裝即用粵語拼音輸入法，我手寫我口！</p>
<div class="btn-group">
<a id="btn-download-hero" class="btn btn-main border-0 border-r-2 border-blue-400"></a>
<a id="btn-more" href="#other" class="btn btn-main tooltip tooltip-bottom tooltip-primary" data-tip="其他平台">
<img alt="其他平台" src="./assets/chevron.svg" />
</a>
</div>
<div id="rime-outer">
<a id="btn-rime" href="#faq">我已經用緊 Rime</a>
</div>
</div>
</div>
</div>
</section>
<section id="secondary" class="text-base-content pt-96 md:pt-80 pb-72">
<div class="max-w-4xl py-12">
<h2 class="enter-lazy my-12">點解要用粵拼打字？</h2>
<p class="text-xl md:text-2xl leading-8 md:leading-10 mt-10">
每當你用粵拼打字，你嘅腦海入面就要出現一次粵語嘅標準發音然後輸出，透過呢個過程你就會不斷鍛鍊自己嘅粵語標準音。無論係母語者定係學習者，都可以透過拼音打字嚟練習自己嘅發音。
</p>
<p class="text-xl md:text-2xl leading-8 md:leading-10">我手寫我口，粵語人就用粵語拼音打字。</p>
</div>
</section>
<section class="bg-red-400 text-neutral-content pt-0 pb-24">
<div id="other">
<h2 class="enter-lazy">全平台支援</h2>
<p class="text-2xl whitespace-nowrap enter-lazy ![animation-delay:400ms]">包含粵語拼音嘅<wbr /> Rime 輸入法套件安裝檔</p>
<div id="platforms">
<a href="%VITE_DOWNLOAD_URL_WINDOWS%" class="![animation-delay:50ms]">
<div>
<img alt="Windows" src="./assets/windows.svg" />
<h4>Windows</h4>
<p>小狼毫 Weasel</p>
</div>
</a>
<a href="%VITE_DOWNLOAD_URL_MAC%" class="![animation-delay:200ms]">
<div>
<img alt="Mac" src="./assets/mac.svg" />
<h4>Mac</h4>
<p>鼠鬚管 Squirrel</p>
</div>
</a>
<a href="https://github.com/rime/rime-cantonese/wiki" class="![animation-delay:350ms]">
<div>
<img alt="Linux" src="./assets/linux.svg" />
<h4>Linux</h4>
<p>IBus</p>
</div>
</a>
<a href="https://jyutping.app/android/" class="![animation-delay:500ms]">
<div>
<img alt="Android" src="./assets/android.svg" />
<h4>Android</h4>
<p>粵拼輸入法</p>
</div>
</a>
<a href="https://apps.apple.com/us/app/cantoboard/id1556817074" class="![animation-delay:650ms]">
<div>
<img alt="iOS" src="./assets/ios.svg" />
<h4>iOS</h4>
<p>Cantoboard</p>
</div>
</a>
<a href="https://apps.apple.com/app/id1509367629" class="![animation-delay:800ms]">
<div>
<img alt="iOS" src="./assets/ios.svg" />
<h4>iOS</h4>
<p>粵拼輸入法</p>
</div>
</a>
<a href="https://my-rime.vercel.app/?schemaId=jyut6ping3&variantName=%E6%B8%AF" class="![animation-delay:950ms]">
<div>
<img alt="線上體驗" src="./assets/globe.svg" />
<h4>線上體驗</h4>
<p>My Rime</p>
</div>
</a>
</div>
</div>
</section>
<section id="learn-jyutping" class="text-base-content pt-24 pb-24">
<div class="max-w-4xl pb-6">
<h2 class="enter-lazy">我唔識粵拼噃，點學？</h2>
<p class="text-x md:text-2xl leading-8 md:leading-10 mt-10">粵拼好簡單，只要你識講粵語，就可以一個鐘以內學識。</p>
<p class="text-xl md:text-2xl leading-8 md:leading-10">
粵拼嘅方案總表同發音示範喺 <a href="https://jyutping.org/jyutping/">LSHK 粵拼方案</a>。文字版嘅教程可以睇<a href="https://jyutping.org/docs/cantonese/">識普拼，學粵拼</a
>。如果你鍾意睇片學，可以睇 <a href="https://youtu.be/MOsf0BcLzlc">52 分鐘學識 LSHK 粵拼</a>。
</p>
</div>
</section>
<section class="bg-amber-50 text-base-content">
<div id="faq" class="text-left">
<h2 class="enter-lazy">常見問題</h2>
<ol>
<li>
<h3>下載完之後要點安裝？裝完之後要做乜？</h3>
<div class="tabbed select-platform">
<input type="radio" name="faq1" id="faq1-windows" />
<input type="radio" name="faq1" id="faq1-mac" />
<input type="radio" name="faq1" id="faq1-linux" />
<input type="radio" name="faq1" id="faq1-android" />
<input type="radio" name="faq1" id="faq1-ios" />
<div class="tabs">
<label for="faq1-windows">Windows</label>
<label for="faq1-mac">Mac</label>
<label for="faq1-linux">Linux</label>
<label for="faq1-android">Android</label>
<label for="faq1-ios">iOS</label>
</div>
<div class="tab-content">
<div>
<!-- Windows -->
<p>執行安裝檔，根據指示安裝。安裝完之後撳 <kbd>Ctrl</kbd> + <kbd>`</kbd>（注意係數字 <kbd>1</kbd> 左邊嗰粒掣，唔係單引號！），就可以睇到「粵語拼音」嘞。</p>
</div>
<div>
<!-- Mac -->
<p>執行安裝檔，根據指示安裝。安裝完之後撳 <kbd>Ctrl</kbd> + <kbd>`</kbd>（注意係數字 <kbd>1</kbd> 左邊嗰粒掣，唔係單引號！），就可以睇到「粵語拼音」嘞。</p>
</div>
<div>
<!-- Linux -->
<p>執行安裝檔，根據指示安裝。</p>
</div>
<div>
<!-- Android -->
<p>安裝完「粵拼輸入法」App 之後，根據指示啓用粵拼鍵盤。</p>
</div>
<div>
<!-- iOS -->
<p>安裝完「Cantoboard」或者「粵拼輸入法」App 之後，去系統設置 → 鍵盤度啓用粵拼鍵盤。</p>
</div>
</div>
</div>
</li>
<li>
<h3>我本身已經用緊 Rime 喇噃，噉要點樣加粵語拼音落 Rime 度？</h3>
<div class="tabbed select-platform">
<input type="radio" name="faq2" id="faq2-windows" />
<input type="radio" name="faq2" id="faq2-mac" />
<input type="radio" name="faq2" id="faq2-linux" />
<input type="radio" name="faq2" id="faq2-android" />
<input type="radio" name="faq2" id="faq2-ios" />
<div class="tabs">
<label for="faq2-windows">Windows</label>
<label for="faq2-mac">Mac</label>
<label for="faq2-linux">Linux</label>
<label for="faq2-android">Android</label>
<label for="faq2-ios">iOS</label>
</div>
<div class="tab-content">
<div>
<!-- Windows -->
<h3>方法一</h3>
<p>直接執行上面嘅安裝檔重新安裝軟件，以更新<b>程式資料夾</b>入面嘅詞庫，前提係：</p>
<ol>
<li>從來冇執行過方法二或者方法三。因為方法二同三會將新詞庫放喺<b>用户資料夾</b>，呢個資料夾入面嘅檔案會優先於<b>程式資料夾</b>。</li>
<li>你冇人手改動過<b>程式資料夾</b>入面嘅檔案。<span class="text-red-500 font-bold">呢啲變更喺安裝嗰陣會被覆蓋。</span></li>
</ol>
<h3>方法二</h3>
<ol>
<li>用 <kbd class="windows-key"></kbd> + <kbd>Space</kbd> 切換去小狼毫輸入法。</li>
<li>喺螢幕右下角個「中」字上面撳<b>滑鼠右鍵</b>，揀 <var>輸入法設定</var>。</li>
<img alt="常見問題" src="./assets/faq2-windows1.png" />
<li>撳 <var>獲取更多輸入方案…</var>。</li>
<img alt="常見問題" src="./assets/faq2-windows2.png" />
<li>
然後喺彈出嚟個命令行界面，撳<b>滑鼠右鍵</b>貼上以下內容：
<pre><code>cantonese emoji-cantonese CanCLID/rime-loengfan lotem/rime-octagram-data lotem/rime-octagram-data@hant lotem/rime-octagram-data:customize:schema=jyut6ping3,model=hant</code></pre>
</li>
<li>閂咗「Rime package installer」個視窗佢，去返「方案選單設定」視窗勾選「粵語拼音」，然後撳 <var>中</var>。</li>
<li>跟住揀返自己鍾意嘅配色，再撳 <var>中</var> 嚟完成設定。</li>
<li>去返個「中」字上面撳<b>滑鼠右鍵</b>，揀 <var>重新部署</var>，等個程式處理詞庫資料。<span class="text-base inline-block -m-1.5">（需時約 20 秒，請耐心等待。）</span></li>
<li>跟住撳 <kbd>Ctrl</kbd> + <kbd>`</kbd>（注意係數字 <kbd>1</kbd> 左邊嗰粒掣，唔係單引號！），就可以睇到「粵語拼音」嘞。</li>
</ol>
<h3>方法三</h3>
<ol>
<li>喺螢幕左下角個 <var class="windows-key"></var> 掣上面撳<b>滑鼠右鍵</b>，揀 <var>Windows PowerShell</var>。</li>
<li>
然後喺彈出嚟個命令行界面，撳<b>滑鼠右鍵</b>貼上以下內容：
<pre><code>if (-not (Get-Command bash -ErrorAction SilentlyContinue)) { $gitBashPath = "C:\Program Files\Git\bin\bash.exe"; if (-not (Test-Path $gitBashPath)) { winget install --id Git.Git -e --source winget; } $bashCommand = $gitBashPath; } else { $bashCommand = "bash"; } & $bashCommand -c 'curl -fsSL https://git.io/rime-install | bash -s -- cantonese emoji-cantonese CanCLID/rime-loengfan custom:set:config=default,key=installed_from,value=rime-cantonese custom:clear_schema_list custom:add:schema=jyut6ping3 custom:add:schema=cangjie5 custom:add:schema=stroke custom:add:schema=luna_pinyin lotem/rime-octagram-data lotem/rime-octagram-data@hant lotem/rime-octagram-data:customize:schema=jyut6ping3,model=hant'</code></pre>
</li>
<li>撳 <kbd>Enter</kbd> 執行命令並等待。</li>
<li>其中佢可能會彈出叫你安裝 git，要撳 <var>允許</var>，冇 git 裝唔到 plum。</li>
<li>
喺螢幕右下角個「中」字上面撳<b>滑鼠右鍵</b>，揀 <var>重新部署</var>，等個程式處理詞庫資料。<span class="text-base inline-block -m-1.5">（需時約 20 秒，請耐心等待。）</span>
</li>
<li>跟住撳 <kbd>Ctrl</kbd> + <kbd>`</kbd>，就可以見到「粵語拼音」嘞。</li>
</ol>
</div>
<div>
<!-- Mac -->
<ol>
<li>
打開「終端機」（Terminal），撳 <kbd>⌘ Cmd</kbd> + <kbd>V</kbd> 貼上以下內容：
<pre><code>curl -fsSL https://git.io/rime-install | bash -s -- cantonese emoji-cantonese CanCLID/rime-loengfan custom:set:config=default,key=installed_from,value=rime-cantonese custom:clear_schema_list custom:add:schema=jyut6ping3 custom:add:schema=cangjie5 custom:add:schema=stroke custom:add:schema=luna_pinyin lotem/rime-octagram-data lotem/rime-octagram-data@hant lotem/rime-octagram-data:customize:schema=jyut6ping3,model=hant</code></pre>
</li>
<li>撳 <kbd>Enter</kbd> 執行命令並等待。</li>
<li>其中佢可能會彈出叫你安裝 git，要撳 <var>允許</var>，冇 git 裝唔到 plum。</li>
<li>打開螢幕右上角嘅輸入法選單，揀 <var>重新部署</var>，等個程式處理詞庫資料。<span class="text-base inline-block -m-1.5">（需時約 10 秒，請耐心等待。）</span></li>
<li>跟住撳 <kbd>Ctrl</kbd> + <kbd>`</kbd>，就可以見到「粵語拼音」嘞。</li>
</ol>
<p>
更多問題請參見 <a href="https://github.com/rime/rime-cantonese/wiki/macOS-%E9%80%B2%E9%9A%8E%E5%AE%89%E8%A3%9D%E6%95%99%E7%A8%8B">macOS 進階安裝教程</a>或者去
<a href="https://t.me/rime_cantonese">Telegram 羣組</a>諮詢。
</p>
</div>
<div>
<!-- Linux -->
<ol>
<li>
如果你已經用緊 ibus，可以直接打開「終端機」（Terminal）執行以下命令：
<pre><code>curl -fsSL https://git.io/rime-install | bash -s -- cantonese emoji-cantonese CanCLID/rime-loengfan custom:set:config=default,key=installed_from,value=rime-cantonese custom:clear_schema_list custom:add:schema=jyut6ping3 custom:add:schema=cangjie5 custom:add:schema=stroke custom:add:schema=luna_pinyin lotem/rime-octagram-data lotem/rime-octagram-data@hant lotem/rime-octagram-data:customize:schema=jyut6ping3,model=hant</code></pre>
</li>
<li>打開輸入法選單，揀 <var>重新部署</var>，等個程式處理詞庫資料。<span class="text-base inline-block -m-1.5">（需時約 10 秒，請耐心等待。）</span></li>
<li>跟住撳 <kbd>Ctrl</kbd> 同 <kbd>`</kbd>，就可以見到「粵語拼音」嘞。</li>
</ol>
<p>
更多問題請參見 <a href="https://github.com/rime/rime-cantonese/wiki/Ubuntu-Pop!_OS-%E5%AE%89%E8%A3%9D%E6%95%99%E7%A8%8B">Ubuntu Pop!_OS 安裝教程</a>、
<a href="https://github.com/rime/rime-cantonese/wiki/Arch-Linux-%E5%AE%89%E8%A3%9D%E6%95%99%E7%A8%8B">Arch Linux 安裝教程</a>或者去
<a href="https://t.me/rime_cantonese">Telegram 羣組</a>諮詢。
</p>
</div>
<div>
<!-- Android -->
<h3>同文 Trime</h3>
<p>想喺「Trime」用粵拼打字嘅朋友請去 <a href="https://t.me/rime_cantonese">Telegram 羣組</a>諮詢。</p>
</div>
<div>
<!-- iOS -->
<h3>iRime 輸入法</h3>
<p>去「iRime」嘅「語言列表」入面，揀「粵語拼音」就可以啓用粵拼。</p>
</div>
</div>
</div>
</li>
<li>
<h3>詞庫似乎好舊下，點更新個碼表？</h3>
<p>同上面加粵語拼音落 Rime 嘅步驟一模一樣。</p>
</li>
<li>
<h3>我裝咗都仲係唔用得，點算？</h3>
<p>無論遇到咩問題，都可以入我哋嘅 <a href="https://t.me/rime_cantonese">Telegram 羣組</a>揾大家幫手。</p>
</li>
<li>
<h3>有冇咩工具可以幫我查粵拼？</h3>
<p>
遇到唔識拼音嘅字可以去
<a href="https://jyut.net/">jyut.net</a>
度查，呢個係最權威嘅在線粵音字典。電腦版嘅 Rime 粵拼可以撳 <kbd>`</kbd> 或者 <kbd>v</kbd> 或者
<kbd>x</kbd> 嚟用普通話拼音、倉頡、筆畫反查。啱開始用粵拼打字嗰陣可能會唔熟手，唔使擔心，打得越多就會越熟練。只要打多幾次，粵拼就會變成你最自然嘅打字方法。
</p>
<p>如果仲有其他問題，都可以去 <a href="https://t.me/rime_cantonese">Telegram 羣組</a>入面揾大家解答。</p>
</li>
</ol>
</div>
</section>
<section class="bg-emerald-500 text-neutral-content">
<div>
<h2 class="enter-lazy">仲諗乜嘢？</h2>
<p class="enter-lazy ![animation-delay:350ms]">試下先啦！未試過又點會知呢？</p>
<a id="btn-download-final" class="btn-main mt-12"></a>
</div>
</section>
</main>
<footer>
<div>
<div id="columns">
<div>
<div>參考</div>
<a href="https://github.com/rime/rime-cantonese">rime-cantonese</a>
<a href="https://jyutping.org/">jyutping.org</a>
<a href="https://x.com/Can_CLID">X (Twitter) CanCLID 帳户</a>
<a href="https://t.me/rime_cantonese">Telegram 用户交流組</a>
</div>
<div>
<div>實用工具</div>
<a href="https://jyut.net/">粵音資料集叢</a>
<a href="https://words.hk/">粵典</a>
<a href="https://chrome.google.com/webstore/detail/inject-jyutping/lfgpgjkjglogbndlkikjgbbfoiofbdjp">注入粵拼 Chrome 擴展</a>
<a href="https://addons.mozilla.org/firefox/addon/inject-jyutping/">注入粵拼 Firefox 擴展</a>
</div>
<div>
<div>友情連結</div>
<a href="https://hambaanglaang.hk/">冚唪唥粵文</a>
<a href="https://resonate.hk/">迴響——粵語文學期刊</a>
<a href="https://shouji.sogou.com/interface/multilingual.php?language=3">搜狗粵拼輸入法</a>
<a href="https://typeduck.hk/">TypeDuck 粵拼輸入法</a>
</div>
</div>
<!-- Copyright Bar -->
<div id="copyright">
<div>
<div class="mt-2">
本站由<a href="https://github.com/CanCLID">粵語計算語言學基礎建設組</a>建成，遵循 CC BY 4.0 授權協議發佈，網站原始碼開放喺
<a href="https://github.com/CanCLID/jyutping.net">GitHub</a>，聯絡電郵：<a href="mailto:support@jyutping.org">support@jyutping.org</a>
</div>
<!-- Required Unicons (if you want) -->
<!--
<div class="md:flex-auto md:flex-row-reverse mt-2 flex-row flex">
<a href="#" class="w-6 mx-1">
<i class="uil uil-facebook-f"></i>
</a>
<a href="#" class="w-6 mx-1">
<i class="uil uil-twitter-alt"></i>
</a>
<a href="#" class="w-6 mx-1">
<i class="uil uil-youtube"></i>
</a>
<a href="#" class="w-6 mx-1">
<i class="uil uil-linkedin"></i>
</a>
<a href="#" class="w-6 mx-1">
<i class="uil uil-instagram"></i>
</a>
</div>
-->
</div>
</div>
</div>
</footer>
</div>
</div>
<div id="scroller">
<div id="scroll"></div>
</div>
</body>
</html>