export default function renderHtmlPage(store, html = '') { const head = Helmet.rewind(); const assets = global.webpackIsomorphicTools.assets(); let page = `<!DOCTYPE html><html ${head.htmlAttributes.toString()}>`; page += '<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">'; page += '<meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">'; page += head.base.toString() + head.title.toString() + head.meta.toString() + head.link.toString(); page += Object.keys(assets.styles).map(style => `<link href="${assets.styles[style]}" rel="stylesheet" type="text/css">` ).join(''); page += `</head><body><div id="app"><div>${html}</div></div>`; if (store) { page += `<script type="text/javascript">window.__INITIAL_STATE__=${serialize(store.getState())}</script>`; } page += Object.keys(assets.javascript).reverse().map(script => `<script src="${assets.javascript[script]}"></script>` ).join(''); page += head.script.toString(); page += '</body></html>'; return page; }
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> ) }
<html> <head> ${head.base.toString()} ${head.title.toString()} ${head.meta.toString()}
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> ); }
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()}
<head> <meta httpEquiv="Content-Type" value="text/html; charset='utf-8'" /> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()}
{head.base.toComponent()} {head.meta.toComponent()} {head.link.toComponent()}
<html lang="zh-TW"> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()}
<html lang="en-us"> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()}
<html> <head> ${head.base.toString()} ${head.title.toString()} ${head.meta.toString()}
<html> <head> ${head.base.toString()} ${head.title.toString()} ${head.meta.toString()}