-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0d39f6d
commit 310414c
Showing
4 changed files
with
138 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
# Page Data and Page Meta | ||
|
||
For scalability reasons, VuePress bind page data together with page component and make them async. This means that data and component for every page is only loaded once the page is being visited, and you can only synchronously access current page data. | ||
|
||
But there are some times that you want to access page data in other pages, e.g.: You need to access their title to display them in navbar and sidebar, and for blogging feature you may need to synchronously access their date and tags to display them in blog index page. So we add page meta concept for it. | ||
|
||
On node side, `data` and `meta` property `Page` object are page data and page meta, and you can access and modify them in plugin API lifecycle hooks like `onInitialized` and `extendsPage`: | ||
|
||
```js | ||
export default { | ||
extendsPage: (page) => { | ||
if (page.path === '/') { | ||
// set page data | ||
page.data = { ...page.data, foo: 'bar1' } | ||
|
||
// set page meta | ||
page.meta = { ...page.meta, bar: 'baz1' } | ||
} | ||
if (page.path === '/zh/') { | ||
// set page data | ||
page.data = { ...page.data, foo: 'bar2' } | ||
|
||
// set page meta | ||
page.meta = { ...page.meta, bar: 'baz2' } | ||
} | ||
}, | ||
} | ||
``` | ||
|
||
At client, you can call `resolve` from `@vuepress/client` to access page meta and call `usePageData` from `@vuepress/client` to access current page data: | ||
|
||
```js | ||
import { resolve, usePageData } from '@vuepress/client' | ||
|
||
// you can access any page meta | ||
resolve('/') // { path: "/", meta: { bar: "baz1", ... } } | ||
resolve('/zh/') // { path: "/zh/", meta: { bar: "baz2", ... } } | ||
|
||
// a computed page data | ||
const pageData = usePageData() | ||
|
||
// when you are at `/` | ||
pageData.value // { foo: "bar1", ... } | ||
|
||
// when you are at `/zh/` | ||
pageData.value // { foo: "bar2", ... } | ||
``` | ||
|
||
You should try to store data of pages in page data as first choice, and only use page meta when the data need to be accessed globally or in other pages. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
# 页面数据和页面元数据 | ||
|
||
出于可扩展性的原因,VuePress将页面数据与页面组件绑定在一起,并使它们异步加载。这意味着每个页面的数据和组件仅在访问页面时加载,并且你只能同步访问当前页面的数据。 | ||
|
||
但有时候你想在其他页面中访问页面数据,例如:你需要访问它们的标题以在导航栏和侧边栏中显示它们,在博客功能中,你可能需要同步访问它们的日期和标签以在博客索引页面中显示它们。因此,我们添加了页面元数据的概念。 | ||
|
||
在 Node 一侧,`data` 和 `meta` 属性是 `Page` 对象的页面数据和页面元数据,你可以在插件 API 生命周期钩子(如 `onInitialized` 和 `extendsPage`)中访问和修改它们: | ||
|
||
```js | ||
export default { | ||
extendsPage: (page) => { | ||
if (page.path === '/') { | ||
// 设置页面数据 | ||
page.data = { ...page.data, foo: 'bar1' } | ||
|
||
// 设置页面元数据 | ||
page.meta = { ...page.meta, bar: 'baz1' } | ||
} | ||
if (page.path === '/zh/') { | ||
// 设置页面数据 | ||
page.data = { ...page.data, foo: 'bar2' } | ||
|
||
// 设置页面元数据 | ||
page.meta = { ...page.meta, bar: 'baz2' } | ||
} | ||
}, | ||
} | ||
``` | ||
|
||
在客户端,你可以从 `@vuepress/client` 中调用 `resolve` 来访问页面元数据,调用 `usePageData` 来访问当前页面数据: | ||
|
||
```js | ||
import { resolve, usePageData } from '@vuepress/client' | ||
|
||
// 你可以访问任何页面元数据 | ||
resolve('/') // { path: "/", meta: { bar: "baz1", ... } } | ||
resolve('/zh/') // { path: "/zh/", meta: { bar: "baz2", ... } } | ||
|
||
// 计算出的页面数据 | ||
const pageData = usePageData() | ||
|
||
// 当你在 `/` 页面时 | ||
pageData.value // { foo: "bar1", ... } | ||
|
||
// 当你在 `/zh/` 页面时 | ||
pageData.value // { foo: "bar2", ... } | ||
``` | ||
|
||
你应该尽可能将页面的数据存储在页面数据中作为首选,只有在需要全局或其他页面访问数据时才使用页面元数据。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters