如何使用vue.js和wordpress rest api來模板特定頁面？

Question

有沒有人知道如何擴大這個主題（https://github.com/gilbitron/wp-rest-theme）爲了主題特定的網頁？例如，我想創建一個名爲「菜單」的頁面，該頁面具有獨特的導航功能，可以在沒有重新加載的情況下點擊兒童頁面早餐，午餐，晚餐等。我習慣於通過page- {slug} .php創建單獨的.php文件來根據我的喜好來設置特定的頁面。是否有一個使用vue.js和wp rest api的等效工作流程？

而不是使用page-menu.php來定製/菜單頁面，我想我會需要創建一個類似menu.page.vue文件的東西，並添加一個自定義方法來專門調用該頁面以便模板它。

我找不到這個過程的任何例子。任何幫助將不勝感激。

Answer 1

我所做的是使用高級自定義字段添加一個字段，以確定頁面應該使用哪個模板。我裹在一個叫做PageContent組件看起來像這樣顯示：

<div :is="page.template" 
    :page="page" 
    v-if="!$loadingRouteData" 
    transition="fade" 
    transition-mode="out-in"> 
</div> 

路由器：

'/:slug': { 
    component: PageContent, 
    name: 'Page' 
    } 

因此，當有人瀏覽到這條路線，我取基礎上，slug PARAM頁面。然後將page變量具有通過ACF一個template屬性，它確定部件來顯示和默認爲一個通用的頁：

if(pages[0].acf.template){ 
    return pages[0].acf.template; 
} 
return 'page' 

您需要WP JSON API插件以及ACF的插件，增加了ACF數據到json

My site使用此設置，如果您有更多問題，請高興分享更多的代碼。