【问题标题】: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 使用此设置,如果您有更多问题,很乐意分享更多代码。

    【讨论】:

    • 你需要分享这个。你需要! :-) 好东西
    猜你喜欢
    • 2016-12-01
    • 2017-08-31
    • 1970-01-01
    • 2022-08-21
    • 1970-01-01
    • 2018-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多