如何在jekyll等静态站点生成器中使用反应jsx模板

Question

我构建我的静态网站（about.html）：

import React from 'react'
import Main from './main'
import {Grid, GridBlock} from '../ui/objects/Grid/Grid'
import Content from '../ui/components/Content/Content'
import RegionIndicator from '../ui/components/RegionIndicator/RegionIndicator'
import Navigation from '../ui/components/Navigation/Navigation'
import Footer from '../ui/components/Footer/Footer'
import Page from '../ui/components/Page/Page' 
import Cover from '../ui/components/Cover/Cover'
import Subscribe from '../ui/components/Subscribe/Subscribe'
import ArticleText from '../ui/components/ArticleText/ArticleText'
import Services from '../ui/components/Services/Services'
import StorySlider from '../ui/components/StorySlider/StorySlider'
import FullCover from '../ui/components/FullCover/FullCover'
import StickyNav from '../ui/components/StickyNav/StickyNav'
import Timeline from '../ui/components/Timeline/Timeline'
import Team from '../ui/components/Team/Team'
import Icon from '../ui/objects/Icon/Icon'
import Input from '../ui/objects/Input/Input'
import Select from '../ui/objects/Select/Select'
import Checkbox from '../ui/objects/Checkbox/Checkbox'
import Textarea from '../ui/objects/Textarea/Textarea'

const toHTML = (text) => ({ __html:text })

@Main
class About extends React.Component {
  render() {
    const root = this.props.config.root
    return (
      <Page navigation={<Navigation root={root}/>}>
        <FullCover 
          image={`${root}/assets/images/about_bg.png`} 
          title="Think big. Act with knowledge."
          text="ACT is the leading public opinion research and strategic consulting company in the Caucasus Region.  Through science and creativity, we provide our client with knowledge, idea and inspiration to become more powerful and create something valuable and important."
          action="Find out More"
        />
        <StickyNav title="About Us" items={[
          {href:'#timeline', title:'Timeline'},
          {href:'#philosophy', title:'Company Philosophy'},
          {href:'#team', title:'Our Team'},
          {href:'#innews', title:'In the News'},
        ]}/>
        <Timeline id="timeline" items={[{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2002',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2002',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2003',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2003',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2003',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2003',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2003',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2003',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2004',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2004',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2004',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2004',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2004',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2005',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2005',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2008',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2008',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2008',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2008',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2009',
          day: '09',
        },]}/>
        <div style={{
          backgroundImage:`url(${root}/assets/images/marketing_expect_bg.png)`,
          backgroundSize:'contain',
          backgroundPosition:'right 0% top',
          backgroundRepeat:'no-repeat'
        }} id="philosophy">
          <Content className="u-padding{Top,Bottom}-{xl,xxl@xs}">
            <h1 className="u-textSize-{xxl,3xl@xs} u-marginBottom-{3xl,xl@xs} u-lineHeight-uno u-width{5/12,6/12@xs}">
              Company Philosophy
            </h1>
            <h2 className="u-lineHeight-s u-textSize-l u-marginBottom-{s,xxl@s} u-width{10/12,6/12@xs}">
              Our mission is to give organizations a clear vision, idea and belief to become better, create something valuable and important. 
            </h2>
            <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-{inlineBlock,none@s}">
              <span className="u-align-middle">Find out More</span>
              <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
            </a>
            <Grid gutter="Wide" className="u-display-{none,flex@s}">
              <GridBlock className="u-size4/12">
                <p className="u-lineHeight-s  u-marginBottom-s">
                  We love what we do and this gives energy to our work, we appreciate and love people, our client companies for which we create product, we love our staff, who are our friends and we enjoy the environment in which these products are created. We take care of each other and the environment where we work. We always protect client’s interests and confidentiality...

                </p>
                <ul>
                  <li>
                    <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                      <span className="u-align-middle">View our Credo</span>
                      <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                    </a>
                  </li>
                  <li>
                    <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                      <span className="u-align-middle">Policy of Cooperation With Clients</span>
                      <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                    </a>
                  </li>
                </ul>
              </GridBlock>
              <GridBlock className="u-size4/12">
                <p className="u-lineHeight-s  u-marginBottom-s">
                  Through science and creativity, we provide our client with knowledge, idea and inspiration to become more powerful and create something valuable and important.
                </p>
                <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                  <span className="u-align-middle">View our Mission</span>
                  <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                </a>
              </GridBlock>
            </Grid>
          </Content>
        </div>
        <Team id="team" members={[{
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {/* @dublicates >>> */
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        },{
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        },{
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isSeeAll: true
        }]}/>       

        <StorySlider id="innews" className="u-marginBottom-xxl" items={[{
          title: 'ACT became the Gold Sponsor of the biggest marketing event - Spotlight. ',
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...',
          image: `${root}/assets/images/story_2_news.png`,
          action: 'Read Full Story',
        }, {
          title: 'Jane M. Smith from Microfinance Solutions',
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.',
          action: 'Find out More',
        }, {
          title: 'Baseline, Monitoring and Evaluation Surveys',
          text: 'The effectiveness of programs and projects is highly determined by adequately assessing the existing situation, formation of right indicators for project evaluation and the monitoring of their implementation.',
          action: 'Read Full Story',
        }]} image={`${root}/assets/images/story_2.png`} title={'Act in the News'}/>

        <Subscribe className="u-marginBottom-xxl"/>
        <Footer root={root}/>
      </Page>
    )
  }
}

export default About

对于所有前端工作来说，这很好用，我运行构建过程并将其转换为适当的html - 而不是把它打到后端软件上并称之为一天。

但我想尝试一些不同的东西，比如静态站点生成器：jekyll，middleman。

我设法让jekyll使用：

读取jsx

require "jekyll-assets"
require "react-jsx-sprockets"

但是这对于在构建过程中从jsx生成html文件不起作用。

图片中是否有我遗漏的东西？你试过这个吗？

基本上我想用反应作为一个愚蠢的模板引擎。

Answer 1

我不认为Jekyll有一个用于在服务器上渲染静态React组件的插件。

然而，有一个boilerplate for static sites（像Jekyll）但是使用了React和Node。

与Jekyll一样，您可以使用视图定义您的网站，但它们不是流动文件，而是完整的React组件。然后只需npm run build创建静态网站（如jekyll build），这将创建一个可部署的目录（如Jekyll＆＃39; _site文件夹）。

react-jsx-sprockets仅用于将JSX文件转换为JS文件（例如<img src={a} />到React.createElement('img', { src: a })，作为Jekyll构建过程的一部分。它实际上不会渲染组件。< / p>