Svelte To-Do list
+ ``` + +3. 改变 `public/index.html` 中的 `title` 元素内容为 _Svelte To-do list_： + + ```html +
+
+
+
+
+
+ + +
+```
+
+再次确认已经渲染出来的画面，你应该会看到如下样子：
+
+
+
+上面 HTML 标记语言的样式并不是那么好看，而且也没有实际功能。尽管如此，接着来看看它和我们想要的功能如何关联起来：
+
+- 一个标签和一个输入框用来输入新任务。
+- 三个按钮则依据状态来过滤任务。
+- 一个标签用来显示任务总数及已完成任务数量。
+- 一个无顺序列表，其中包含每一个任务项目。
+- 编辑任务时，列表条目会有输入框和两个按钮去取消或保存变更。
+- 任务处于非编辑状态时，会有勾选框可以去设定已完成状态和两个按钮去编辑或删除任务。
+- 最后有两个按钮可以去勾选/不勾选所有任务和删除已完成的那些任务。
+
+随后的文章我们会逐一将这些功能完善，以及除此之外的功能等等。
+
+### 待办列表的无障碍特性
+
+你可能有注意到一些特殊的属性。例如：
+
+```svelte
+
+```
+
+在这里，`aria-pressed` 告诉无障碍技术（像是屏幕阅读器）按钮可以是两状态其中之一：`pressed` 或 `unpressed`。可以想象类似于开关状态。设定数值为 `true` 时，意谓着按钮默认是被按下的。
+
+`visually-hidden` 类别现在还没有效果，因为我们还没引入任何 CSS。一旦引入我们的样式后，对于可以看见的使用者们会隐藏那些具有此类别的元素并仍能够让那些屏幕阅读器用户来使用——这是因为这些文字并不需要给可以看见的使用者看到；它们提供更多信息让那些屏幕阅读器用户了解按钮实际可以做什么，而不需要借助一些额外的视觉环境来帮助他们。
+
+在往下看一点，你可以找到如下 `
+
+
+
+
+
+
+ 2 out of 3 items completed
+ + +-
+
+
-
+ + ++
+
+
+
-
+ +++ + +++ + ++
+
+
+
-
+ +++ + +++ + ++
+
+ + +
+
+
+
+- ` 元素：
+
+```svelte
+
-
-
@@ -224,7 +224,7 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app- +@@ -381,7 +381,7 @@ Svelte 透过 [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plug 让我们来将待办列表变得好看些。将以下内容取代至 `public/global.css` 文件中： ```css -/* RESETS */ +/* 重置 */ *, *::before, *::after { @@ -452,9 +452,9 @@ body { line-height: 1.31579; } } -/*END RESETS*/ +/* 重置结尾 */ -/* GLOBAL STYLES */ +/* 全局样式 */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; @@ -534,7 +534,7 @@ body { .stack-exception { margin-top: 1.2rem; } -/* END GLOBAL STYLES */ +/* 全局样式结尾 */ .todoapp { background: #fff; @@ -597,7 +597,7 @@ body { width: 100%; margin: unset auto; } -/* Todo item styles */ +/* 待办条目样式 */ .todo { display: flex; flex-direction: row; @@ -615,7 +615,7 @@ body { .todo-text:focus { box-shadow: inset 0 0 0 2px; } -/* CHECKBOX STYLES */ +/* 复选框样式 */ .c-cb { box-sizing: border-box; font-family: Arial, sans-serif; From ea4b3c373c9af2b590c8c3f571b039d95b4c9831 Mon Sep 17 00:00:00 2001 From: hanyujie2002
@@ -43,13 +43,13 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list ### Git -复制 Github 仓库（假如你还没做这个）如下： +使用以下命令克隆 Github 仓库（假如本地还没有代码）： ```bash git clone https://github.com/opensas/mdn-svelte-tutorial.git ``` -接着取得当前应用程序状态，执行如下： +接着取得当前应用程序状态，执行： ```bash cd mdn-svelte-tutorial/02-starting-our-todo-app @@ -65,11 +65,11 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app ### REPL -为了使用 REPL 和我们一起编写程序代码，点击如下连结： +为了使用 REPL 和我们一起编写程序代码，点击如下链接：
``` -5. 在开发模式中，如果定义属性没有存在于组件中，Svelte 将会在浏览器控制台发出警告；在此例中，当我们于 `src/main.js` 实例化 `App` 组件时，由于我们已经明确定义出 `name` 属性，但并无实际在 `App` 中使用到，所以控制台现在应该会给你一个警告讯息，如“\ was created with unknown prop 'name'”。而为了排除这个问题，请从 `src/main.js` 中移除 `name` 属性；看起来应该要像是如下这样： +5. 在开发模式中，如果定义属性没有存在于组件中，Svelte 将会在浏览器控制台发出警告；在此例中，当我们于 `src/main.js` 实例化 `App` 组件时，由于我们已经明确定义出 `name` 属性，但并没有实际在 `App` 中使用到，所以控制台现在应该会给你一个警告信息，如“\ was created with unknown prop 'name'”。为了排除这个问题，请从 `src/main.js` 中移除 `name` 属性；`main.js` 现在应该类似于这样： ```js import App from "./App.svelte"; @@ -134,7 +134,7 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app ## 加上静态标记语言 -我们将会从应用程序的静态标记语言表示开始，所以你将会看到它长什么样子。复制并粘贴下面内容至 `Todos.svelte` 组件文件以取代现有内容： +我们将会从应用程序的静态标记语言表示开始，所以你将会看到它的外观。复制并粘贴下面内容至 `Todos.svelte` 组件文件以取代现有内容： ```svelte @@ -261,17 +261,17 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app  -上面 HTML 标记语言的样式并不是那么好看，而且也没有实际功能。尽管如此，接着来看看它和我们想要的功能如何关联起来： +上面 HTML 标记语言的样式并不是那么好看，而且也没有实际功能。尽管如此，让我们来看看这些标记，看看它们如何与我们想要的特性关联起来： - 一个标签和一个输入框用来输入新任务。 -- 三个按钮则依据状态来过滤任务。 +- 三个按钮用来依据状态来过滤任务。 - 一个标签用来显示任务总数及已完成任务数量。 -- 一个无顺序列表，其中包含每一个任务项目。 -- 编辑任务时，列表条目会有输入框和两个按钮去取消或保存变更。 -- 任务处于非编辑状态时，会有勾选框可以去设定已完成状态和两个按钮去编辑或删除任务。 -- 最后有两个按钮可以去勾选/不勾选所有任务和删除已完成的那些任务。 +- 一个无序列表，其中包含每一个任务项目。 +- 编辑任务时，列表条目会有输入框和两个按钮用来取消或保存变更。 +- 任务处于非编辑状态时，有一个复选框用于设置已完成状态，还有两个按钮用于编辑或删除任务。 +- 最后有两个按钮，分别用于选中/取消选中所有任务和删除已完成任务。 -随后的文章我们会逐一将这些功能完善，以及除此之外的功能等等。 +随后的文章我们会逐一将这些特性完善，以及实现更多其他特性。 ### 待办列表的无障碍特性 @@ -285,11 +285,11 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app ``` -在这里，`aria-pressed` 告诉无障碍技术（像是屏幕阅读器）按钮可以是两状态其中之一：`pressed` 或 `unpressed`。可以想象类似于开关状态。设定数值为 `true` 时，意谓着按钮默认是被按下的。 +在这里，`aria-pressed` 告诉无障碍技术（如屏幕阅读器）按钮可以是两种状态之一：`pressed` 或 `unpressed`。可以想象类似于开关状态。设定数值为 `true` 时，意谓着按钮默认是被按下的。 -`visually-hidden` 类别现在还没有效果，因为我们还没引入任何 CSS。一旦引入我们的样式后，对于可以看见的使用者们会隐藏那些具有此类别的元素并仍能够让那些屏幕阅读器用户来使用——这是因为这些文字并不需要给可以看见的使用者看到；它们提供更多信息让那些屏幕阅读器用户了解按钮实际可以做什么，而不需要借助一些额外的视觉环境来帮助他们。 +`visually-hidden` 类别现在还没有效果，因为我们还没引入任何 CSS。不过，一旦我们设置了样式，任何带有该类的元素都将对视力正常的用户隐藏起来，但屏幕阅读器用户仍然可以使用，这是因为视力正常的用户并不需要这些文字；这些文字是为了向屏幕阅读器用户提供更多有关按钮作用的信息，因为屏幕阅读器用户没有额外的视觉上下文来帮助他们。 -在往下看一点，你可以找到如下 ` - ` 元素：
+再往下看一点，你可以找到如下 `
- ` 元素：
```svelte
- ` 会被视为列表，但在加上样式之后会破坏原有性质。明确定义规则为“list”将能复原 `
- ` 元素本身意义。假如你想要知道更多为什么需要明确定义的话，可以去参考 Scott O'Hara 的[“修复列表”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)（2019）文章。
+`role` 属性则帮助无障碍技术去解释元素具有什么种类的语义数值——或它的目的。默认情况下，`
- ` 会被视为列表，但在加上样式之后会破坏原有性质。明确定义规则为“list”将能复原 `
- ` 元素本身意义。如果你想要想进一步了解为什么有必要这样做，可以去参考 Scott O'Hara 的[“修复列表”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)（2019）文章。
-`aria-labelledby` 属性则告诉辅助技术，我们把 `
` 且 `id` 为 `list-heading` 作为描述下面列表用途的标签。建立这种关联为列表提供更多上下文信息，这可以帮助屏幕阅读器用户更好地去了解它的目的。 +`aria-labelledby` 属性则告诉辅助技术，我们把具有 `id` 属性值为 `list-heading` 的 `
` 元素作为描述下面列表用途的标签。这种关联为列表提供了更多的上下文信息，可以帮助屏幕阅读器用户更好地理解列表的目的。 这似乎是讨论 Svelte 如何处理无障碍的好时机；让我们继续看下去。 ## Svelte 无障碍性支持 -Svelte 特别重视无障碍性。目的是鼓励开发人员尽可能预设地写出无障碍程序代码。作为编译程序，Svelte 能静态地分析我们的 HTML 模板，而当组件被编译后，就能提出一些无障碍警告。 +Svelte 特别重视无障碍性。目的是鼓励开发人员尽可能“默认”编写更具有无障碍性的代码。作为编译程序，Svelte 能静态地分析我们的 HTML 模板，而当组件被编译后，就能提出一些无障碍警告。 -无障碍性（缩写为 a11y）一直以来不容易写正确，但 Svelte 将会协助并警告你，假如你写出了不容易阅读的标记语言。 +无障碍性（缩写为 a11y）并不总是容易做到，但 Svelte 会在编写不具无障碍性的标记时发出警告，从而帮助你。 举例来说，假如我们新增 `
` 元素至我们的 `todos.svelte` 组件，但没有对应的 `alt` 属性： @@ -318,7 +318,7 @@ Svelte 特别重视无障碍性。目的是鼓励开发人员尽可能预设地
``` -编译程序将会报出下列警告： +编译器将会报出下列警告： ```bash (!) Plugin svelte: A11y:
element should have an alt attribute @@ -332,20 +332,20 @@ created public/build/bundle.js in 220ms [2020-07-15 04:07:43] waiting for changes... ``` -此外，在我们调用编译程序之前，编辑器也会显示这个警告： +此外，在我们调用编译器之前，编辑器也会显示这个警告：  -你可以使用以 `svelte-ignore` 开头的[批注](https://svelte.dev/docs#Comments)，来告诉 Svelte 去忽略下一个标记语言区块的警告，像是如下： +你可以像这样使用以 `svelte-ignore` 开头的[注释](https://svelte.dev/docs#Comments)，来告诉 Svelte 去忽略下一个标记语言区块的警告： ```svelte
推荐你至少需熟悉基本的 - HTML、 - CSS 与 + HTML、CSS 与 JavaScript 等程序语言且具备 ``` -> **备注：** 透过 VSCode 你可以点击 _Quick fix..._ 链接或按 Ctrl + . 来自动地加上这个忽略注释。 +> **备注：** 通过 VSCode 你可以点击 _Quick fix..._ 链接或按 Ctrl + . 来自动地加上这个忽略注释。 假如你想要全局地关闭这个警告，可以像这样在你的 `rollup.config.js` 文件中调整 `Svelte` 插件配置并补上这个 `onwarn` 处理器： From 67c72b5e79af4df98fb68903dd2b8d129b650d53 Mon Sep 17 00:00:00 2001 From: hanyujie2002
目标： - 学习如何建立一个 Svelte 组件并于另一个组件内渲染它，透过属性（props）传递数据并保存它的状态。 + 学习如何建立一个 Svelte 组件并于另一个组件内渲染它，通过属性（prop）传递数据并保存它的状态。
- ` 会被视为列表，但在加上样式之后会破坏原有性质。明确定义规则为“list”将能复原 `
- ` 元素本身意义。假如你想要知道更多为什么需要明确定义的话，可以去参考 Scott O'Hara 的[“修复列表”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)（2019）文章。
+
+`aria-labelledby` 属性则告诉辅助技术，我们把 `
` 且 `id` 为 `list-heading` 作为描述下面列表用途的标签。建立这种关联为列表提供更多上下文信息，这可以帮助屏幕阅读器用户更好地去了解它的目的。
+
+这似乎是讨论 Svelte 如何处理无障碍的好时机；让我们继续看下去。
+
+## Svelte 无障碍性支持
+
+Svelte 特别重视无障碍性。目的是鼓励开发人员尽可能预设地写出无障碍程序代码。作为编译程序，Svelte 能静态地分析我们的 HTML 模板，而当组件被编译后，就能提出一些无障碍警告。
+
+无障碍性（缩写为 a11y）一直以来不容易写正确，但 Svelte 将会协助并警告你，假如你写出了不容易阅读的标记语言。
+
+举例来说，假如我们新增 `![]()
` 元素至我们的 `todos.svelte` 组件，但没有对应的 `alt` 属性：
+
+```html
+Svelte To-Do list
+
+
+```
+
+编译程序将会报出下列警告：
+
+```bash
+(!) Plugin svelte: A11y: ![]()
element should have an alt attribute
+src/components/Todos.svelte
+1: Svelte To-Do list
+2:
+3:
+ ^
+created public/build/bundle.js in 220ms
+
+[2020-07-15 04:07:43] waiting for changes...
+```
+
+此外，在我们调用编译程序之前，编辑器也会显示这个警告：
+
+
+
+你可以使用以 `svelte-ignore` 开头的[批注](https://svelte.dev/docs#Comments)，来告诉 Svelte 去忽略下一个标记语言区块的警告，像是如下：
+
+```svelte
+
+
+```
+
+> **备注：** 透过 VSCode 你可以点击 _Quick fix..._ 链接或按 Ctrl + . 来自动地加上这个忽略批注。
+
+假如你想要全局地关闭这个警告，可以在你的 `rollup.config.js` 文件中调整 `Svelte` 插件并补上这个 `onwarn` 处理程序即可，像是如下：
+
+```js
+plugins: [
+ svelte({
+ dev: !production,
+ css: (css) => {
+ css.write("public/build/bundle.css");
+ },
+ // 警告通常直接传递给 Rollup。你可以
+ // 选择在这里处理它们，例如压制
+ // 带有特定代码的警告
+ onwarn: (warning, handler) => {
+ // 例如，我不在乎屏幕阅读器 -> 请 不 要 这 样 做！！！
+ if (warning.code === "a11y-missing-attribute") return;
+
+ // 让 Rollup 正常处理所有其他警告
+ handler(warning);
+ },
+ }),
+
+ // …
+];
+```
+
+在设计上，这些警告被实现于编译程序本身，而不是你可以选择性加入项目的插件。理念是默认会检查你的标记语言有无 a11y 问题并让你可以选择排除特定警告。
+
+> **备注：** 假如你有足够充分的理由，则可以先停用这些警告，例如当你在快速建构原型时。但请记住你需要成为优秀的网民并让你的页面尽可能无障碍，可以更广泛地被用户阅读。
+
+Svelte 透过 [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules) 来检查无障碍性规则，它是提供在 JSX 元素方面的许多无障碍性规则静态检查的一个 ESLint 插件。Svelte 企图将它们全部实现于编译程序中，而大部分都已经移植至 Svelte 中。你可以在 GitHub 中看到[尚未实现的无障碍检查](https://github.com/sveltejs/svelte/issues/820)。点击规则的链接可以查阅它们各自的涵义。
+
+## 为标记语言加上样式
+
+让我们来将待办列表变得好看些。将以下内容取代至 `public/global.css` 文件中：
+
+```css
+/* RESETS */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+*:focus {
+ outline: 3px dashed #228bec;
+ outline-offset: 0;
+}
+html {
+ font: 62.5% / 1.15 sans-serif;
+}
+h1,
+h2 {
+ margin-bottom: 0;
+}
+ul {
+ list-style: none;
+ padding: 0;
+}
+button {
+ border: none;
+ margin: 0;
+ padding: 0;
+ width: auto;
+ overflow: visible;
+ background: transparent;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ -webkit-font-smoothing: inherit;
+ -moz-osx-font-smoothing: inherit;
+ -webkit-appearance: none;
+}
+button::-moz-focus-inner {
+ border: 0;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+}
+button,
+input {
+ overflow: visible;
+}
+input[type="text"] {
+ border-radius: 0;
+}
+body {
+ width: 100%;
+ max-width: 68rem;
+ margin: 0 auto;
+ font:
+ 1.6rem/1.25 Arial,
+ sans-serif;
+ background-color: #f5f5f5;
+ color: #4d4d4d;
+}
+@media screen and (min-width: 620px) {
+ body {
+ font-size: 1.9rem;
+ line-height: 1.31579;
+ }
+}
+/*END RESETS*/
+
+/* GLOBAL STYLES */
+.form-group > input[type="text"] {
+ display: inline-block;
+ margin-top: 0.4rem;
+}
+.btn {
+ padding: 0.8rem 1rem 0.7rem;
+ border: 0.2rem solid #4d4d4d;
+ cursor: pointer;
+ text-transform: capitalize;
+}
+.btn.toggle-btn {
+ border-width: 1px;
+ border-color: #d3d3d3;
+}
+.btn.toggle-btn[aria-pressed="true"] {
+ text-decoration: underline;
+ border-color: #4d4d4d;
+}
+.btn__danger {
+ color: #fff;
+ background-color: #ca3c3c;
+ border-color: #bd2130;
+}
+.btn__filter {
+ border-color: lightgrey;
+}
+.btn__primary {
+ color: #fff;
+ background-color: #000;
+}
+.btn__primary:disabled {
+ color: darkgrey;
+ background-color: #565656;
+}
+.btn-group {
+ display: flex;
+ justify-content: space-between;
+}
+.btn-group > * {
+ flex: 1 1 49%;
+}
+.btn-group > * + * {
+ margin-left: 0.8rem;
+}
+.label-wrapper {
+ margin: 0;
+ flex: 0 0 100%;
+ text-align: center;
+}
+.visually-hidden {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px, 1px, 1px, 1px);
+ white-space: nowrap;
+}
+[class*="stack"] > * {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.stack-small > * + * {
+ margin-top: 1.25rem;
+}
+.stack-large > * + * {
+ margin-top: 2.5rem;
+}
+@media screen and (min-width: 550px) {
+ .stack-small > * + * {
+ margin-top: 1.4rem;
+ }
+ .stack-large > * + * {
+ margin-top: 2.8rem;
+ }
+}
+.stack-exception {
+ margin-top: 1.2rem;
+}
+/* END GLOBAL STYLES */
+
+.todoapp {
+ background: #fff;
+ margin: 2rem 0 4rem 0;
+ padding: 1rem;
+ position: relative;
+ box-shadow:
+ 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+ 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+}
+@media screen and (min-width: 550px) {
+ .todoapp {
+ padding: 4rem;
+ }
+}
+.todoapp > * {
+ max-width: 50rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+.todoapp > form {
+ max-width: 100%;
+}
+.todoapp > h1 {
+ display: block;
+ max-width: 100%;
+ text-align: center;
+ margin: 0;
+ margin-bottom: 1rem;
+}
+.label__lg {
+ line-height: 1.01567;
+ font-weight: 300;
+ padding: 0.8rem;
+ margin-bottom: 1rem;
+ text-align: center;
+}
+.input__lg {
+ padding: 2rem;
+ border: 2px solid #000;
+}
+.input__lg:focus {
+ border-color: #4d4d4d;
+ box-shadow: inset 0 0 0 2px;
+}
+[class*="__lg"] {
+ display: inline-block;
+ width: 100%;
+ font-size: 1.9rem;
+}
+[class*="__lg"]:not(:last-child) {
+ margin-bottom: 1rem;
+}
+@media screen and (min-width: 620px) {
+ [class*="__lg"] {
+ font-size: 2.4rem;
+ }
+}
+.filters {
+ width: 100%;
+ margin: unset auto;
+}
+/* Todo item styles */
+.todo {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+.todo > * {
+ flex: 0 0 100%;
+}
+.todo-text {
+ width: 100%;
+ min-height: 4.4rem;
+ padding: 0.4rem 0.8rem;
+ border: 2px solid #565656;
+}
+.todo-text:focus {
+ box-shadow: inset 0 0 0 2px;
+}
+/* CHECKBOX STYLES */
+.c-cb {
+ box-sizing: border-box;
+ font-family: Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+ font-size: 1.6rem;
+ line-height: 1.25;
+ display: block;
+ position: relative;
+ min-height: 44px;
+ padding-left: 40px;
+ clear: left;
+}
+.c-cb > label::before,
+.c-cb > input[type="checkbox"] {
+ box-sizing: border-box;
+ top: -2px;
+ left: -2px;
+ width: 44px;
+ height: 44px;
+}
+.c-cb > input[type="checkbox"] {
+ -webkit-font-smoothing: antialiased;
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ margin: 0;
+ opacity: 0;
+}
+.c-cb > label {
+ font-size: inherit;
+ font-family: inherit;
+ line-height: inherit;
+ display: inline-block;
+ margin-bottom: 0;
+ padding: 8px 15px 5px;
+ cursor: pointer;
+ touch-action: manipulation;
+}
+.c-cb > label::before {
+ content: "";
+ position: absolute;
+ border: 2px solid currentColor;
+ background: transparent;
+}
+.c-cb > input[type="checkbox"]:focus + label::before {
+ border-width: 4px;
+ outline: 3px dashed #228bec;
+}
+.c-cb > label::after {
+ box-sizing: content-box;
+ content: "";
+ position: absolute;
+ top: 11px;
+ left: 9px;
+ width: 18px;
+ height: 7px;
+ transform: rotate(-45deg);
+ border: solid;
+ border-width: 0 0 5px 5px;
+ border-top-color: transparent;
+ opacity: 0;
+ background: transparent;
+}
+.c-cb > input[type="checkbox"]:checked + label::after {
+ opacity: 1;
+}
+```
+
+当我们为标记语言加上样式后，现在看起来好多了：
+
+
+
+## 到目前为止的程序代码
+
+### Git
+
+若想要看到本文结束后程序代码所呈现的最终结果，请获取我们仓库的复制：
+
+```bash
+cd mdn-svelte-tutorial/03-adding-dynamic-behavior
+```
+
+或直接下载文件夹内容：
+
+```bash
+npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior
+```
+
+记得执行 `npm install && npm run dev` 以开发模式来运行你的应用程序。
+
+### REPL
+
+若要在 REPL 看见当前程序代码状态，请点击如下连结：
+
+
+
+## 总结
+
+随着我们对标记语言加上样式后，待办列表应用程序开始逐渐成形，我们终于可以专注在需要实现的功能上了。
+
+{{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")}}
From 0e0f5b5b94145c05228b9c6c17154ecdf4b2b98c Mon Sep 17 00:00:00 2001
From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com>
Date: Sat, 25 Nov 2023 23:08:35 +0800
Subject: [PATCH 2/7] fix
---
.../svelte_todo_list_beginning/index.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
index 9f337aafa052c9..a27f308bbc7cc7 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
@@ -174,7 +174,7 @@ npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app
-
+
-
-
+