【问题标题】:How can I use vue.js and wordpress rest api to template a specific page?如何使用 vue.js 和 wordpress rest api 模板化特定页面?
【发布时间】:2016-05-07 02:34:35
【问题描述】:
有谁知道如何扩展此主题 (https://github.com/gilbitron/wp-rest-theme) 以主题特定页面?例如,我想创建一个名为“菜单”的页面,该页面有一个独特的导航,可以点击进入早餐、午餐、晚餐等子页面,而无需重新加载。我习惯于通过 page-{slug}.php 创建单独的 .php 文件来根据我的喜好创建主题特定页面 - 是否有使用 vue.js 和 wp rest api 的等效工作流程?
而不是使用 page-menu.php 来自定义 /menu 页面,我想我需要创建类似 menu-page.vue 文件并添加一个自定义方法来专门调用该页面以便模板它。
我找不到此过程的任何示例。任何帮助将不胜感激。
【问题讨论】:
标签:
vue.js
wordpress-rest-api
【解决方案1】:
我所做的是使用高级自定义字段添加一个字段,该字段确定页面应使用的模板。我将显示包装在一个名为 PageContent 的组件中,如下所示:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
路由器:
'/:slug': {
component: PageContent,
name: 'Page'
}
因此,当有人导航到该路线时,我会根据 slug 参数获取页面。 page 变量然后通过 ACF 具有 template 属性,该属性确定要显示的组件并默认为通用页面:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
您需要 WP JSON API 插件以及将 ACF 数据添加到 json 的 ACF 插件
My site 使用此设置,如果您有更多问题,很乐意分享更多代码。