Nuxt storyblok

Nuxt storyblok

七月 15, 2018

Nuxt & storyblok

通常碰到不會的新技術都會找個東西來實做看看,從過程中來了解他。

在過程中發現了這東西storyblok他可以管理你的內容,像是內容管理裝置的東西,這樣如果跟nuxt連動就可以完成內容發布的blog了。

blog初始樣貌

先至 nuxt了解install方法

npx create-nuxt-app <my-project>創建專案

創建過過程有一些選項看自己選哲是否需要。

接下來介紹整個會用到的資料夾components layouts pages

1. components

就是原本uve的components 的概念,把你寫的components都放在這需要引用再用

1
import XXX from '@/components/XXX/'

就可以引用了 prop用法也跟vue一樣

2. layouts

這裡的layouts 有點像vue的App.vue的概念 它包含了整個基底與Vue 實俐,virtual DOM….等(詳細可參考這裡)

在layout可以做一些像是headbar或是footer的東西不會在虛擬路由中重複一直載入

3. pages

vue 在實作虛擬路由需要搭踏一個components而在這直接新增x.vue在PAGES資料夾中就是一個頁面+路由把他從components中分離出來。

若名稱前面加上_就可以以動態路由的方式被宣告。

4. blog雛形

怎麼打造每個人由不同見解與方法。

這裡是我的github可以參考。

如何搭配storyblok 做管理

To be continued…