0

我像这样构建我的静态网站（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，中间人。

我设法让 jekyll 使用以下方法读取 jsx：

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

但这不适用于在构建过程中从 jsx 生成 html 文件。

有什么我从图片中遗漏的吗？你试过这个吗？

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

4

1 回答 1

2

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

但是，静态站点（如 Jekyll）有一个样板，但使用 React 和 Node。

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

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

于 2016-02-19T17:14:45.153 回答