Update Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning, zh-TW (#2587)

* Partly translate svelte_todo_list_beginning "Svelte accessibility support" section

* Partly translate svelte_todo_list_beginning "Styling our markup" section

* Partly translate svelte_todo_list_beginning "The code so far" section

* Partly translate svelte_todo_list_beginning "Summary" section

* 調整部分語意

* 再稍微修飾語意

1 files changed, 29 insertions, 29 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html
index 6c844262f7..a36bc94a12 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html
@@ -21,9 +21,9 @@ tags:
 <div>{{LearnSidebar}}<br>
 {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
 
-<p class="summary">現在我們已經對Svelte運作機制有初步的了解後，就能開始建構我們的範例應用程式：一個待辦清單。此篇文章中，我們會先確認應用程式所需的功能有哪些，接著我們會建立<code>Todos.svelte</code>元件並寫一些靜態標記（markup）和樣式，待一切準備就緒後，就能開始開發我們待辦清單應用程式的相關功能，隨著後續文章會逐漸充實它。</p>
+<p class="summary">現在我們已經對Svelte運作機制有初步的了解後，就能開始建構我們的範例應用程式：一個待辦清單。此篇文章中，我們會先確認應用程式所需的功能有哪些，接著我們會建立<code>Todos.svelte</code>元件並寫一些靜態標記（markup）語言和樣式，待一切準備就緒後，就能開始開發我們待辦清單應用程式的相關功能，隨著後續文章會逐漸充實它。</p>
 
-<p class="summary">我們想要讓使用者們能夠瀏覽、新增和刪除任務，也能標記它們以視為完成。這將是我們在走這個教學系列時會開發到的基本功能，此外，在開發過程中我們將會看到一些更進階的概念。</p>
+<p class="summary">我們想要讓使用者們能夠瀏覽、新增和刪除任務，也能註記它們以視為完成。這將是我們在走這個教學系列時會開發到的基本功能，此外，在開發過程中我們將會看到一些更進階的概念。</p>
 
 <table class="learn-box standard-table">
  <tbody>
@@ -76,12 +76,12 @@ tags:
 
 <ul>
  <li>瀏覽他們的任務。</li>
- <li>標記那些任務視為已完成或待辦理，而不是刪除它們。</li>
+ <li>註記那些任務視為已完成或待辦理，而不是刪除它們。</li>
  <li>刪除那些任務。</li>
  <li>新增那些新任務。</li>
  <li>藉由狀態來過濾那些任務：全部、現行或已完成任務。</li>
  <li>編輯那些任務。</li>
- <li>標記全部任務視為現行或已完成狀態。</li>
+ <li>註記全部任務視為現行或已完成狀態。</li>
  <li>刪除全部已完成任務。</li>
 </ul>
 
@@ -133,9 +133,9 @@ export default app</pre>
 
 <p><img alt="basic component rendering which a title that says 'Svelte to-do list'" src="02-todos-component-rendered.png" style="border-style: solid; border-width: 1px; display: block; margin: 0 auto;"></p>
 
-<h2 id="Adding_static_markup">加上靜態標記</h2>
+<h2 id="Adding_static_markup">加上靜態標記語言</h2>
 
-<p>我們將會從應用程式的靜態標記表示開始，所以你將會看到它長什麼樣子。複製並貼上下面內容至<code>Todos.svelte</code>元件檔案以取代現有內容：</p>
+<p>我們將會從應用程式的靜態標記語言表示開始，所以你將會看到它長什麼樣子。複製並貼上下面內容至<code>Todos.svelte</code>元件檔案以取代現有內容：</p>
 
 <pre class="brush: html">&lt;!-- Todos.svelte --&gt;
 &lt;div class="todoapp stack-large"&gt;
@@ -262,7 +262,7 @@ export default app</pre>
 
 <p><img alt="A todo list app, but unstyled, with a title of `what needs to be done`, inputs, checkboxes, etc." src="03-unstyled-todo-app.png" style="border-style: solid; border-width: 1px;"></p>
 
-<p>上面HTML標記的樣式並不是那麼好看，而且也沒有實際功能。儘管如此，接著來看看它和我們想要的功能如何關聯起來：</p>
+<p>上面HTML標記語言的樣式並不是那麼好看，而且也沒有實際功能。儘管如此，接著來看看它和我們想要的功能如何關聯起來：</p>
 
 <ul>
  <li>一個標籤和一個輸入框用來輸入新任務。</li>
@@ -300,20 +300,20 @@ export default app</pre>
 
 <p>這似乎是討論Svelte如何處理無障礙性的好時機；讓我們繼續看下去。</p>
 
-<h2 id="Svelte_accessibility_support">Svelte accessibility support</h2>
+<h2 id="Svelte_accessibility_support">Svelte無障礙性支援</h2>
 
-<p>Svelte has a special emphasis on accessibility. The intention is to encourage developers to write more accessible code "by default". Being a compiler, Svelte can statically analyze our HTML templates to provide accessibility warnings when components are being compiled.</p>
+<p>Svelte特別重視無障礙性。目的是鼓勵開發人員盡可能預設地寫出無障礙程式碼。作為編譯器，Svelte能靜態地分析我們的HTML範本，而當元件被編譯後，就能提出一些無障礙警示。</p>
 
-<p>Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.</p>
+<p>無障礙性（縮寫為a11y）一直以來不容易寫正確，但Svelte將會協助並警示你，假如你寫出了不容易閱讀的標記語言。</p>
 
-<p>For example, if we add an <code>&lt;img&gt;</code> element to our <code>todos.svelte</code> component without its corresponding <code>alt</code> prop:</p>
+<p>舉例來說，假如我們新增<code>&lt;img&gt;</code>元素至我們的<code>todos.svelte</code>元件，但沒有對應的<code>alt</code>屬性時：</p>
 
 <pre class="brush: html">&lt;h1&gt;Svelte To-Do list&lt;/h1&gt;
 
 &lt;img height="32" width="88" src="https://www.w3.org/WAI/wcag2A"&gt;
 </pre>
 
-<p>The compiler will issue the following warning:</p>
+<p>編譯器將會報出下列警示：</p>
 
 <pre class="brush: bash">(!) Plugin svelte: A11y: &lt;img&gt; element should have an alt attribute
 src/components/Todos.svelte
@@ -325,21 +325,21 @@ created public/build/bundle.js in 220ms
 
 [2020-07-15 04:07:43] waiting for changes...</pre>
 
-<p>Moreover, our editor can display this warning even before calling the compiler:</p>
+<p>此外，在我們呼叫編譯器之前，編輯器也會顯示這個警示：</p>
 
 <p><img alt="A code editor window showing an image tag, with a popup error message saying that the element should have an alt attribute" src="04-svelte-accessibility-support.png"></p>
 
-<p>You can tell Svelte to ignore this warning for the next block of markup with a <a href="https://svelte.dev/docs#Comments">comment</a> beginning with <code>svelte-ignore</code>, like this:</p>
+<p>你可以使用以<code>svelte-ignore</code>開頭的<a href="https://svelte.dev/docs#Comments">註解</a>，來告訴Svelte去忽略下一個標記語言區塊的警示，像是如下：</p>
 
 <pre class="brush: html">&lt;!-- svelte-ignore a11y-missing-attribute --&gt;
 &lt;img height="32" width="88" src="https://www.w3.org/WAI/wcag2A"&gt;
 </pre>
 
 <div class="notecard note">
-<p><strong>Note</strong>: With VSCode you can automatically add this ignore comment by clicking on the <em>Quick fix...</em> link or pressing <kbd>Ctrl</kbd> + <kbd>.</kbd>.</p>
+<p><strong>注意</strong>：透過VSCode你可以點擊<em>Quick fix...</em>連結或按<kbd>Ctrl</kbd> + <kbd>.</kbd>來自動地加上這個忽略註解。</p>
 </div>
 
-<p>If you want to globally disable this warning you can add this <code>onwarn</code> handler to your <code>rollup.config.js</code> file inside the configuration for the <code>Svelte</code> plugin, like this:</p>
+<p>假如你想要全域地關閉這個警示，可以在你的<code>rollup.config.js</code>檔案中調整<code>Svelte</code>外掛組態並補上這個<code>onwarn</code>處理器即可，像是如下：</p>
 
 <pre class="brush: js">plugins: [
   svelte({
@@ -363,17 +363,17 @@ created public/build/bundle.js in 220ms
 ]
 </pre>
 
-<p>By design, these warnings are implemented in the compiler itself, and not as a plug-in that you may choose to add to your project. The idea is to check for a11y issues in your markup by default and let you opt-out of specific warnings.</p>
+<p>在設計上，這些警示被實現於編譯器本身，而不是你可以選擇性加入專案的外掛。理念是建立在預設會檢核你的標記語言有無a11y問題並讓你可以選擇排除特定警示。</p>
 
 <div class="notecard note">
-<p><strong>Note</strong>: you should only disable these warnings if you have good reasons to do so, for example while building a quick prototype. It's important to be a good web citizen and make your pages accessible to the broadest possible userbase.</p>
+<p><strong>注意</strong>：假如你有足夠充分的理由，則可以先停用這些警示，例如當你在快速建構原型時。成為一個優秀的網路公民並讓你的頁面盡可能廣泛地被用戶閱讀是很重要的。</p>
 </div>
 
-<p>The accessibility rules checked by Svelte are taken from <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules">eslint-plugin-jsx-a11y</a>, a plugin for eslint that provides static checks for many accessibility rules on JSX elements. Svelte aims to implement all of them in its compiler, and most of them have already been ported to Svelte. On GitHub you can see <a href="https://github.com/sveltejs/svelte/issues/820">which accessibility checks are still missing</a>. You can check the meaning of each rule by clicking on its link.</p>
+<p>Svelte透過<a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules">eslint-plugin-jsx-a11y</a>來檢核無障礙性規則，它是提供在JSX元素上許多無障礙性規則靜態檢核的一個eslint外掛。Svelte企圖將它們全部實現於編譯器中，而大部分都已經移植至Svelte中。你可以在GitHub中看到<a href="https://github.com/sveltejs/svelte/issues/820">尚未實現的無障礙檢核</a>。點選規則的連結可以查閱它們各自的涵義。</p>
 
-<h2 id="Styling_our_markup">Styling our markup</h2>
+<h2 id="Styling_our_markup">為標記語言加上樣式</h2>
 
-<p>Let's make the todo list look a little better. Replace the contents of the file <code>public/global.css</code> with the following:</p>
+<p>讓我們來將待辦清單變得好看些。將以下內容取代至<code>public/global.css</code>檔案中：</p>
 
 <pre class="brush: css">/* RESETS */
 *,
@@ -674,33 +674,33 @@ body {
   opacity: 1;
 }</pre>
 
-<p>With our markup styled, everything now looks better:</p>
+<p>當我們為標記語言加上樣式後，現在看起來好多了：</p>
 
 <p><img alt="Our todo list app, styled, with a title of 'what needs to be done', an input to enter more todos, and a list of todos with checkboxes" src="05-styled-todo-app.png"></p>
 
-<h2 id="The_code_so_far">The code so far</h2>
+<h2 id="The_code_so_far">到目前為止的程式碼</h2>
 
 <h3 id="Git_2">Git</h3>
 
-<p>To see the state of the code as it should be at the end of this article, access your copy of our repo like this:</p>
+<p>若想要看到本文結束後程式碼所呈現的最終結果，你可以參照下列的方式存取我們已經複製下來的儲存庫：</p>
 
 <pre class="brush: bash">cd mdn-svelte-tutorial/03-adding-dynamic-behavior</pre>
 
-<p>Or directly download the folder's content:</p>
+<p>或直接下載資料夾內容：</p>
 
 <pre class="brush: bash">npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior</pre>
 
-<p>Remember to run <code>npm install &amp;&amp; npm run dev</code> to start your app in development mode.</p>
+<p>記得執行<code>npm install &amp;&amp; npm run dev</code>以開發模式來運行你的應用程式。</p>
 
 <h3 id="REPL_2">REPL</h3>
 
-<p>To see the current state of the code in a REPL, visit:</p>
+<p>若要在REPL看見當前程式碼狀態，請點擊如下連結：</p>
 
 <p><a href="https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2">https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2</a></p>
 
-<h2 id="Summary">Summary</h2>
+<h2 id="Summary">總結</h2>
 
-<p>With our markup and styling in place our Todo list app is starting to take shape, and we have everything ready so that we can start to focus on the features we have to implement.</p>
+<p>隨著我們對標記語言加上樣式後，待辦清單應用程式開始逐漸成形，我們終於可以專注在需要實現的功能上了。</p>
 
 <p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>