Site with multiple pages | Viseven Help Center

A multi-page site created with eWizard.js and eWizard CLI uses the Vue.js router library. A multi-page site has two or more pages with navigation between them. You can configure the site structure in the pages.json file.

Configure the site structure

You can configure the site structure in the following way:

1. Initialize the site project.

Use the scaffolding template.
Download the source directory of the landing page project created in the eWizard platform.
Use the landing page brief in the eWizard platform.

2. Configure the following fields in the ./pages.json file of your project root directory:

{
  "root": {
    "id": "home",
    "template": "/home",
    "name": "Home page"
  },
  "pages": [
    {
      "id": "test",
      "name": "Test page"
    },
    {
      "id": "about",
      "name": "About page"
    },
    {
      "id": "contacts",
      "name": "Contact page",
      "children": [
        {
          "id": "child",
          "name": "Child page"
        }
      ]
    }
  ],
  "errors": [
    {
      "id": "404",
      "name": "Error page"
    }
  ]
}

id is the unique page identifier. The ID is used for navigation between pages. The ID must be unique for each page.
template is the path to the page component. If the template isn't defined, eWizard.js searches the components in the id subdirectory of the pages directory: [PATH TO PAGES DIRECTORY]/[ID]/index.vue. For example, the for the home page the directory is ./pages/home/index.vue.
name is the readable name displayed in eWizard Editor. For example, the Home page.
slug is the last part of the URL address that serves as a unique identifier of the page. The slug can be the same on different nesting levels. For example, the about and contacts pages can't have the same slug, but the child and contacts pages can have the same slug.
children array defines the child pages of a specific page.

3. Add the site pages and their directories to the ./pages directory.

To change the path to the ./pages directory, add the path to this directory to the ./.ewizard/settings.json system settings file.

// ./.ewizard/settings.json

{
  "path": {
      "pages": "common/pages",
  }
}

Home page

You can configure the home page of the site in the root object of the pages.json file.

For example:

// ./pages.json

{
  "root": {
    "id": "home",
    "name": "Home page"
  }
}

Error page

Use the errors object to configure what pages are displayed when an error occurs.

For example:

// ./pages.json

{
  "errors": [
    {
      "id": "404",
      "name": "Error page"
    }
  ]
}

• id is the HTML error code. For example, 404 or 502.

eWizard supports automatic transfer only for the 404 error. Other error transfers should be configured manually.

• name is the name of the page displayed in the browser.

As best practice, use the wiz dev --live server for local development, because it includes all the required changes.

Hash and HTML modes for Vue router

You can use the navigation object to switch between HTML5 history and hash modes in Vue router.

If you plan to use history mode on your own server, make sure to configure it.

To change to HTML5 mode:

// ./settings.json

{
  "navigation": {
    "router": {
      "mode": "history"
    }
  }
}

When the history mode is on, # isn't displayed in the address bar of the browser.

If navigation isn't defined, the hash mode applies.

Configure a site page for eWizard Editor

To configure a site page:

1. Add the navigation links to the page's <template> markup.

You can use the v-goto action, the goTo method, or the <router-link> tag to add navigation links.

As best practice, use only the v-goto action for the navigation links to work in eWizard Editor.

For example, the Home page markup with links to other site pages: About, Contacts, and Current:

<!-- ./pages/home/index.vue -->

<template>
<div>
  <div v-goto="'about'">About</div>
  <div @click="$navigator.goTo('contacts')">Contacts</div>
  <router-link to="/current">Current</router-link>
  <wiz-block></wiz-block>
  <wiz-image></wiz-image>
  <wiz-text></wiz-text>
</div>
</template>

2. Build the site using one of the wiz dev commands.

For example, start the live reload server to view it in the browser: http://localhost:3000/.

wiz dev --live