mirror of https://github.com/yewstack/yew
Update to Docusaurus v3 (#3518)
* prep * update deps * builds?? * fix deps * switch back to Algolia search #2253 switched to local search but that doesn't work with Docusaurus v3. Switch back to Algolia search * fix mdx build issues * fmt:write * write translations * use docusaurus preset * contextualSearch & fmt * npm run write-translations
This commit is contained in:
parent
915000572c
commit
00a6183bd2
|
@ -25,7 +25,7 @@ jobs:
|
|||
- name: Setup node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "18"
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
|
|
|
@ -115,7 +115,7 @@ fn main() {
|
|||
Finally, add an `index.html` file in the root directory of your app.
|
||||
|
||||
```html , title=index.html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -105,7 +105,7 @@ fn main() {
|
|||
Now, let's create an `index.html` at the root of the project.
|
||||
|
||||
```html title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head></head>
|
||||
<body></body>
|
||||
|
|
|
@ -119,33 +119,47 @@ module.exports = {
|
|||
prism: {
|
||||
additionalLanguages: ['rust', 'toml'],
|
||||
},
|
||||
gtag: {
|
||||
trackingID: 'G-DENCL8P4YP',
|
||||
anonymizeIP: true,
|
||||
algolia: {
|
||||
appId: 'F8S2ICRD2T',
|
||||
apiKey: '2dc337d68f84389c3713a393aff39816',
|
||||
indexName: 'yew-rs',
|
||||
contextualSearch: true,
|
||||
insights: true, // Optional, automatically send insights when user interacts with search results
|
||||
searchPagePath: 'search',
|
||||
},
|
||||
},
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'ja', 'zh-Hans', 'zh-Hant'],
|
||||
},
|
||||
plugins: [
|
||||
'content-pages',
|
||||
'docusaurus-plugin-sass',
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/theme-classic',
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
customCss: require.resolve('./src/css/custom.css'),
|
||||
theme: {
|
||||
customCss: ['./src/css/custom.css'],
|
||||
},
|
||||
],
|
||||
[
|
||||
'@docusaurus/plugin-content-docs',
|
||||
{
|
||||
docs: {
|
||||
path: 'docs',
|
||||
sidebarPath: require.resolve('./sidebars/docs.js'),
|
||||
editUrl,
|
||||
routeBasePath: '/docs',
|
||||
},
|
||||
blog: {
|
||||
path: 'blog',
|
||||
blogTitle: 'Yew Blog',
|
||||
editUrl,
|
||||
},
|
||||
pages: {},
|
||||
gtag: {
|
||||
trackingID: 'G-DENCL8P4YP',
|
||||
anonymizeIP: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
'docusaurus-plugin-sass',
|
||||
[
|
||||
'@docusaurus/plugin-content-docs',
|
||||
{
|
||||
|
@ -156,14 +170,6 @@ module.exports = {
|
|||
editUrl,
|
||||
},
|
||||
],
|
||||
[
|
||||
'@docusaurus/plugin-content-blog',
|
||||
{
|
||||
path: 'blog',
|
||||
blogTitle: 'Yew Blog',
|
||||
editUrl,
|
||||
},
|
||||
],
|
||||
[
|
||||
'client-redirects',
|
||||
{
|
||||
|
@ -177,12 +183,5 @@ module.exports = {
|
|||
],
|
||||
},
|
||||
],
|
||||
[
|
||||
'@easyops-cn/docusaurus-search-local',
|
||||
{
|
||||
hashed: true,
|
||||
indexBlog: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
|
|
|
@ -295,5 +295,133 @@
|
|||
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
|
||||
"message": "Toggle navigation bar",
|
||||
"description": "The ARIA label for hamburger menu button of mobile navigation"
|
||||
},
|
||||
"theme.admonition.warning": {
|
||||
"message": "警告",
|
||||
"description": "The default label used for the Warning admonition (:::warning)"
|
||||
},
|
||||
"theme.DocSidebarItem.expandCategoryAriaLabel": {
|
||||
"message": "Expand sidebar category '{label}'",
|
||||
"description": "The ARIA label to expand the sidebar category"
|
||||
},
|
||||
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
|
||||
"message": "Collapse sidebar category '{label}'",
|
||||
"description": "The ARIA label to collapse the sidebar category"
|
||||
},
|
||||
"theme.unlistedContent.title": {
|
||||
"message": "Unlisted page",
|
||||
"description": "The unlisted content banner title"
|
||||
},
|
||||
"theme.unlistedContent.message": {
|
||||
"message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
|
||||
"description": "The unlisted content banner message"
|
||||
},
|
||||
"theme.SearchPage.inputPlaceholder": {
|
||||
"message": "検索するキーワードを入力してください",
|
||||
"description": "The placeholder for search page input"
|
||||
},
|
||||
"theme.SearchPage.inputLabel": {
|
||||
"message": "検索",
|
||||
"description": "The ARIA label for search page input"
|
||||
},
|
||||
"theme.SearchPage.algoliaLabel": {
|
||||
"message": "Algoliaで検索",
|
||||
"description": "The ARIA label for Algolia mention"
|
||||
},
|
||||
"theme.SearchPage.fetchingNewResults": {
|
||||
"message": "新しい検索結果を取得しています...",
|
||||
"description": "The paragraph for fetching new search results"
|
||||
},
|
||||
"theme.SearchModal.searchBox.resetButtonTitle": {
|
||||
"message": "クリア",
|
||||
"description": "The label and ARIA label for search box reset button"
|
||||
},
|
||||
"theme.SearchModal.searchBox.cancelButtonText": {
|
||||
"message": "キャンセル",
|
||||
"description": "The label and ARIA label for search box cancel button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.recentSearchesTitle": {
|
||||
"message": "最近の検索",
|
||||
"description": "The title for recent searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.noRecentSearchesText": {
|
||||
"message": "最近の検索履歴はありません",
|
||||
"description": "The text when no recent searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
|
||||
"message": "この検索をお気に入りに追加",
|
||||
"description": "The label for save recent search button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
|
||||
"message": "この検索を履歴から削除",
|
||||
"description": "The label for remove recent search button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.favoriteSearchesTitle": {
|
||||
"message": "お気に入り",
|
||||
"description": "The title for favorite searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
|
||||
"message": "この検索をお気に入りから削除",
|
||||
"description": "The label for remove favorite search button"
|
||||
},
|
||||
"theme.SearchModal.errorScreen.titleText": {
|
||||
"message": "検索結果の取得に失敗しました",
|
||||
"description": "The title for error screen of search modal"
|
||||
},
|
||||
"theme.SearchModal.errorScreen.helpText": {
|
||||
"message": "ネットワーク接続を確認してください",
|
||||
"description": "The help text for error screen of search modal"
|
||||
},
|
||||
"theme.SearchModal.footer.selectText": {
|
||||
"message": "選ぶ",
|
||||
"description": "The explanatory text of the action for the enter key"
|
||||
},
|
||||
"theme.SearchModal.footer.selectKeyAriaLabel": {
|
||||
"message": "エンターキー",
|
||||
"description": "The ARIA label for the Enter key button that makes the selection"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateText": {
|
||||
"message": "移動",
|
||||
"description": "The explanatory text of the action for the Arrow up and Arrow down key"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateUpKeyAriaLabel": {
|
||||
"message": "上矢印キー",
|
||||
"description": "The ARIA label for the Arrow up key button that makes the navigation"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateDownKeyAriaLabel": {
|
||||
"message": "下矢印キー",
|
||||
"description": "The ARIA label for the Arrow down key button that makes the navigation"
|
||||
},
|
||||
"theme.SearchModal.footer.closeText": {
|
||||
"message": "閉じる",
|
||||
"description": "The explanatory text of the action for Escape key"
|
||||
},
|
||||
"theme.SearchModal.footer.closeKeyAriaLabel": {
|
||||
"message": "エスケープキー",
|
||||
"description": "The ARIA label for the Escape key button that close the modal"
|
||||
},
|
||||
"theme.SearchModal.footer.searchByText": {
|
||||
"message": "検索",
|
||||
"description": "The text explain that the search is making by Algolia"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.noResultsText": {
|
||||
"message": "見つかりませんでした",
|
||||
"description": "The text explains that there are no results for the following search"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.suggestedQueryText": {
|
||||
"message": "次の検索を試す:",
|
||||
"description": "The text for the suggested query when no results are found for the following search"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.reportMissingResultsText": {
|
||||
"message": "よりよい検索結果がありますか?",
|
||||
"description": "The text for the question where the user thinks there are missing results"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
|
||||
"message": "報告する",
|
||||
"description": "The text for the link to report missing results"
|
||||
},
|
||||
"theme.SearchModal.placeholder": {
|
||||
"message": "ドキュメントを検索",
|
||||
"description": "The placeholder of the input of the DocSearch pop-up modal"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -38,5 +38,41 @@
|
|||
"sidebar.sidebar.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar sidebar"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
||||
"description": "The label for category Getting Started in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Project Setup": {
|
||||
"message": "Project Setup",
|
||||
"description": "The label for category Project Setup in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Concepts": {
|
||||
"message": "Concepts",
|
||||
"description": "The label for category Concepts in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Components": {
|
||||
"message": "Components",
|
||||
"description": "The label for category Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.wasm-bindgen": {
|
||||
"message": "wasm-bindgen",
|
||||
"description": "The label for category wasm-bindgen in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.HTML": {
|
||||
"message": "HTML",
|
||||
"description": "The label for category HTML in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Services": {
|
||||
"message": "Services",
|
||||
"description": "The label for category Services in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Advanced topics": {
|
||||
"message": "Advanced topics",
|
||||
"description": "The label for category Advanced topics in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar docs"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -85,9 +85,8 @@ window.alert("hello from wasm!");
|
|||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
しばしば<code>Result</code>
|
||||
を返さずpanicするようになっている。例えば <code>
|
||||
stdweb::web::window()
|
||||
</code>
|
||||
を返さずpanicするようになっている。例えば
|
||||
<code>stdweb::web::window()</code>
|
||||
ワーカーの中で呼ばれるパニックする。
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -54,5 +54,57 @@
|
|||
"sidebar.sidebar.category.yew-router": {
|
||||
"message": "yew-router",
|
||||
"description": "The label for category yew-router in sidebar sidebar"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
||||
"description": "The label for category Getting Started in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Project Setup": {
|
||||
"message": "Project Setup",
|
||||
"description": "The label for category Project Setup in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Concepts": {
|
||||
"message": "Concepts",
|
||||
"description": "The label for category Concepts in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.wasm-bindgen": {
|
||||
"message": "wasm-bindgen",
|
||||
"description": "The label for category wasm-bindgen in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Components": {
|
||||
"message": "Components",
|
||||
"description": "The label for category Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.HTML": {
|
||||
"message": "HTML",
|
||||
"description": "The label for category HTML in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Function Components": {
|
||||
"message": "Function Components",
|
||||
"description": "The label for category Function Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Advanced topics": {
|
||||
"message": "Advanced topics",
|
||||
"description": "The label for category Advanced topics in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Migration guides": {
|
||||
"message": "Migration guides",
|
||||
"description": "The label for category Migration guides in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew": {
|
||||
"message": "yew",
|
||||
"description": "The label for category yew in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew-agent": {
|
||||
"message": "yew-agent",
|
||||
"description": "The label for category yew-agent in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew-router": {
|
||||
"message": "yew-router",
|
||||
"description": "The label for category yew-router in sidebar docs"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -295,5 +295,133 @@
|
|||
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
|
||||
"message": "切换导航栏",
|
||||
"description": "The ARIA label for hamburger menu button of mobile navigation"
|
||||
},
|
||||
"theme.admonition.warning": {
|
||||
"message": "注意",
|
||||
"description": "The default label used for the Warning admonition (:::warning)"
|
||||
},
|
||||
"theme.DocSidebarItem.expandCategoryAriaLabel": {
|
||||
"message": "展开侧边栏分类 '{label}'",
|
||||
"description": "The ARIA label to expand the sidebar category"
|
||||
},
|
||||
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
|
||||
"message": "折叠侧边栏分类 '{label}'",
|
||||
"description": "The ARIA label to collapse the sidebar category"
|
||||
},
|
||||
"theme.unlistedContent.title": {
|
||||
"message": "未列出页",
|
||||
"description": "The unlisted content banner title"
|
||||
},
|
||||
"theme.unlistedContent.message": {
|
||||
"message": "此页面未列出。搜索引擎不会对其索引,只有拥有直接链接的用户才能访问。",
|
||||
"description": "The unlisted content banner message"
|
||||
},
|
||||
"theme.SearchPage.inputPlaceholder": {
|
||||
"message": "在此输入搜索字词",
|
||||
"description": "The placeholder for search page input"
|
||||
},
|
||||
"theme.SearchPage.inputLabel": {
|
||||
"message": "搜索",
|
||||
"description": "The ARIA label for search page input"
|
||||
},
|
||||
"theme.SearchPage.algoliaLabel": {
|
||||
"message": "通过 Algolia 搜索",
|
||||
"description": "The ARIA label for Algolia mention"
|
||||
},
|
||||
"theme.SearchPage.fetchingNewResults": {
|
||||
"message": "正在获取新的搜索结果...",
|
||||
"description": "The paragraph for fetching new search results"
|
||||
},
|
||||
"theme.SearchModal.searchBox.resetButtonTitle": {
|
||||
"message": "清除查询",
|
||||
"description": "The label and ARIA label for search box reset button"
|
||||
},
|
||||
"theme.SearchModal.searchBox.cancelButtonText": {
|
||||
"message": "取消",
|
||||
"description": "The label and ARIA label for search box cancel button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.recentSearchesTitle": {
|
||||
"message": "最近搜索",
|
||||
"description": "The title for recent searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.noRecentSearchesText": {
|
||||
"message": "没有最近搜索",
|
||||
"description": "The text when no recent searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
|
||||
"message": "保存这个搜索",
|
||||
"description": "The label for save recent search button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
|
||||
"message": "从历史记录中删除这个搜索",
|
||||
"description": "The label for remove recent search button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.favoriteSearchesTitle": {
|
||||
"message": "收藏",
|
||||
"description": "The title for favorite searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
|
||||
"message": "从收藏列表中删除这个搜索",
|
||||
"description": "The label for remove favorite search button"
|
||||
},
|
||||
"theme.SearchModal.errorScreen.titleText": {
|
||||
"message": "无法获取结果",
|
||||
"description": "The title for error screen of search modal"
|
||||
},
|
||||
"theme.SearchModal.errorScreen.helpText": {
|
||||
"message": "你可能需要检查网络连接。",
|
||||
"description": "The help text for error screen of search modal"
|
||||
},
|
||||
"theme.SearchModal.footer.selectText": {
|
||||
"message": "选中",
|
||||
"description": "The explanatory text of the action for the enter key"
|
||||
},
|
||||
"theme.SearchModal.footer.selectKeyAriaLabel": {
|
||||
"message": "Enter 键",
|
||||
"description": "The ARIA label for the Enter key button that makes the selection"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateText": {
|
||||
"message": "导航",
|
||||
"description": "The explanatory text of the action for the Arrow up and Arrow down key"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateUpKeyAriaLabel": {
|
||||
"message": "向上键",
|
||||
"description": "The ARIA label for the Arrow up key button that makes the navigation"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateDownKeyAriaLabel": {
|
||||
"message": "向下键",
|
||||
"description": "The ARIA label for the Arrow down key button that makes the navigation"
|
||||
},
|
||||
"theme.SearchModal.footer.closeText": {
|
||||
"message": "关闭",
|
||||
"description": "The explanatory text of the action for Escape key"
|
||||
},
|
||||
"theme.SearchModal.footer.closeKeyAriaLabel": {
|
||||
"message": "Esc 键",
|
||||
"description": "The ARIA label for the Escape key button that close the modal"
|
||||
},
|
||||
"theme.SearchModal.footer.searchByText": {
|
||||
"message": "搜索提供",
|
||||
"description": "The text explain that the search is making by Algolia"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.noResultsText": {
|
||||
"message": "没有结果:",
|
||||
"description": "The text explains that there are no results for the following search"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.suggestedQueryText": {
|
||||
"message": "试试搜索",
|
||||
"description": "The text for the suggested query when no results are found for the following search"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.reportMissingResultsText": {
|
||||
"message": "认为这个查询应该有结果?",
|
||||
"description": "The text for the question where the user thinks there are missing results"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
|
||||
"message": "请告知我们。",
|
||||
"description": "The text for the link to report missing results"
|
||||
},
|
||||
"theme.SearchModal.placeholder": {
|
||||
"message": "搜索文档",
|
||||
"description": "The placeholder of the input of the DocSearch pop-up modal"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,9 +23,7 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|||
|
||||
但是我们可以更进一步!对于任何实现了 `PartialEq` 的项,可以使用一个 trait 和一个 blanket implementation 将这六行样板代码减少到一行。
|
||||
|
||||
{% code title="neq\_assign.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="neq_assign.rs"
|
||||
pub trait NeqAssign {
|
||||
fn neq_assign(&mut self, new: Self) -> ShouldRender;
|
||||
}
|
||||
|
@ -46,8 +44,6 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
该 trait 称为 `NeqAssign` 是因为如果目标值和新值不相等,它将赋为新值。
|
||||
|
||||
这比简单的实现还要短:
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 拥有 Props 的嵌套子组件
|
||||
|
||||
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
添加 `yew` 到你的依赖库中([这里](https://docs.rs/yew) 可以查看最新版本的 Yew)
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -21,13 +19,9 @@ edition = "2018"
|
|||
yew = { version = "0.14.3", features = ["std_web"] }
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
将这份代码复制到你的 `src/main.rs` 文件中:
|
||||
|
||||
{% code title="src/main.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/main.rs"
|
||||
use yew::prelude::*;
|
||||
|
||||
struct Model {
|
||||
|
@ -72,8 +66,6 @@ fn main() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
这份代码将构建你的称为 `Model` 的 `Component` 根组件,它会显示一个按钮,当你点击它时,`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`,它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
## 运行你的应用程序!
|
||||
|
|
|
@ -38,5 +38,41 @@
|
|||
"sidebar.sidebar.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar sidebar"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
||||
"description": "The label for category Getting Started in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Project Setup": {
|
||||
"message": "Project Setup",
|
||||
"description": "The label for category Project Setup in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Concepts": {
|
||||
"message": "Concepts",
|
||||
"description": "The label for category Concepts in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Components": {
|
||||
"message": "Components",
|
||||
"description": "The label for category Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.wasm-bindgen": {
|
||||
"message": "wasm-bindgen",
|
||||
"description": "The label for category wasm-bindgen in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.HTML": {
|
||||
"message": "HTML",
|
||||
"description": "The label for category HTML in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Services": {
|
||||
"message": "Services",
|
||||
"description": "The label for category Services in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Advanced topics": {
|
||||
"message": "Advanced topics",
|
||||
"description": "The label for category Advanced topics in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar docs"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 拥有 Props 的嵌套子组件
|
||||
|
||||
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -88,7 +88,7 @@ fn main() {
|
|||
最后,将`index.html`文件添加当前应用的根目录下:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -19,7 +19,7 @@ Trunk 基于`index.html`文件构建您的应用,并将其作为配置文件
|
|||
要构建一个简单的 Yew 应用程序,您只需要在项目的根目录下创建`index.html`:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -54,5 +54,57 @@
|
|||
"sidebar.sidebar.category.yew-router": {
|
||||
"message": "yew-router",
|
||||
"description": "The label for category yew-router in sidebar sidebar"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
||||
"description": "The label for category Getting Started in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Project Setup": {
|
||||
"message": "Project Setup",
|
||||
"description": "The label for category Project Setup in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Concepts": {
|
||||
"message": "Concepts",
|
||||
"description": "The label for category Concepts in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.wasm-bindgen": {
|
||||
"message": "wasm-bindgen",
|
||||
"description": "The label for category wasm-bindgen in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Components": {
|
||||
"message": "Components",
|
||||
"description": "The label for category Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.HTML": {
|
||||
"message": "HTML",
|
||||
"description": "The label for category HTML in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Function Components": {
|
||||
"message": "Function Components",
|
||||
"description": "The label for category Function Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Advanced topics": {
|
||||
"message": "Advanced topics",
|
||||
"description": "The label for category Advanced topics in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Migration guides": {
|
||||
"message": "Migration guides",
|
||||
"description": "The label for category Migration guides in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew": {
|
||||
"message": "yew",
|
||||
"description": "The label for category yew in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew-agent": {
|
||||
"message": "yew-agent",
|
||||
"description": "The label for category yew-agent in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew-router": {
|
||||
"message": "yew-router",
|
||||
"description": "The label for category yew-router in sidebar docs"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,9 +23,7 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|||
|
||||
但是我们可以更进一步!对于任何实现了 `PartialEq` 的项,可以使用一个 trait 和一个 blanket implementation 将这六行样板代码减少到一行。
|
||||
|
||||
{% code title="neq\_assign.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="neq_assign.rs"
|
||||
pub trait NeqAssign {
|
||||
fn neq_assign(&mut self, new: Self) -> ShouldRender;
|
||||
}
|
||||
|
@ -46,8 +44,6 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
该 trait 称为 `NeqAssign` 是因为如果目标值和新值不相等,它将赋为新值。
|
||||
|
||||
这比简单的实现还要短:
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 拥有 Props 的嵌套子组件
|
||||
|
||||
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
添加 `yew` 到你的依赖库中([这里](https://docs.rs/yew) 可以查看最新版本的 Yew)
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -21,13 +19,9 @@ edition = "2018"
|
|||
yew = { version = "0.14.3", features = ["std_web"] }
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
将这份代码复制到你的 `src/main.rs` 文件中:
|
||||
|
||||
{% code title="src/main.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/main.rs"
|
||||
use yew::prelude::*;
|
||||
|
||||
struct Model {
|
||||
|
@ -72,8 +66,6 @@ fn main() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
这份代码将构建你的称为 `Model` 的 `Component` 根组件,它会显示一个按钮,当你点击它时,`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`,它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
## 运行你的应用程序!
|
||||
|
|
|
@ -23,9 +23,7 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|||
|
||||
但是我们可以更进一步!对于任何实现了 `PartialEq` 的项,可以使用一个 trait 和一个 blanket implementation 将这六行样板代码减少到一行。
|
||||
|
||||
{% code title="neq\_assign.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="neq_assign.rs"
|
||||
pub trait NeqAssign {
|
||||
fn neq_assign(&mut self, new: Self) -> ShouldRender;
|
||||
}
|
||||
|
@ -46,8 +44,6 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
该 trait 称为 `NeqAssign` 是因为如果目标值和新值不相等,它将赋为新值。
|
||||
|
||||
这比简单的实现还要短:
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 拥有 Props 的嵌套子组件
|
||||
|
||||
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
添加 `yew` 到你的依赖库中([这里](https://docs.rs/yew) 可以查看最新版本的 Yew)
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -21,13 +19,9 @@ edition = "2018"
|
|||
yew = { version = "0.14.3", features = ["std_web"] }
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
将这份代码复制到你的 `src/main.rs` 文件中:
|
||||
|
||||
{% code title="src/main.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/main.rs"
|
||||
use yew::prelude::*;
|
||||
|
||||
struct Model {
|
||||
|
@ -72,8 +66,6 @@ fn main() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
这份代码将构建你的称为 `Model` 的 `Component` 根组件,它会显示一个按钮,当你点击它时,`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`,它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
## 运行你的应用程序!
|
||||
|
|
|
@ -295,5 +295,133 @@
|
|||
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
|
||||
"message": "Toggle navigation bar",
|
||||
"description": "The ARIA label for hamburger menu button of mobile navigation"
|
||||
},
|
||||
"theme.admonition.warning": {
|
||||
"message": "warning",
|
||||
"description": "The default label used for the Warning admonition (:::warning)"
|
||||
},
|
||||
"theme.DocSidebarItem.expandCategoryAriaLabel": {
|
||||
"message": "Expand sidebar category '{label}'",
|
||||
"description": "The ARIA label to expand the sidebar category"
|
||||
},
|
||||
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
|
||||
"message": "Collapse sidebar category '{label}'",
|
||||
"description": "The ARIA label to collapse the sidebar category"
|
||||
},
|
||||
"theme.unlistedContent.title": {
|
||||
"message": "未列出頁",
|
||||
"description": "The unlisted content banner title"
|
||||
},
|
||||
"theme.unlistedContent.message": {
|
||||
"message": "此頁面未列出。搜索引擎不會對其索引,只有擁有直接連結的用戶才能訪問。",
|
||||
"description": "The unlisted content banner message"
|
||||
},
|
||||
"theme.SearchPage.inputPlaceholder": {
|
||||
"message": "在此輸入搜尋字詞",
|
||||
"description": "The placeholder for search page input"
|
||||
},
|
||||
"theme.SearchPage.inputLabel": {
|
||||
"message": "搜尋",
|
||||
"description": "The ARIA label for search page input"
|
||||
},
|
||||
"theme.SearchPage.algoliaLabel": {
|
||||
"message": "透過 Algolia 搜尋",
|
||||
"description": "The ARIA label for Algolia mention"
|
||||
},
|
||||
"theme.SearchPage.fetchingNewResults": {
|
||||
"message": "正在取得新的搜尋結果...",
|
||||
"description": "The paragraph for fetching new search results"
|
||||
},
|
||||
"theme.SearchModal.searchBox.resetButtonTitle": {
|
||||
"message": "清除查詢",
|
||||
"description": "The label and ARIA label for search box reset button"
|
||||
},
|
||||
"theme.SearchModal.searchBox.cancelButtonText": {
|
||||
"message": "取消",
|
||||
"description": "The label and ARIA label for search box cancel button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.recentSearchesTitle": {
|
||||
"message": "最近搜索",
|
||||
"description": "The title for recent searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.noRecentSearchesText": {
|
||||
"message": "沒有最近搜索",
|
||||
"description": "The text when no recent searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
|
||||
"message": "保存這個搜索",
|
||||
"description": "The label for save recent search button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
|
||||
"message": "從歷史記錄中刪除這個搜索",
|
||||
"description": "The label for remove recent search button"
|
||||
},
|
||||
"theme.SearchModal.startScreen.favoriteSearchesTitle": {
|
||||
"message": "收藏",
|
||||
"description": "The title for favorite searches"
|
||||
},
|
||||
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
|
||||
"message": "從收藏列表中刪除這個搜索",
|
||||
"description": "The label for remove favorite search button"
|
||||
},
|
||||
"theme.SearchModal.errorScreen.titleText": {
|
||||
"message": "無法獲取結果",
|
||||
"description": "The title for error screen of search modal"
|
||||
},
|
||||
"theme.SearchModal.errorScreen.helpText": {
|
||||
"message": "你可能需要檢查網路連接。",
|
||||
"description": "The help text for error screen of search modal"
|
||||
},
|
||||
"theme.SearchModal.footer.selectText": {
|
||||
"message": "選中",
|
||||
"description": "The explanatory text of the action for the enter key"
|
||||
},
|
||||
"theme.SearchModal.footer.selectKeyAriaLabel": {
|
||||
"message": "Enter 鍵",
|
||||
"description": "The ARIA label for the Enter key button that makes the selection"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateText": {
|
||||
"message": "導航",
|
||||
"description": "The explanatory text of the action for the Arrow up and Arrow down key"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateUpKeyAriaLabel": {
|
||||
"message": "向上鍵",
|
||||
"description": "The ARIA label for the Arrow up key button that makes the navigation"
|
||||
},
|
||||
"theme.SearchModal.footer.navigateDownKeyAriaLabel": {
|
||||
"message": "向下鍵",
|
||||
"description": "The ARIA label for the Arrow down key button that makes the navigation"
|
||||
},
|
||||
"theme.SearchModal.footer.closeText": {
|
||||
"message": "關閉",
|
||||
"description": "The explanatory text of the action for Escape key"
|
||||
},
|
||||
"theme.SearchModal.footer.closeKeyAriaLabel": {
|
||||
"message": "Esc 鍵",
|
||||
"description": "The ARIA label for the Escape key button that close the modal"
|
||||
},
|
||||
"theme.SearchModal.footer.searchByText": {
|
||||
"message": "搜索提供",
|
||||
"description": "The text explain that the search is making by Algolia"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.noResultsText": {
|
||||
"message": "沒有結果:",
|
||||
"description": "The text explains that there are no results for the following search"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.suggestedQueryText": {
|
||||
"message": "試試搜索",
|
||||
"description": "The text for the suggested query when no results are found for the following search"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.reportMissingResultsText": {
|
||||
"message": "認為這個查詢應該有結果?",
|
||||
"description": "The text for the question where the user thinks there are missing results"
|
||||
},
|
||||
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
|
||||
"message": "請告知我們。",
|
||||
"description": "The text for the link to report missing results"
|
||||
},
|
||||
"theme.SearchModal.placeholder": {
|
||||
"message": "搜索文檔",
|
||||
"description": "The placeholder of the input of the DocSearch pop-up modal"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 指定子結點的型別
|
||||
|
||||
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew))
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -22,13 +20,9 @@ yew = "0.16"
|
|||
wasm-bindgen = "0.2"
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
將下面的模板複製進你的 `src/lib.rs` 檔案:
|
||||
|
||||
{% code title="src/lib.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/lib.rs"
|
||||
use wasm_bindgen::prelude::*;
|
||||
use yew::prelude::*;
|
||||
|
||||
|
@ -80,8 +74,6 @@ pub fn run_app() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
模板會建置名叫 `Model` 的根元件 `Component`,Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
|
||||
|
@ -90,9 +82,7 @@ pub fn run_app() {
|
|||
mkdir static
|
||||
```
|
||||
|
||||
{% code title="index.html" %}
|
||||
|
||||
```bash
|
||||
```bash title="index.html"
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -107,8 +97,6 @@ mkdir static
|
|||
</html>
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 執行你的 App!
|
||||
|
||||
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:
|
||||
|
|
|
@ -38,5 +38,41 @@
|
|||
"sidebar.sidebar.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar sidebar"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
||||
"description": "The label for category Getting Started in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Project Setup": {
|
||||
"message": "Project Setup",
|
||||
"description": "The label for category Project Setup in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Concepts": {
|
||||
"message": "Concepts",
|
||||
"description": "The label for category Concepts in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Components": {
|
||||
"message": "Components",
|
||||
"description": "The label for category Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.wasm-bindgen": {
|
||||
"message": "wasm-bindgen",
|
||||
"description": "The label for category wasm-bindgen in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.HTML": {
|
||||
"message": "HTML",
|
||||
"description": "The label for category HTML in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Services": {
|
||||
"message": "Services",
|
||||
"description": "The label for category Services in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Advanced topics": {
|
||||
"message": "Advanced topics",
|
||||
"description": "The label for category Advanced topics in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar docs"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 指定子結點的型別
|
||||
|
||||
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew))
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -22,13 +20,9 @@ yew = "0.16"
|
|||
wasm-bindgen = "0.2"
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
將下面的模板複製進你的 `src/lib.rs` 檔案:
|
||||
|
||||
{% code title="src/lib.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/lib.rs"
|
||||
use wasm_bindgen::prelude::*;
|
||||
use yew::prelude::*;
|
||||
|
||||
|
@ -80,8 +74,6 @@ pub fn run_app() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
模板會建置名叫 `Model` 的根元件 `Component`,Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
|
||||
|
@ -90,9 +82,7 @@ pub fn run_app() {
|
|||
mkdir static
|
||||
```
|
||||
|
||||
{% code title="index.html" %}
|
||||
|
||||
```bash
|
||||
```bash title="index.html"
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -107,8 +97,6 @@ mkdir static
|
|||
</html>
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 執行你的 App!
|
||||
|
||||
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:
|
||||
|
|
|
@ -4,9 +4,7 @@
|
|||
|
||||
Yew apps 可以用 `web-sys` 或 `stdweb` 編譯。這兩個 creates 都提供了 Rust 與 WebAPIs 的連結。當把 `yew` 加進你的依賴時,請擇其一使用:
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```rust
|
||||
```rust title="Cargo.toml"
|
||||
# 選擇 `web-sys`
|
||||
yew = { version = "0.13", features = ["web_sys"] }
|
||||
|
||||
|
@ -14,8 +12,6 @@ yew = { version = "0.13", features = ["web_sys"] }
|
|||
yew = { version = "0.13", features = ["std_web"] }
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
我們建議使用 `web-sys`,因為他是由 [Rust / Wasm Working Group](https://rustwasm.github.io/) 維護。
|
||||
|
||||
## 使用範例
|
||||
|
|
|
@ -9,9 +9,7 @@
|
|||
|
||||
你的 `Cargo.toml` 必須要設定一個 `cdylib` 的 crate-type。
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -29,8 +27,6 @@ yew = 0.15
|
|||
wasm-bindgen = "0.2"
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 其他的模板
|
||||
|
||||
- [Parcel Template](https://github.com/spielrs/yew-parcel-template) - 由一個社群成員用 [Parcel](https://parceljs.org/) 製作
|
||||
|
|
|
@ -54,5 +54,57 @@
|
|||
"sidebar.sidebar.category.yew-router": {
|
||||
"message": "yew-router",
|
||||
"description": "The label for category yew-router in sidebar sidebar"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
||||
"description": "The label for category Getting Started in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Project Setup": {
|
||||
"message": "Project Setup",
|
||||
"description": "The label for category Project Setup in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Concepts": {
|
||||
"message": "Concepts",
|
||||
"description": "The label for category Concepts in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.wasm-bindgen": {
|
||||
"message": "wasm-bindgen",
|
||||
"description": "The label for category wasm-bindgen in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Components": {
|
||||
"message": "Components",
|
||||
"description": "The label for category Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.HTML": {
|
||||
"message": "HTML",
|
||||
"description": "The label for category HTML in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Function Components": {
|
||||
"message": "Function Components",
|
||||
"description": "The label for category Function Components in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Advanced topics": {
|
||||
"message": "Advanced topics",
|
||||
"description": "The label for category Advanced topics in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.More": {
|
||||
"message": "More",
|
||||
"description": "The label for category More in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.Migration guides": {
|
||||
"message": "Migration guides",
|
||||
"description": "The label for category Migration guides in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew": {
|
||||
"message": "yew",
|
||||
"description": "The label for category yew in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew-agent": {
|
||||
"message": "yew-agent",
|
||||
"description": "The label for category yew-agent in sidebar docs"
|
||||
},
|
||||
"sidebar.docs.category.yew-router": {
|
||||
"message": "yew-router",
|
||||
"description": "The label for category yew-router in sidebar docs"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 指定子結點的型別
|
||||
|
||||
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew))
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -22,13 +20,9 @@ yew = "0.16"
|
|||
wasm-bindgen = "0.2"
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
將下面的模板複製進你的 `src/lib.rs` 檔案:
|
||||
|
||||
{% code title="src/lib.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/lib.rs"
|
||||
use wasm_bindgen::prelude::*;
|
||||
use yew::prelude::*;
|
||||
|
||||
|
@ -80,8 +74,6 @@ pub fn run_app() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
模板會建置名叫 `Model` 的根元件 `Component`,Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
|
||||
|
@ -90,9 +82,7 @@ pub fn run_app() {
|
|||
mkdir static
|
||||
```
|
||||
|
||||
{% code title="index.html" %}
|
||||
|
||||
```bash
|
||||
```bash title="index.html"
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -107,8 +97,6 @@ mkdir static
|
|||
</html>
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 執行你的 App!
|
||||
|
||||
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:
|
||||
|
|
|
@ -27,9 +27,7 @@ html!{
|
|||
|
||||
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<Container>
|
||||
<h4>{ "Hi" }</h4>
|
||||
|
@ -38,11 +36,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="container.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="container.rs"
|
||||
pub struct Container(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -65,15 +59,11 @@ impl Component for Container {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 指定子結點的型別
|
||||
|
||||
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
|
||||
|
||||
{% code title="parent.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="parent.rs"
|
||||
html! {
|
||||
<List>
|
||||
<ListItem value="a" />
|
||||
|
@ -83,11 +73,7 @@ html! {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
{% code title="list.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="list.rs"
|
||||
pub struct List(Props);
|
||||
|
||||
#[derive(Properties)]
|
||||
|
@ -110,5 +96,3 @@ impl Component for List {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
|
|
@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
|
|||
|
||||
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew))
|
||||
|
||||
{% code title="Cargo.toml" %}
|
||||
|
||||
```text
|
||||
```text title="Cargo.toml"
|
||||
[package]
|
||||
name = "yew-app"
|
||||
version = "0.1.0"
|
||||
|
@ -22,13 +20,9 @@ yew = "0.16"
|
|||
wasm-bindgen = "0.2"
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
將下面的模板複製進你的 `src/lib.rs` 檔案:
|
||||
|
||||
{% code title="src/lib.rs" %}
|
||||
|
||||
```rust
|
||||
```rust title="src/lib.rs"
|
||||
use wasm_bindgen::prelude::*;
|
||||
use yew::prelude::*;
|
||||
|
||||
|
@ -80,8 +74,6 @@ pub fn run_app() {
|
|||
}
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
模板會建置名叫 `Model` 的根元件 `Component`,Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
|
||||
|
||||
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
|
||||
|
@ -90,9 +82,7 @@ pub fn run_app() {
|
|||
mkdir static
|
||||
```
|
||||
|
||||
{% code title="index.html" %}
|
||||
|
||||
```bash
|
||||
```bash title="index.html"
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -107,8 +97,6 @@ mkdir static
|
|||
</html>
|
||||
```
|
||||
|
||||
{% endcode %}
|
||||
|
||||
## 執行你的 App!
|
||||
|
||||
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -17,21 +17,17 @@
|
|||
"fmt:write": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.4.3",
|
||||
"@docusaurus/plugin-client-redirects": "^2.4.3",
|
||||
"@docusaurus/plugin-content-docs": "^2.4.3",
|
||||
"@docusaurus/plugin-content-pages": "^2.4.3",
|
||||
"@docusaurus/plugin-google-gtag": "^2.4.3",
|
||||
"@docusaurus/theme-classic": "^2.4.3",
|
||||
"@easyops-cn/docusaurus-search-local": "^0.32.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@svgr/webpack": "^8.0.1",
|
||||
"clsx": "^1.1.1",
|
||||
"docusaurus-plugin-sass": "^0.2.2",
|
||||
"@docusaurus/core": "^3.0.0",
|
||||
"@docusaurus/plugin-client-redirects": "^3.0.0",
|
||||
"@docusaurus/preset-classic": "^3.0.0",
|
||||
"@mdx-js/react": "^3.0.0",
|
||||
"@svgr/webpack": "^8.1.0",
|
||||
"clsx": "^2.0.0",
|
||||
"docusaurus-plugin-sass": "^0.2.5",
|
||||
"file-loader": "^6.2.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"sass": "^1.55.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.69.5",
|
||||
"url-loader": "^4.1.1"
|
||||
},
|
||||
"browserslist": {
|
||||
|
@ -46,16 +42,19 @@
|
|||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "^2.4.3",
|
||||
"@tsconfig/docusaurus": "^2.0.0",
|
||||
"@types/react": "^17.0.43",
|
||||
"@types/react-helmet": "^6.1.6",
|
||||
"@docusaurus/module-type-aliases": "^3.0.0",
|
||||
"@docusaurus/tsconfig": "3.0.0",
|
||||
"@types/react": "^18.2.34",
|
||||
"@types/react-helmet": "^6.1.8",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
||||
"@typescript-eslint/parser": "^5.54.0",
|
||||
"dir-compare": "^4.0.0",
|
||||
"prettier": "^2.8.8",
|
||||
"typescript": "^4.8.3"
|
||||
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
||||
"@typescript-eslint/parser": "^6.9.1",
|
||||
"dir-compare": "^4.2.0",
|
||||
"prettier": "^3.0.3",
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"extends": "@tsconfig/docusaurus/tsconfig.json",
|
||||
"extends": "@docusaurus/tsconfig",
|
||||
"include": ["src/"]
|
||||
}
|
||||
|
|
|
@ -90,7 +90,7 @@ If you would like to start your application with any dynamic properties, you can
|
|||
Finally, add an `index.html` file in the root directory of your app:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -23,7 +23,7 @@ as an entry point.
|
|||
To build a simple Yew app you just need an `index.html` file at the root of your project:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -24,7 +24,7 @@ as an entry point.
|
|||
To build a simple Yew app you just need an `index.html` file at the root of your project:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -99,7 +99,7 @@ fn main() {
|
|||
Now, let's create an `index.html` at the root of the project.
|
||||
|
||||
```html title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head> </head>
|
||||
<body></body>
|
||||
|
|
|
@ -122,7 +122,7 @@ fn main() {
|
|||
Finally, add an `index.html` file in the root directory of your app.
|
||||
|
||||
```html , title=index.html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -105,7 +105,7 @@ fn main() {
|
|||
Now, let's create an `index.html` at the root of the project.
|
||||
|
||||
```html title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head></head>
|
||||
<body></body>
|
||||
|
|
|
@ -115,7 +115,7 @@ fn main() {
|
|||
Finally, add an `index.html` file in the root directory of your app.
|
||||
|
||||
```html , title=index.html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
@ -105,7 +105,7 @@ fn main() {
|
|||
Now, let's create an `index.html` at the root of the project.
|
||||
|
||||
```html title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head></head>
|
||||
<body></body>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version-0.18.0/sidebar": [
|
||||
"docs": [
|
||||
{
|
||||
"collapsed": true,
|
||||
"type": "category",
|
||||
|
@ -12,37 +12,37 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/introduction"
|
||||
"id": "getting-started/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/project-setup/using-trunk"
|
||||
"id": "getting-started/project-setup/using-trunk"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/project-setup/using-wasm-pack"
|
||||
"id": "getting-started/project-setup/using-wasm-pack"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/project-setup/using-cargo-web"
|
||||
"id": "getting-started/project-setup/using-cargo-web"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/build-a-sample-app"
|
||||
"id": "getting-started/build-a-sample-app"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/choose-web-library"
|
||||
"id": "getting-started/choose-web-library"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/examples"
|
||||
"id": "getting-started/examples"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/getting-started/starter-templates"
|
||||
"id": "getting-started/starter-templates"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -58,23 +58,23 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/components/introduction"
|
||||
"id": "concepts/components/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/components/callbacks"
|
||||
"id": "concepts/components/callbacks"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/components/properties"
|
||||
"id": "concepts/components/properties"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/components/children"
|
||||
"id": "concepts/components/children"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/components/refs"
|
||||
"id": "concepts/components/refs"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -85,11 +85,11 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/wasm-bindgen/wasm-bindgen"
|
||||
"id": "concepts/wasm-bindgen/wasm-bindgen"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/wasm-bindgen/web-sys"
|
||||
"id": "concepts/wasm-bindgen/web-sys"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -100,31 +100,31 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/introduction"
|
||||
"id": "concepts/html/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/components"
|
||||
"id": "concepts/html/components"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/elements"
|
||||
"id": "concepts/html/elements"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/events"
|
||||
"id": "concepts/html/events"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/classes"
|
||||
"id": "concepts/html/classes"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/lists"
|
||||
"id": "concepts/html/lists"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/html/literals-and-expressions"
|
||||
"id": "concepts/html/literals-and-expressions"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -135,25 +135,25 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/services/introduction"
|
||||
"id": "concepts/services/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/services/fetch"
|
||||
"id": "concepts/services/fetch"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/services/format"
|
||||
"id": "concepts/services/format"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/router"
|
||||
"id": "concepts/router"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/concepts/agents"
|
||||
"id": "concepts/agents"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -164,11 +164,11 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/advanced-topics/how-it-works"
|
||||
"id": "advanced-topics/how-it-works"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/advanced-topics/optimizations"
|
||||
"id": "advanced-topics/optimizations"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -179,23 +179,23 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/more/debugging"
|
||||
"id": "more/debugging"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/more/css"
|
||||
"id": "more/css"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/more/external-libs"
|
||||
"id": "more/external-libs"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/more/testing"
|
||||
"id": "more/testing"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.18.0/more/roadmap"
|
||||
"id": "more/roadmap"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version-0.19.0/sidebar": [
|
||||
"docs": [
|
||||
{
|
||||
"type": "category",
|
||||
"label": "Getting Started",
|
||||
|
@ -10,15 +10,15 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/getting-started/introduction"
|
||||
"id": "getting-started/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/getting-started/project-setup/using-trunk"
|
||||
"id": "getting-started/project-setup/using-trunk"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/getting-started/project-setup/using-wasm-pack"
|
||||
"id": "getting-started/project-setup/using-wasm-pack"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -26,15 +26,15 @@
|
|||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/getting-started/build-a-sample-app"
|
||||
"id": "getting-started/build-a-sample-app"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/getting-started/examples"
|
||||
"id": "getting-started/examples"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/getting-started/starter-templates"
|
||||
"id": "getting-started/starter-templates"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -50,11 +50,11 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/wasm-bindgen/introduction"
|
||||
"id": "concepts/wasm-bindgen/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/wasm-bindgen/web-sys"
|
||||
"id": "concepts/wasm-bindgen/web-sys"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -66,27 +66,27 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/components/introduction"
|
||||
"id": "concepts/components/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/components/callbacks"
|
||||
"id": "concepts/components/callbacks"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/components/scope"
|
||||
"id": "concepts/components/scope"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/components/properties"
|
||||
"id": "concepts/components/properties"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/components/children"
|
||||
"id": "concepts/components/children"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/components/refs"
|
||||
"id": "concepts/components/refs"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -98,35 +98,35 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/introduction"
|
||||
"id": "concepts/html/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/components"
|
||||
"id": "concepts/html/components"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/elements"
|
||||
"id": "concepts/html/elements"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/events"
|
||||
"id": "concepts/html/events"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/classes"
|
||||
"id": "concepts/html/classes"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/fragments"
|
||||
"id": "concepts/html/fragments"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/lists"
|
||||
"id": "concepts/html/lists"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/html/literals-and-expressions"
|
||||
"id": "concepts/html/literals-and-expressions"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -138,19 +138,19 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/function-components/introduction"
|
||||
"id": "concepts/function-components/introduction"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/function-components/attribute"
|
||||
"id": "concepts/function-components/attribute"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/function-components/pre-defined-hooks"
|
||||
"id": "concepts/function-components/pre-defined-hooks"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/function-components/custom-hooks"
|
||||
"id": "concepts/function-components/custom-hooks"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -158,15 +158,15 @@
|
|||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/agents"
|
||||
"id": "concepts/agents"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/contexts"
|
||||
"id": "concepts/contexts"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/concepts/router"
|
||||
"id": "concepts/router"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -178,15 +178,15 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/advanced-topics/how-it-works"
|
||||
"id": "advanced-topics/how-it-works"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/advanced-topics/optimizations"
|
||||
"id": "advanced-topics/optimizations"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/advanced-topics/portals"
|
||||
"id": "advanced-topics/portals"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -198,31 +198,31 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/debugging"
|
||||
"id": "more/debugging"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/development-tips"
|
||||
"id": "more/development-tips"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/external-libs"
|
||||
"id": "more/external-libs"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/css"
|
||||
"id": "more/css"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/testing"
|
||||
"id": "more/testing"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/roadmap"
|
||||
"id": "more/roadmap"
|
||||
},
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/more/wasm-build-tools"
|
||||
"id": "more/wasm-build-tools"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -238,7 +238,7 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/migration-guides/yew/from-0_18_0-to-0_19_0"
|
||||
"id": "migration-guides/yew/from-0_18_0-to-0_19_0"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -250,7 +250,7 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/migration-guides/yew-agent/from-0_0_0-to-0_1_0"
|
||||
"id": "migration-guides/yew-agent/from-0_0_0-to-0_1_0"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
@ -262,7 +262,7 @@
|
|||
"items": [
|
||||
{
|
||||
"type": "doc",
|
||||
"id": "version-0.19.0/migration-guides/yew-router/from-0_15_0-to-0_16_0"
|
||||
"id": "migration-guides/yew-router/from-0_15_0-to-0_16_0"
|
||||
}
|
||||
],
|
||||
"collapsible": true,
|
||||
|
|
Loading…
Reference in New Issue