const Html = ({ content, css, store }) => { const helmet = Helmet.renderStatic() const state = `window.__INITIAL_STATE__ = ${serialize(store.getState())}` return ( <html> <head> {helmet.title.toComponent()} {helmet.meta.toComponent()} <style> {'*, *:after, *:before { box-sizing: border-box; }'} {'html, body, main { height: 100%;position: relative;}'} {'body {margin: 0; overflow: hidden; font-family: Roboto, sans-serif; background-color: #FAFAFA}'} </style> <style id="jss-server-side">{css}</style> {helmet.link.toComponent()} </head> <body> <div id="root" dangerouslySetInnerHTML={{ __html: content }} /> <script dangerouslySetInnerHTML={{ __html: state }} /> <script src="bundle.js"></script> </body> </html> ) }
render () { const { assets, content, state } = this.props const head = Helmet.renderStatic() return ( <html lang='en-us'> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} <link rel='shortcut icon' href='/favicon.ico' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> {process.env.NODE_ENV !== 'development' && <link href={`/static/assets${assets['main.css']}`} rel='stylesheet' /> } </head> <body> <div id='root' dangerouslySetInnerHTML={{ __html: content }} /> <script dangerouslySetInnerHTML={{ __html: `window.__data=${state}` }} charSet='UTF-8' /> <script src={process.env.NODE_ENV === 'development' ? `${assets['main.js']}` : `/static/assets${assets['main.js']}`} defer /> </body> </html> ) }
render() { const { component, assetPath, store, type, location } = this.props const content = component ? ReactDOM.renderToString(component) : '' const state = JSON.stringify(store.getState()) const head = Helmet.rewind() return ( <html> <head> { head.title.toComponent() } { head.meta.toComponent() } <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i|Lora:700,700i" rel="stylesheet" /> <script dangerouslySetInnerHTML={{ __html: `window.store=${state};` }} charSet="UTF-8" /> </head> <body> <Style rules={ styles } /> <div id="root" dangerouslySetInnerHTML={{ __html: content }} /> <script src="/assets/js/tinymce/tinymce.min.js" /> <script src={`/assets/${type}/bundle.js`} charSet="UTF-8" /> </body> </html> ) }
render() { const { component, store } = this.props const head = Helmet.rewind() const htmlAttributes = head.htmlAttributes.toComponent() return ( <html lang={htmlAttributes.lang}> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="/favicon.ico" /> {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} {this.styles} </head> <body> <div id="root" dangerouslySetInnerHTML={{ __html: renderToString(component) }} /> <script dangerouslySetInnerHTML={{ __html: `window.__PRELOADED_STATE__=${serialize(store.getState())};` }} /> {this.scripts} </body> </html> ) }
<head> <meta httpEquiv="Content-Type" value="text/html; charset='utf-8'" /> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {__DEVELOPMENT__ ? <script src="/webpack-dev-server.js"></script> : null} {head.script.toComponent()} {assets.bundle.css && assets.bundle.css.map((path, index) => { return (<link key={`css-${index}`} rel="stylesheet" type="text/css" href={path} />);
const Html = ({ store, htmlContent }: Props): Element<'html'> => { const attrs = head.htmlAttributes.toComponent(); const { lang, ...rest } = attrs || {}; const assets = webpackIsomorphicTools.assets(); <link rel="shortcut icon" href="/favicon.ico" /> {head.title.toComponent()} {head.base.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} </body> </html>
const attrs = head.htmlAttributes.toComponent(); <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} )} {head.script.toComponent()} </body> </html>
render () { const {component, store, data} = this.props; const content = component ? ReactDOM.renderToString(component) : ''; const head = Helmet.rewind(); return ( <html lang='en-us'> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} <link rel='shortcut icon' href='/favicon.ico' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <style type='text/css'>{data.css.join('')}</style> </head> <body> <div id='content' dangerouslySetInnerHTML={{__html: content}} /> <script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} charSet='UTF-8' /> <script src='http://localhost:9001/dist/bundle.js' /> </body> </html> ); }
<html lang="zh-TW"> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()}
<html lang="en-us"> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()}