mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-27 00:25:53 +02:00
Merge branch 'microsoft:main' into main
This commit is contained in:
34
3-terrarium/translations/README.zh-cn.md
Normal file
34
3-terrarium/translations/README.zh-cn.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# 我的花艺瓶:一个用于学习 HTML、CSS 和使用 JS 操作 DOM 的项目 🌵🌱
|
||||
|
||||
思考构建一个的具有拖放交互的小程序,只需要很少的 HTML、CSS 和 JS 代码,你就可以构建一个被美化的,且具有交互功能的 Web 页面。
|
||||
|
||||

|
||||
|
||||
# 教程
|
||||
|
||||
1. [HTML 简介](../1-intro-to-html/translations/README.zh-tw.md)
|
||||
2. [CSS 简介](../2-intro-to-css/translations/README.zh-tw.md)
|
||||
3. [DOM 简介与 JS 闭包](../translations/3-intro-to-DOM-and-closures/README.zh-tw.md)
|
||||
|
||||
## 参与人员
|
||||
|
||||
由 [Jen Looper](https://www.twitter.com/jenlooper) 充满着 ♥️ 编写。
|
||||
|
||||
使用 CSS 来编写一个花艺瓶的灵感来自于 Jakub Mandra 的玻璃瓶 [CodePen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
|
||||
|
||||
上面的手绘插画由 [Jen Looper](http://jenlooper.com) 使用 Procreate 绘制。
|
||||
|
||||
## 部署你的花艺瓶
|
||||
|
||||
你可以使用 Azure Static Web Apps 部署并发布你的花艺瓶到网络上。
|
||||
|
||||
1. Fork 这个仓库
|
||||
|
||||
2. 点击下方的按钮
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
|
||||
3. 按照指引创建你的应用。请确保你的程序根目录为 `/solution` 或者是你自己代码项目的根目录。这个应用不需要使用任何 API,因此你不用担心需要去调用什么额外的内容。.github 目录会在你 fork 的仓库中创建,它将帮助 Azure Static Web Apps 的构建服务构建并发布你的应用到一个新的地址。
|
||||
|
||||
|
||||
|
@@ -135,7 +135,7 @@ function updateRoute(templateId) {
|
||||
|
||||
What we do here is exactly the 3 steps described above. We instantiate the template with the id `templateId`, and put its cloned content within our app placeholder. Note that we need to use `cloneNode(true)` to copy the entire subtree of the template.
|
||||
|
||||
Now call this function with one of the template and look at the result.
|
||||
Now call this function with one of the templates and look at the result.
|
||||
|
||||
```js
|
||||
updateRoute('login');
|
||||
@@ -189,7 +189,7 @@ function updateRoute() {
|
||||
}
|
||||
```
|
||||
|
||||
Here we mapped the routes we declared to the corresponding template. You can try it that it works correctly by changing the URL manually in your browser.
|
||||
Here we mapped the routes we declared to the corresponding template. You can check that it works correctly by changing the URL manually in your browser.
|
||||
|
||||
✅ What happens if you enter an unknown path in the URL? How could we solve this?
|
||||
|
||||
@@ -266,7 +266,7 @@ Using the `history.pushState` creates new entries in the browser's navigation hi
|
||||
|
||||
If you try clicking on the back button a few times, you'll see that the current URL changes and the history is updated, but the same template keeps being displayed.
|
||||
|
||||
That's because don't know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
|
||||
That's because the browser doesn't know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
|
||||
|
||||
### Task
|
||||
|
||||
|
Reference in New Issue
Block a user