Skip to main content

Custom Document Template

shuvi generate HTML by ejs engine. It works both spa and ssr mode.

// default template
<!doctype html>
<html<%- htmlAttrs %>>
<head>
  <%- head %>
</head>
<body>
  <%- main %>
  <%- script %>
</body>
</html>

Intervention HTML with handle documentProps, Keyof documentProps is htmlAttrs, headTags, mainTags, scriptTags, all is ejs variables.

handle documentProps in function onDocumentProps and modifyHtml.

Detail type of onDocumentProps is here

How to Custom Document Template​

There is way to modify default ejs template, add src/document.ejs:

// /src/document.ejs
<!doctype html>
<html<%- htmlAttrs %>>
<head>
  <%- head %>
</head>
<body test="<%= test %>">
  <%- main %>
  <%- script %>
</body>
</html>

test="<%= test %>" is new variable.

To create a custom error page you can create a src/document.js file. document.js collaboratively with document.ejs:

// src/document.js
export function getTemplateData() {
  return { test: 1 }; // inject data to ejs template
}

export function onDocumentProps(documentProps, context) {
  console.log('context: ', context);
  documentProps.headTags.push({ // modify documentProps 
    tagName: "meta",
    attrs: {
      name: "test",
      content: "1"
    }
  });

  return documentProps;
}

document.ejs and document.js can work independently or collaboratively. In the example, they work collaboratively.

render results:

// html
<!doctype html>
<html>
<head>
<meta name="test" content="1">    
</head>
<body test="1">
</body>
</html>