{"id":13549410,"url":"https://github.com/soarez/express-ejs-layouts","last_synced_at":"2025-05-16T06:03:36.147Z","repository":{"id":3141446,"uuid":"4170559","full_name":"soarez/express-ejs-layouts","owner":"soarez","description":"Layout support for ejs in express.","archived":false,"fork":false,"pushed_at":"2024-03-11T14:21:17.000Z","size":155,"stargazers_count":304,"open_issues_count":10,"forks_count":68,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-10T01:46:04.850Z","etag":null,"topics":["ejs","express","html","javascript","rendering"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soarez.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-04-28T21:51:32.000Z","updated_at":"2025-05-03T01:49:09.000Z","dependencies_parsed_at":"2024-06-18T12:27:49.676Z","dependency_job_id":"f174e568-adf8-4794-987f-0547bc6b0263","html_url":"https://github.com/soarez/express-ejs-layouts","commit_stats":{"total_commits":63,"total_committers":19,"mean_commits":"3.3157894736842106","dds":0.5396825396825398,"last_synced_commit":"b1bded1be7cebf4c40e44d008f80d0c6d5d0f82e"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soarez%2Fexpress-ejs-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soarez%2Fexpress-ejs-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soarez%2Fexpress-ejs-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soarez%2Fexpress-ejs-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soarez","download_url":"https://codeload.github.com/soarez/express-ejs-layouts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478160,"owners_count":22077675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ejs","express","html","javascript","rendering"],"created_at":"2024-08-01T12:01:21.579Z","updated_at":"2025-05-16T06:03:36.092Z","avatar_url":"https://github.com/soarez.png","language":"JavaScript","readme":"# express-ejs-layouts\n\n\u003e Layout support for ejs in express\n\n[![npm version](https://badge.fury.io/js/express-ejs-layouts.svg)](https://badge.fury.io/js/express-ejs-layouts)\n[![build status](https://secure.travis-ci.org/soarez/express-ejs-layouts.svg)](http://travis-ci.org/Soarez/express-ejs-layouts)\n\n## Installation\n\n```sh\n$ npm install express-ejs-layouts\n```\n\n## Example\n\nCheck the example folder.\n\n1. `git clone https://github.com/soarez/express-ejs-layouts.git`\n2. `cd express-ejs-layouts`\n3. `npm install`\n4. `node example`\n5. Open http://localhost:3000/\n\n## Usage\n\n```javascript\nvar express = require('express');\nvar expressLayouts = require('express-ejs-layouts');\n\nvar app = express();\n\napp.set('view engine', 'ejs');\n\napp.use(expressLayouts);\n\napp.get('/', function(req, res) {\n  var locals = {\n    title: 'Page Title',\n    description: 'Page Description',\n    header: 'Page Header'\n  };\n  res.render('the-view', locals);\n});\n\napp.listen(3000);\n```\n\n\n### `contentFor`\n\nA view\n\n```ejs\ntyler\n\u003c%- contentFor('foo') %\u003e\nclub\n\u003c%- contentFor('bar') %\u003e\nfight\n```\n\nWith a layout\n\n```ejs\n\u003c%-bar%\u003e \u003c%-foo%\u003e\n\u003c%-body%\u003e\n```\n\nRenders\n\n```\nfight club\ntyler\n```\n\n\nAs another example, consider this view:\n\n```html\nfoo\n\u003c%- contentFor('pageSectionA') %\u003e\nbar\n\u003c%- contentFor('pageSectionB') %\u003e\nbaz\n```\n\nUsing it with this layout:\n\n```html\n\u003cdiv class=\"header\"\u003e\u003c%- pageSectionA %\u003e\u003c/div\u003e\n\u003cdiv class=\"body\"\u003e\u003c%- body %\u003e\u003c/div\u003e\n\u003cdiv class=\"footer\"\u003e\u003c%-defineContent('pageSectionB')%\u003e\u003c/div\u003e\n```\n\nWill render:\n\n```html\n\u003cdiv class=\"header\"\u003ebar\u003c/div\u003e\n\u003cdiv class=\"body\"\u003efoo\u003c/div\u003e\n\u003cdiv class=\"footer\"\u003ebaz\u003c/div\u003e\n```\n\nNotice that the difference between using `\u003c%- pageSectionA %\u003e` and `\u003c%-defineContent('pageSectionA')%\u003e` is that the former will generate an error if the view doesn't define content for this section.\n\nThis can be used not only to fill large layout parts, but also for simple stuff, like setting page title:\n\nWith this layout:\n\n```ejs\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003e\u003c%- title %\u003e\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c%- body %\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can set page title by:\n\n```html\nfoo\n\u003c%- contentFor('title') %\u003e\nFoo Page\n```\n\nOr if you would rather set title at the beginning of the view:\n\n```html\n\u003c%- contentFor('title') %\u003eFoo Page\u003c%- contentFor('body') %\u003e\nfoo\n```\n\n### Script blocks extraction\n\nIf you like to place all the script blocks at the end, you can do it like this:\n\n```javascript\napp.set(\"layout extractScripts\", true)\n```\n\nA view\n\n```html\nsomething\u003cscript\u003esomejs\u003cscript\u003esomething\n```\n\nWith a layout\n\n```ejs\n\u003cbody\u003e\n  \u003c%- body %\u003e\n  \u003c%- script %\u003e\n\u003c/body\u003e\n```\n\nRenders\n\n```html\n\u003cbody\u003e\n  somethingsomething\n  \u003cscript\u003esomejs\u003cscript\u003e\n\u003c/body\u003e\n```\n\nEnabling individually:\n\n```javascript\nreq.render('view', { extractScripts: true })\n```\n\n\nWhen the `\"layout extractScripts\"` option is activated, scripts defined in views will be extracted (won't be a part of `body`) and will be available for use in the layout through the variable `scripts`.\n\nAnother example:\n\nThis view:\n\n```html\n\u003cscript src=\"/b.js\" /\u003e\n\u003cdiv\u003efoo\u003c/div\u003e\n\u003cscript src=\"/a.js\" /\u003e\n\u003cdiv\u003ebar\u003c/div\u003e\n\u003cscript src=\"/c.js\" /\u003e\n```\n\nUsed with this layout:\n\n```html\n\u003cdiv class=\"main\"\u003e\n\u003c%- body %\u003e\n\u003c/div\u003e\n\u003c!-- place the scripts at the end of the html page --\u003e\n\u003c%- script %\u003e\n```\n\nWill render:\n\n```html\n\u003cdiv class=\"main\"\u003e\n\u003cdiv\u003efoo\u003c/div\u003e\n\u003cdiv\u003ebar\u003c/div\u003e\n\u003c/div\u003e\n\u003c!-- place the scripts at the end of the html page --\u003e\n\u003cscript src=\"/b.js\" /\u003e\n\u003cscript src=\"/a.js\" /\u003e\n\u003cscript src=\"/c.js\" /\u003e\n```\n\n### Style blocks extraction\n\nWorks exactly like script blocks extraction except:\n\n* Supported tags are `\u003clink rel=\"stylesheet\" …\u003e` and `\u003cstyle …\u003e`\n* The option is named `extractStyles`\n* The template variable in layout is `style`\n\n### Meta blocks extraction\n\nWorks exactly like script blocks extraction except:\n\n* Supported tags are `\u003cmeta …\u003e` and `\u003cmeta …/\u003e`\n* The option is named `extractMetas`\n* The template variable in layout is `meta`\n\n### Set custom default layout\n\nBy default 'layout.ejs' is used. If you want to specify your custom\nlayout (e.g. 'layouts/layout.ejs'), just set `layout` property in\nexpress app settings.\n\n```\napp.set('layout', 'layouts/layout');\n```\n\n### Set custom layout for single render\n\nJust pass `layout` as render locals object.\n\n```\napp.get('/', function(req, res) {\n  res.render('the-view', { layout: 'specific-layout' });\n});\n```\n### Set no layout for single render\n\nJust pass `layout: false` as render locals object.\n\n```\napp.get('/', function(req, res) {\n  res.render('the-view', { layout: false });\n);\n```\n\n## Optional sections\n\nIn a layout, you can have optional sections using `defineContent`:\nUnspecified section content defaults to `''`.\n\n```ejs\n1\n\u003c%-defineContent('a')%\u003e\n2\n\u003c%-defineContent('b')%\u003e\n3\n```\n\nwith a view:\n\n```ejs\n\u003c%- contentFor('a') %\u003e\n1.5\n```\n\nwill render:\n\n```ejs\n1\n1.5\n2\n3\n```\n\n## Running tests\n\nClone the repo and run:\n\n```sh\n$ npm test\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoarez%2Fexpress-ejs-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoarez%2Fexpress-ejs-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoarez%2Fexpress-ejs-layouts/lists"}