soarez / Express Ejs Layouts
Licence: mit
Layout support for ejs in express.
Stars: ✭ 243
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Express Ejs Layouts
Hibiki
🤖 The best all-in-one Discord bot! Automod, fun, music, utilities, and more. Customizable, easy-to-use, and fully translatable.
Stars: ✭ 86 (-64.61%)
Mutual labels: express, ejs
Nodetyped
Node.js Express Startup Seed with ES6, Typescript, SCSS, EJS, Nodemon, Bootstrap 4, TSLint, TypeDoc
Stars: ✭ 69 (-71.6%)
Mutual labels: express, ejs
Sharex Upload Server
AKA ShareS - Feature full & Stable ShareX and file server in node. Includes images, videos, code, text, markdown rendering, password protected uploads, logging via discord, administration through Discord, url shortening, and a full front end. Use standalone or via reverse proxy
Stars: ✭ 180 (-25.93%)
Mutual labels: express, ejs
Asm Dom
A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
Stars: ✭ 2,604 (+971.6%)
Mutual labels: rendering
Lugdunum
[UNMAINTAINED] A modern cross-platform 3D engine built with Vulkan, glTF 2.0 and modern C++14.
Stars: ✭ 230 (-5.35%)
Mutual labels: rendering
Tensei
🚀 Content management and distribution with a touch of elegance.
Stars: ✭ 217 (-10.7%)
Mutual labels: express
Filmsys
一个使用Vue全家桶和后台Express框架结合Mysql数据库搭建起来的移动端电影售票和管理系统，实现了热映、即将上映、电影和影院全局搜索、评论、选座、购票、点赞、收藏、订单等一系列购票和管理流程功能
Stars: ✭ 217 (-10.7%)
Mutual labels: express
Express Basic Auth
Plug & play basic auth middleware for express
Stars: ✭ 241 (-0.82%)
Mutual labels: express
Awesome Express
这个仓库主要是收集 Express 好用的中间件、新闻资讯、网站等，这是我在基于Express开发web应用过程中搜集到的一些插件和看到的一些好的内容。
Stars: ✭ 241 (-0.82%)
Mutual labels: express
Neo4j Movies Template
A Neo4j movies React application with backends in Python/Flask and Node/Express.
Stars: ✭ 228 (-6.17%)
Mutual labels: express
Openapi Comment Parser
⚓️ JSDoc Comments for the OpenAPI Specification
Stars: ✭ 221 (-9.05%)
Mutual labels: express
Express Typescript
Express + TypeScript + Boilerplate for Web / API App
Stars: ✭ 230 (-5.35%)
Mutual labels: express
Openapi Backend
Build, Validate, Route, Authenticate and Mock using OpenAPI
Stars: ✭ 216 (-11.11%)
Mutual labels: express
Sinn Server
an node server for sinn,that based on of nodejs,koa2,mongoose,docker,nginx,es6/7,Resful API,阿里云 http://servertest.boyagirl.com/
Stars: ✭ 228 (-6.17%)
Mutual labels: ejs
Render Py
A software 3D renderer written in Python. (Purely educational)
Stars: ✭ 240 (-1.23%)
Mutual labels: rendering
express-ejs-layouts
Layout support for ejs in express
Installation
$ npm install express-ejs-layouts
Example
Check the example folder.
git clone https://github.com/soarez/express-ejs-layouts.gitcd express-ejs-layoutsnpm installnode example- Open http://localhost:3000/
Usage
var express = require('express');
var expressLayouts = require('express-ejs-layouts');
var app = express();
app.set('view engine', 'ejs');
app.use(expressLayouts);
app.get('/', function(req, res) {
var locals = {
title: 'Page Title',
description: 'Page Description',
header: 'Page Header'
};
res.render('the-view', locals);
});
app.listen(3000);
contentFor
A view
tyler
<%- contentFor('foo') %>
club
<%- contentFor('bar') %>
fight
With a layout
<%-bar%> <%-foo%>
<%-body%>
Renders
fight club
tyler
As another example, consider this view:
foo
<%- contentFor('pageSectionA') %>
bar
<%- contentFor('pageSectionB') %>
baz
Using it with this layout:
<div class="header"><%- pageSectionA %></div>
<div class="body"><%- body %></div>
<div class="footer"><%-defineContent('pageSectionB')%></div>
Will render:
<div class="header">bar</div>
<div class="body">foo</div>
<div class="footer">baz</div>
Notice that the difference between using <%- pageSectionA %> and <%-defineContent('pageSectionA')%> is that the former will generate an error if the view doesn't define content for this section.
Script blocks extraction
If you like to place all the script blocks at the end, you can do it like this:
app.set("layout extractScripts", true)
A view
something<script>somejs<script>something
With a layout
<body>
<%- body %>
<%- script %>
</body>
Renders
<body>
somethingsomething
<script>somejs<script>
</body>
Enabling invididually:
req.render('view', { extractScripts: true })
When 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.
Another example:
This view:
<script src="/b.js" />
<div>foo</div>
<script src="/a.js" />
<div>bar</div>
<script src="/c.js" />
Used with this layout:
<div class="main">
<%- body %>
</div>
<!-- place the scripts at the end of the html page -->
<%- script %>
Will render:
<div class="main">
<div>foo</div>
<div>bar</div>
</div>
<!-- place the scripts at the end of the html page -->
<script src="/b.js" />
<script src="/a.js" />
<script src="/c.js" />
Style blocks extraction
Works exactly like script blocks extraction except:
- Supported tags are
<link rel="stylesheet" …>and<style …> - The option is named
extractStyles - The template variable in layout is
style
Meta blocks extraction
Works exactly like script blocks extraction except:
- Supported tags are
<meta …>and<meta …/> - The option is named
extractMetas - The template variable in layout is
meta
Set custom default layout
By default 'layout.ejs' is used. If you want to specify your custom
layout (e.g. 'layouts/layout.ejs'), just set layout property in
express app settings.
app.set('layout', 'layouts/layout');
Set custom layout for single render
Just pass layout as render locals object.
app.get('/', function(req, res) {
res.render('the-view', { layout: 'specific-layout' });
);
Set no layout for single render
Just pass layout: false as render locals object.
app.get('/', function(req, res) {
res.render('the-view', { layout: false });
);
Optional sections
In a layout, you can have optional sections using defineContent:
Unspecified section content defaults to ''.
1
<%-defineContent('a')%>
2
<%-defineContent('b')%>
3
with a view:
<%- contentFor('a') %>
1.5
will render:
1
1.5
2
3
Running tests
Clone the repo and run:
$ npm test
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].