als-layout
v1.3.2
Published
Html layout constructor
Downloads
359
Readme
Als-layout
Html layout constructor.
Change log
- styles as separated tags
- version method
- script,link,image - version parameter
- updated als-document version
install
npm i als-layoutBasic usage
const Layout = require('als-layout')
const layout = new Layout()
.charset() // default UTF-8
.viewport() // default width=device-width, initial-scale=1.0
.title('Test title') // adding/updating title and meta[og:title]
.favicon('/favicon.png') // adding/updating link[rel=icon][type=image/x-icon] with new href
.keywords(['some','keyword']) // adding/updating meta[name=keywords]. not adding existing keywords
.image('/main-image.png','1.5') // adding/updating meta - og:image,twitter:image,twitter:card
.description('Cool site') // adding/updating meta og:description,twitter:description and description tag
.version('1.0.0') // adds version parameter to link, script.src and image
.url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
.style([{body:{m:0,bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
.style('body {margin:0; backgroung-color:whitesmoke;}',true) // adding css styles to existing/new style tag. Second parameter is minified (default=false).
.link('/styles.css','2.0') // adding link[rel=stylesheet] if such href not exists
.script({src:'/app.js'},'', true,'3.0') // set script with src to head if such src not exists
.script({}, 'console.log("hello world")', false) // set script with script code to footer
layout.body // getter for body element (if not exists, created)
layout.head // getter for head element (if not exists, created)
layout.html // getter for html element (if not exists, created)
layout.rawHtml // raw html
layout.cached // cached DOM
layout.clone // new layout object clone for curent objectIn image, script.src and link, last parameter is version which using 'layout.v' (defined by layout.version(v)) if not defined.
Advanced usage
const Layout = require('./lib/layout')
const raw = /*html*/`<html></html>`
const options = {
host:'http://example.com', // host for url method
lang:'fr' // for <html lang="fr"></html>
}
const layout = new Layout(raw,options)
console.log(layout.rawHtml)
// <!DOCTYPE html><html lang="fr"><head></head><body></body></html>
const homePage = layout.clone
homePage.title('Home page')
homePage.body.innerHTML = /*html*/`<h1>Home page</h1>`
console.log(homePage.rawHtml)
// <!DOCTYPE html><html lang="fr"><head><title>Home page</title><meta property="og:title" content="Home page"></head><body><h1>Home page</h1></body></html>