aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/learn
diff options
context:
space:
mode:
authorneil_tsai <cdcd71517@gmail.com>2021-05-27 15:30:27 +0800
committerIrvin <irvinfly@gmail.com>2021-05-27 19:59:47 +0800
commitd1a568e3714fa1ac82c97bc71640a0442e02c94c (patch)
tree1bc2b9f1bb8fc0e250ea323ef01b7c3558a7bb90 /files/zh-tw/learn
parentcbb0c63deee564ae214a9f3ede965cf4404ab8d5 (diff)
downloadtranslated-content-d1a568e3714fa1ac82c97bc71640a0442e02c94c.tar.gz
translated-content-d1a568e3714fa1ac82c97bc71640a0442e02c94c.tar.bz2
translated-content-d1a568e3714fa1ac82c97bc71640a0442e02c94c.zip
Getting started with Svelte (zh-TW translation) (part of "Following this tutorial") with "Using the Svelte REPL" segment
Diffstat (limited to 'files/zh-tw/learn')
-rw-r--r--files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html36
1 files changed, 18 insertions, 18 deletions
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
index 73b552e046..b66c784a10 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
@@ -413,44 +413,44 @@ npm run dev</pre>
<p><strong>注意</strong>:假如你只是想要下載檔案而不是複製git儲存庫,你可以使用degit工具像是這樣——<code>npx degit opensas/mdn-svelte-tutorial</code>。你也可以用<code>npx degit opensas/mdn-svelte-tutorial/01-getting-started</code>來下載特定資料夾。Degit將不會建立本地git儲存庫,它將只下載特定資料夾下的檔案們。</p>
</div>
-<h3 id="Using_the_Svelte_REPL">Using the Svelte REPL</h3>
+<h3 id="Using_the_Svelte_REPL">使用Svelte REPL</h3>
-<p>A REPL (<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">read–eval–print loop</a>) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.</p>
+<p>REPL(<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">read–eval–print loop</a>)是一個互動式環境,允許你輸入一些指令並能立即看到結果——大部分的程式語言都有提供REPL。</p>
-<p>Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.</p>
+<p>Svelte的REPL功能卻不只如此。它是一個線上工具,允許你建構一個完整的應用程式並儲存它們於線上,也能分享給其他人。</p>
-<p>It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.</p>
+<p>它是最簡單可以在任何機器上開始體驗Svelte的方式,而不需要安裝任何東西。它也廣泛地被Svelte社群所使用。假如你想要分享一些想法、尋求幫助或回報問題,建立一個 REPL 來演示問題總是有幫助的。</p>
-<p>Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:</p>
+<p>讓我們快速看一下Svelte REPL和你應該怎麼去使用它。它看起來像:</p>
<p><img alt="the svelte repl in action, showing component code on the left, and output on the right" src="03-svelte-repl-in-action.png"></p>
-<p>To start a REPL, open your browser and navigate to <a href="https://svelte.dev/repl">https://svelte.dev/repl</a>.</p>
+<p>為了開始使用REPL,打開你的瀏覽器並至<a href="https://svelte.dev/repl">https://svelte.dev/repl</a>。</p>
<ul>
- <li>On the left side of the screen you'll see the code of your components, and on the right you'll see the running output of your app.</li>
- <li>The bar above the code lets you create <code>.svelte</code> and <code>.js</code> files and rearrange them. To create a file inside a folder just specify the complete pathname, like this — <code>components/MyComponent.svelte</code>. The folder will be automatically created.</li>
- <li>Above that bar you have the title of the REPL. Click on it to edit it.</li>
- <li>On the right side you have three tabs:
+ <li>螢幕左邊你將可以看到你元件們的程式碼,螢幕右邊你將可以看到你應用程式的執行輸出。</li>
+ <li>程式碼上方的列讓你可以建立<code>.svelte</code>和<code>.js</code>檔案,也能重新排列它們。為了將檔案建立在資料夾中,你只要輸入完整的路徑名稱——<code>components/MyComponent.svelte</code>。資料夾將自動地被建立。</li>
+ <li>更上方的列有你REPL的標題。點擊可以編輯它。</li>
+ <li>右邊有三個標籤:
<ul>
- <li>The <em>Result</em> tab shows your app output, and provides a console at the bottom.</li>
- <li>The <em>JS output</em> tab lets you inspect the JavaScript code generated by Svelte, and set compiler options.</li>
- <li>The <em>CSS output</em> tab shows the CSS generated by Svelte.</li>
+ <li><em>Result</em>標籤內會顯示你應用程式的輸出,底下也有提供控制台。</li>
+ <li><em>JS output</em>標籤內會讓你檢查被Svelte產生的JavaScript程式碼並可以設定編譯器選項。</li>
+ <li><em>CSS output</em>標籤內會顯示被Svelte產生的CSS。</li>
</ul>
</li>
- <li>Above the tabs, you'll find a toolbar that lets you enter full-screen mode, and download your app. If you login with a GitHub account, you'll also be able to fork and save the app. You'll also be able to see all your saved REPLs by clicking on your GitHub username profile and selecting Your saved apps.</li>
+ <li>這些標籤的上方,你將會找到一個工具列,讓你可以進入全螢幕模式和下載你的應用程式。假如你有登入GitHub帳號,你將能夠複製(fork)和儲存應用程式。透過點擊你GitHub的用戶概況並選取那些你已儲存的應用程式,將能夠看到所有你已儲存的REPLs。</li>
</ul>
-<p>Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app share the url. For example, here's the link for a REPL running our complete app: <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p>
+<p>每當你在REPL改變任何檔案,Svelte將會重新編譯應用程式並更新結果(Result)標籤。為了分享你的應用程式網址。舉個例子,這是運行我們完整應用程式的REPL連結:<a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>。</p>
<div class="notecard note">
-<p><strong>Note</strong>: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.</p>
+<p><strong>注意</strong>:可以注意一下在連結上怎麼標註Svelte的版本。當你在回報Svelte特定版本的問題時,這是很有幫助的。</p>
</div>
-<p>We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.</p>
+<p>我們將會在每一篇文章的開頭與結尾提供REPL,所以你就能立刻和我們一起撰寫程式碼。</p>
<div class="notecard note">
-<p><strong>Note</strong>: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example <code>import Todos from './components/Todos.svelte'</code>, just replace it with a flat URL, e.g. <code>import Todos from './Todos.svelte'</code>.</p>
+<p><strong>注意</strong>:不知何時REPL變得沒辦法適當地處理資料夾名稱。假如你是使用REPL來跟著教學系列,只需要將所有你的元件建立在根目錄即可。接著當你看到程式碼中的路徑時,舉例來說如果是<code>import Todos from './components/Todos.svelte'</code>,只需要將它換成類似如<code>import Todos from './Todos.svelte'</code>即可。</p>
</div>
<h2 id="The_code_so_far">The code so far</h2>