strapi/docs/.vuepress/dist/assets/js/26.6608295c.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{213:function(t,s,n){"use strict";n.r(s);var e=n(0),a=Object(e.a)({},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"content"},[t._m(0),t._v(" "),n("p",[t._v("In Strapi, views are markup templates that are compiled on the server into HTML pages.\nIn most cases, views are used as the response to an incoming HTTP request.")]),t._v(" "),n("p",[t._v("By default, Strapi doesn't use views. The philosophy of the framework is to\nseparate the reusable backend application logic from the frontend.")]),t._v(" "),t._m(1),t._v(" "),t._m(2),t._v(" "),t._m(3),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),n("p",[t._v("You don't need to specify the view extension if you use the default one sets in config.")]),t._v(" "),t._m(7),t._v(" "),t._m(8),t._m(9),t._m(10),t._v(" "),t._m(11),t._m(12),t._v(" "),t._m(13),t._v(" "),t._m(14),n("p",[t._v("Strapi supports all of those view engines:")]),t._v(" "),n("ul",[n("li",[n("a",{attrs:{href:"https://github.com/soywiz/atpl.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("atpl"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/olado/doT",target:"_blank",rel:"noopener noreferrer"}},[t._v("doT.js"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/akdubya/dustjs",target:"_blank",rel:"noopener noreferrer"}},[t._v("dust (unmaintained)"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/linkedin/dustjs",target:"_blank",rel:"noopener noreferrer"}},[t._v("dustjs-linkedin (maintained fork of dust)"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/sstephenson/eco",target:"_blank",rel:"noopener noreferrer"}},[t._v("eco"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/baryshev/ect",target:"_blank",rel:"noopener noreferrer"}},[t._v("ect"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/visionmedia/ejs",target:"_blank",rel:"noopener noreferrer"}},[t._v("ejs"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/visionmedia/haml.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("haml"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/9elements/haml-coffee",target:"_blank",rel:"noopener noreferrer"}},[t._v("haml-coffee"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/gregwebs/hamlet.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("hamlet"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/wycats/handlebars.js/",target:"_blank",rel:"noopener noreferrer"}},[t._v("handlebars"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/twitter/hogan.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("hogan"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/codemix/htmling",target:"_blank",rel:"noopener noreferrer"}},[t._v("htmling"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/visionmedia/jade",target:"_blank",rel:"noopener noreferrer"}},[t._v("jade"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/shinetech/jazz",target:"_blank",rel:"noopener noreferrer"}},[t._v("jazz"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/kof/node-jqtpl",target:"_blank",rel:"noopener noreferrer"}},[t._v("jqtpl"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/baryshev/just",target:"_blank",rel:"noopener noreferrer"}},[t._v("JUST"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/chjj/liquor",target:"_blank",rel:"noopener noreferrer"}},[t._v("liquor"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/bestiejs/lodash",target:"_blank",rel:"noopener noreferrer"}},[t._v("lodash"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/satchmorun/mote",target:"_blank",rel:"noopener noreferrer"}},[t._v("mote"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/janl/mustache.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("mustache"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/mozilla/nunjucks",target:"_blank",rel:"noopener noreferrer"}},[t._v("nunjucks"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/jepso/QEJS",target:"_blank",rel:"noopener noreferrer"}},[t._v("QEJS"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/Rich-Harris/Ractive",target:"_blank",rel:"noopener noreferrer"}},[t._v("ractive"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/facebook/react",target:"_blank",rel:"noopener noreferrer"}},[t._v("react"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/paularmstrong/swig",target:"_blank",rel:"noopener noreferrer"}},[t._v("swig"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"http://archan937.github.com/templayed.js/",target:"_blank",rel:"noopener noreferrer"}},[t._v("templayed"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/leizongmin/tinyliquid",target:"_blank",rel:"noopener noreferrer"}},[t._v("liquid"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/malgorithms/toffee",target:"_blank",rel:"noopener noreferrer"}},[t._v("toffee"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/documentcloud/underscore",target:"_blank",rel:"noopener noreferrer"}},[t._v("underscore"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/jeremyruppel/walrus",target:"_blank",rel:"noopener noreferrer"}},[t._v("walrus"),n("OutboundLink")],1)]),t._v(" "),n("li",[n("a",{attrs:{href:"https://github.com/gsf/whiskers.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("whiskers"),n("OutboundLink")],1)])])])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"views"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#views","aria-hidden":"true"}},[this._v("#")]),this._v(" Views")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If you want to activate views, set the "),s("code",[this._v("views")]),this._v(" in "),s("code",[this._v("./config/general.json")]),this._v(".")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("For example, if you want to use "),s("code",[this._v("lodash")]),this._v(" for "),s("code",[this._v(".html")]),this._v(" files and use it by default,\nyou may set up your "),s("code",[this._v("views")]),this._v(" object as below:")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{attrs:{class:"token string"}},[t._v('"views"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{attrs:{class:"token string"}},[t._v('"map"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{attrs:{class:"token string"}},[t._v('"html"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"lodash"')]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{attrs:{class:"token string"}},[t._v('"default"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"html"')]),t._v("\n  "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Views are defined in your application's "),s("code",[this._v("./views")]),this._v(" directory.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"render-a-view"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render-a-view","aria-hidden":"true"}},[this._v("#")]),this._v(" Render a view")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Simply use "),s("code",[this._v("this.render")]),this._v(" instead of "),s("code",[this._v("this.body")]),this._v(" to render a view.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("Using the config we wrote above with "),n("code",[t._v("lodash")]),t._v(" for "),n("code",[t._v(".html")]),t._v(" files and use the "),n("code",[t._v("html")]),t._v("\nextension by default, this example will render "),n("code",[t._v("./views/user.html")]),t._v(" with\nLodash as template engine.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("yield")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("render")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'user'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  firstname"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'John'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  lastname"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Doe'")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Firstname: <% firstname %>"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("br")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Lastname: <% lastname %>"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Here is the same example with the "),s("code",[this._v("jade")]),this._v(" extension, not used by default:")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("yield")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("render")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'user.jade'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  firstname"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'John'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  lastname"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Doe'")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"supported-template-engines"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#supported-template-engines","aria-hidden":"true"}},[this._v("#")]),this._v(" Supported template engines")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("To use a view engine, you should use npm to install it in your project and\nset the "),n("code",[t._v("map")]),t._v(" object in "),n("code",[t._v("strapi.config.views")]),t._v(". For example, if you want to use\n"),n("code",[t._v("swig")]),t._v(" for "),n("code",[t._v(".html")]),t._v(" files and "),n("code",[t._v("hogan")]),t._v(" for "),n("code",[t._v(".md")]),t._v(" files, you may configure the\n"),n("code",[t._v("map")]),t._v(" object as below:")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{attrs:{class:"token string"}},[t._v('"views"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{attrs:{class:"token string"}},[t._v('"map"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{attrs:{class:"token string"}},[t._v('"html"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"swig"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{attrs:{class:"token string"}},[t._v('"md"')]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v('"hogan"')]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])}],!1,null,null,null);a.options.__file="views.md";s.default=a.exports}}]);