All Projects → chrisyip → Koa Pug

chrisyip / Koa Pug

Licence: mit
A Pug middleware for Koa

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

Projects that are alternatives of or similar to Koa Pug

Awsm.css
Simple CSS library for semantic HTML markup
Stars: ✭ 1,288 (+1126.67%)
Mutual labels:  pug
Koa Oai Router
Koa Router, based on OpenAPI, Swagger and Json Schema.
Stars: ✭ 97 (-7.62%)
Mutual labels:  koa
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+1208.57%)
Mutual labels:  pug
Gracejs
A Nodejs BFF framework, build with koa2(基于koa2的标准前后端分离框架)
Stars: ✭ 1,302 (+1140%)
Mutual labels:  koa
Fontend
使用Node、Vue、ElementUI、iViewUI,验证码等等搭建一个综合性网站(含后台管理系统)
Stars: ✭ 97 (-7.62%)
Mutual labels:  koa
Luoo.spider
🤖 A spider and server for Luoo.qy
Stars: ✭ 99 (-5.71%)
Mutual labels:  koa
Service Tools
Prepare your Node.js application for production
Stars: ✭ 89 (-15.24%)
Mutual labels:  koa
Cottage
Simple, fast HTTP router on koa.js.
Stars: ✭ 103 (-1.9%)
Mutual labels:  koa
Koa Tree Router
high performance router for Koa
Stars: ✭ 97 (-7.62%)
Mutual labels:  koa
Koa Sslify
Enforce HTTPS in node.js koa apps
Stars: ✭ 100 (-4.76%)
Mutual labels:  koa
Css Flags
A collection of pure CSS flags, all single divs.
Stars: ✭ 90 (-14.29%)
Mutual labels:  pug
Naice Blog
😺 新的博客上线啦
Stars: ✭ 93 (-11.43%)
Mutual labels:  koa
Art Template
High performance JavaScript templating engine
Stars: ✭ 9,554 (+8999.05%)
Mutual labels:  koa
Award
⚙基于react的服务端渲染框架
Stars: ✭ 91 (-13.33%)
Mutual labels:  koa
Koa Mobx React Starter
A straightforward starter for Node javascript web projects. Using Koa, MobX and ReactJS (with universal / isomorphic server rendering)
Stars: ✭ 102 (-2.86%)
Mutual labels:  koa
Gulp Pure Start
Start your project with 'Gulp Pure Start' easily than ever!
Stars: ✭ 89 (-15.24%)
Mutual labels:  pug
Jsonresume Theme Elegant
Elegant theme for jsonresume
Stars: ✭ 98 (-6.67%)
Mutual labels:  pug
Ashen Blog
使用koa 2 + vue 2搭建自己的博客系统
Stars: ✭ 104 (-0.95%)
Mutual labels:  koa
Chatroom
vue2聊天室,图灵机器人,node爬虫
Stars: ✭ 103 (-1.9%)
Mutual labels:  koa
Vue Family Bucket Ssr Koa2 Full Stack Development From Meituan
🚀🚀2020最新Vue全家桶+SSR+Koa2全栈开发☁
Stars: ✭ 100 (-4.76%)
Mutual labels:  koa

Koa-pug

Node version NPM version Dependency Status Travis CI

A Pug middleware for Koa.

For TypeScript user: koa-pug requires [email protected]^3.2.

How to use

npm install koa-pug --save
const Koa = require('koa')
const path = require('path')
const Pug = require('koa-pug')

const app = new Koa()
const pug = new Pug({
  viewPath: path.resolve(__dirname, './views'),
  locals: { /* variables and helpers */ },
  basedir: 'path/for/pug/extends',
  helperPath: [
    'path/to/pug/helpers',
    { random: 'path/to/lib/random.js' },
    { _: require('lodash') }
  ],
  app: app // Binding `ctx.render()`, equals to pug.use(app)
})

pug.locals.someKey = 'some value'

app.use(async ctx => {
  await ctx.render('index', locals, true)
})

For [email protected]:

const koa = require('koa')
const Pug = require('koa-pug')

const app = koa()
const pug = new Pug({ app: app })

app.use(function * () {
  yield this.render('index', locals, true)
})

Use koa-pug as a standalone Pug renderer:

const pug = new Pug({
  viewPath: path.resolve(__dirname, './views'),
  locals: { /* variables and helpers */ },
  basedir: 'path/for/pug/extends',
  helperPath: [
    'path/to/pug/helpers',
    { random: 'path/to/lib/random.js' },
    { _: require('lodash') }
  ],
  // Can work with / without Koa
  // app: app
})

async function sendEmail(recipients, tplFile, locals) {
  const body = await pug.render(tplFile, locals)
  await send(recipients, body)
}

Options

options are extended from Pug's options, all options will be passed to Pug compiler except the following:

viewPath: string: the location of Pug templates. Default is process.cwd().

locals: { [key: string]: any }: variables and helpers that will be passed to Pug compiler.

helperPath: string | string[] | { [key string]: string }: location(s) of helper(s).

Content-Type

koa-pug will set content-type to text/html for you, you can change it:

await ctx.render('index')
ctx.type = 'text/plain'

Global Helpers

By setting helperPath, koa-pug will load all the modules that under sepecified folxder, and make them available on all templates.

helperPath also could be an array including folders, files path, even moduleName: 'path/to/lib.js mapping object. Also support node module as a helper, just like: '_': require('lodash')

Defining a Helper

// format-date.js, `koa-pug` will convert filename to camel case and use it as module name
module.exports = function (input) {
  return (input.getMonth() + 1) + '/' + input.getDate() + '/' + input.getFullYear()
}

Equals to:

// Becasue of there is a `moduleName`, `koa-pug` will use it as module name instead of filename
module.exports = {
  moduleName: 'formatDate',
  moduleBody (input) {
    return (input.getMonth() + 1) + '/' + input.getDate() + '/' + input.getFullYear()
  }
}

Use help in Pug:

p= formatDate(new Date())

How koa-pug resolves Pug template files

Let's say the project views structure like:

views
├── user.pug
├── user
│   └── index.pug
└── file
    └── index.pug

koa-pug will search file in the following order:

  • <tpl_name>.pug
  • <tpl_name>/index.pug

When pug.render('user') is called, views/user.pug will be rendered. If you want to render views/user/index.pug, you have to pass it to renderer explicitly: pug.render('user/index).

When pug.render('file') is called, views/file/index.pug will be rendered.

Contributors

Via GitHub

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].