eWizard.js documentation

Appearance

Tags
Multipage siteSiteSitemap

Multipage site ​

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

Sites with the multipage subtype are considered multipage sites.

Multipage sites require the <wiz-viewer> tag in the App.vue file to display content.

js
// ./App.vue

<i18n>
  {
    "eng": {

    }
  }
</i18n>

<template>
  <wiz-root style="background: #ffffff; width: 880px;">
    <wiz-viewer></wiz-viewer>
  </wiz-root>
</template>

<script>
export default {
  name: 'wiz-app',
  components: {

  },
};
</script>

<style>
@import 'common/styles/main.css';
</style>

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. Change the subtype to multipage in the site system settings.

    json
    // .ewizard/settings.json

{
    "content": {
        "type": "site",
        "subtype": "multipage"
    }
}

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

    json
    // ./pages.json

{
  "root": {
    "id": "home",
    "template": "/home",
    "name": "Home page"
  },
  "pages": [
    {
      "id": "test",
      "slug": "test",
      "name": "Test page",
      "seo": {
        "meta": {
          "title": "My page 1 title",
          "description": "My page 1 description"
        },
        "sitemap": {
          "changefreq": "always",
          "priority": 1.0
        }
      }
    },
    {
      "id": "about",
      "slug": "about",
      "name": "About page",
      "seo": {
        "hideForSearchEngines": true
      }
    },
    {
      "id": "contacts",
      "slug": "contacts",
      "name": "Contact page",
      "children": [
        {
          "id": "child",
          "slug": "child",
          "name": "Contact child page",
          "children": [
            {
              "id": "sub_child",
              "slug": "sub_child",
              "name": "Contact sub_child page"
            }
          ]
        }
      ]
    },
    {
      "id": "current",
      "path": "/current",
      "name": "Current 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 directory for the home page 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.

    • children array defines the child pages of a specific page.

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

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

json
// ./.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:

json
// ./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:

json
// ./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 you should configure manually.

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

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

Meta title and description ​

You can define the title and description for the <meta> tag of the resulting HTML file in the seo.meta object.

To add the meta title and description to a site page, define the seo.meta.title and seo.meta.description for a specific page in the pages.json file. For example, for the test page:

json
// ./pages.json

{
  "root": {
    "id": "home",
    "template": "/home",
    "name": "Home page"
  },
  "pages": [
    {
      "id": "test",
      "slug": "test",
      "name": "Test page",
      "seo": {
        "meta": {
          "title": "My title",
          "description": "My description"
        }
      }
    }
  ]
}

As a result, after running a production build, the HTML file of the page includes the title and description metadata.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="title" content="My title">
  <meta name="description" content="My description">
  <title>Home page</title>
</head>
<body>
  
</body>
</html>

Hiding a page from search engines ​

You can use the hideForSearchEngines option to prevent a page from being indexed by search engines. As a result, the page appears in the Disallow object of the robots.txt file.

The hideForSearchEngines option has priority over the robots.txt configuration in settings.json. If the same page is added to the allow object of settings.json and has the hideForSearchEngines as true in pages.json, the page is added to the Disallow object of the robots.txt file.

To hide a page from search engines, define the seo.hideForSearchEngines attribute as true for a specific page in the pages.json file. For example, to hide the about page:

json
// ./pages.json

{
  "root": {
    "id": "home",
    "template": "/home",
    "name": "Home page"
  },
  "pages": [
    {
      "id": "about",
      "slug": "about",
      "name": "About page",
      "seo": {
        "hideForSearchEngines": true
      }
    }
  ],
}

As a result, the about page appears in the Disallow object of the robots.txt file for all user agents.

txt
User-agent: *
Disallow: /about

User-agent: Googlebot-Image
Disallow: /about

User-agent: Bingbot
Disallow: /about

User-agent: Mediapartners-Google
Disallow: /about

Sitemap ​

The sitemap.xml file includes the metadata about the site pages for user agents.

You can configure the settings for the sitemap in settings.json and in pages.json. It's useful to generate sitemap settings for the whole site in settings.json and apply settings for specific pages in pages.json.

The sitemap settings in pages.json have priority over settings from settings.json. If the same page has sitemap settings configured in both pages.json and settings.json, the settings from pages.json apply.

You can configure the following sitemap settings in settings.json:

json
// ./settings.json

{
   "seo": {
      "sitemap": {
         "hostname": "https://www.example.com",
         "changefreq": "always",
         "priority": 1.0,
         "lastmod": "2023-05-15T10:30:00+00:00",
      } 
   }
}

  • hostname—the URL of the site domain. Corresponds to the <loc> tag in the sitemap.xml file.

  • changefreq—frequency of the page refreshing. Corresponds to the <changefreq> tag in sitemap.xml. The default value is monthly. It can have the following values:

    • always

    • hourly

    • daily

    • weekly

    • monthly

    • yearly

    • never

    For more information about changefreq values, see sitemap.org protocol.

  • priority—the priority of the page relative to other pages. The range can vary from 0.0 to 1.0. The default value is 0.5. Corresponds to the <priority> tag in sitemap.xml

  • lastmod—the date when the page was last modified in the W3C date and time format. The default value is the date and time when the development or production build was generated. Corresponds to the <lastmod> tag in sitemap.xml.

After running a development or production build, the sitemap.xml is generated based on the settings.json and pages.json configurations.

For example, for the settings.json file with the following settings:

json
// ./settings.json

{
   "seo": {
      "sitemap": {
         "hostname": "https://www.example.com",
         "changefreq": "always",
         "priority": 1.0,
         "lastmod": "2023-05-15T10:30:00+00:00",
      } 
   }
}

The following sitemap.xml is generated:

xml
<!-- sitemap.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.example.com</loc>
      <lastmod>2023-05-15T10:30:00+00:00</lastmod>
      <changefreq>always</changefreq>
      <priority>1.0</priority>
   </url>
</urlset>

Hash and HTML modes for Vue router ​

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

History mode works only for multipage site production builds. If you plan to use history mode on your own server, make sure to configure it.

Sites with the multipage subtype use all pages.json pages to display content in production builds.

To change to the HTML5 mode:

json
// ./settings.json

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

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

Address bar in the history mode

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 pages <template> markup.

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

    As best practice, use only the v-goto directive 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:

    html
    <!-- ./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/.

    sh
    wiz dev --live