Boxwood Logo
Stworzone przez

Boxwood
Mocne korzenie to pewny wzrost

Wstęp

Boxwood jest serwerowym silnikiem służącym do generowania html. Stara się wypełnić lukę związaną z niewielką ilością innych rozwiązań pozwalających na używanie komponentów jako tagów bezpośrednio w szablonach html.

Silnik jest dedykowany pod aplikacje i strony kładące szczególny nacisk na szybkość działania aplikacji oraz seo.

Dodatkowo, szablony są analizowane pod względem poprawności i kompilator wyświetla błędy lub ostrzeżenia.

Szablony są plikami o rozszerzeniu html.


Prosta składnia

Składnia HTML jest dobrze znana i łatwa w pracy. Boxwood rozszerza ją o nowe tagi, atrybuty i wyrażenia.

Przykład z wykorzystaniem tagów for i if

Szybkie szablony

Kompilator optymalizuje i minifikuje html, znacząco przyspieszając działanie stron internetowych.


Podstawy

Instalacja

$ npm install boxwood
bash

Start

const { compile, escape } = require('boxwood')

async function render (html) {
  const { template } = await compile(html)
  return template({ foo: 'bar' }, escape)
}
js

Podstawowe pojęcia

Partials

<partial from="partials/header.html"/>
html

Slots

<button><slot/></button>
<style scoped>
button {
  color: blue;
}
</style>
html

Conditions

<if foo>
  {bar}
</if>
html

Loops

<for car and index in cars>
  #{index}: {car}
</for>
html

Filters

{category | uppercase}
html

Attributes

<img src="/images/logo.svg" inline>
html

Styles

<button><slot/></button>
<style scoped>
button {
  color: blue;
}
</style>
html

Scripts

<script src="/js/main.js" inline></script>
html

Images

<img src="/images/logo.svg" inline>
html

Translations

<translate hello/>
<data yaml>
i18n:
  hello:
    pl: Cześć
    en: Hello
</data>
html

Tagi

case

<switch foo>
  <case is present>bar</case>
</switch>
html

default

<switch number>
  <case is divisible by three and is divisible by five>fizzbuzz</case>
  <case is divisible by three>fizz</case>
  <case is divisible by five>buzz</case>
  <default>{number}</default>
</switch>
html

else

<if foo>
  bar
<else>
  baz
<end>
html

elseif

<if foo>
  bar
<elseif baz>
  qux
<end>
html

elseunless

<unless foo>
  bar
</unless>
<elseunless bar>
  baz
</elseunless>
html

each

<each car and index in cars>
  #{index}: {car}
</each>
html

font

<font CustomFont from="/fonts/CustomFont.woff" />
html

for

<for car of cars>
  {car}
</for>
html

foreach

<foreach car in cars>
  {car}
</foreach>
html

if

<if foo>
  {bar}
</if>
html

import

<import layout from="layouts/default.html"/>
<import header from="components/header.html"/>
html

include

<include partial="./foo.html"/>
html

partial

<partial from="partials/footer.html"/>
html

require

<require layout from="layouts/default.html"/>
<require header from="components/header.html"/>
html

slot

<div class="foo"><slot/></div>
html

style

<style scoped>
.foo {
  color: red;
}
</style>
html

svg

<svg from="/images/logo.svg"/>
html

switch

<switch foo>
  <case is present>bar</case>
</switch>
html

translate

<translate foo/>
<data yaml>
i18n:
  foo:
    pl: bar
    en: baz
</data>
html

unless

<unless foo>{bar}<end>
html

var

<var foo="bar"/>
html

REPL

Arrow Up