如何在像 jekyll 这样的静态站点生成器中使用 React jsx 模板
how to use react jsx templates in static site generator like jekyll
我这样构建我的静态站点 (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 文件。
图片中有什么我遗漏的吗？你试过这个吗？
基本上我想使用 React 作为一个愚蠢的模板引擎。
我认为 Jekyll 没有用于在服务器端渲染静态 React 组件的插件。
然而，有一个 boilerplate for static sites（如 Jekyll）但使用 React 和 Node 代替。
像 Jekyll 一样，您可以使用视图定义您的站点，但它们不是流动文件，而是完整的 React 组件。然后 npm run build 创建静态站点（如 jekyll build），这将创建一个可部署目录（如 Jekyll 的 _site 文件夹）。
react-jsx-sprockets 仅用于将 JSX 文件转换为 JS 文件（例如，作为 Jekyll 构建过程的一部分，<img src={a} /> 转换为 React.createElement('img', { src: a })。它实际上不会渲染组件。
我这样构建我的静态站点 (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 文件。
图片中有什么我遗漏的吗？你试过这个吗？
基本上我想使用 React 作为一个愚蠢的模板引擎。
我认为 Jekyll 没有用于在服务器端渲染静态 React 组件的插件。
然而，有一个 boilerplate for static sites（如 Jekyll）但使用 React 和 Node 代替。
像 Jekyll 一样，您可以使用视图定义您的站点，但它们不是流动文件，而是完整的 React 组件。然后 npm run build 创建静态站点（如 jekyll build），这将创建一个可部署目录（如 Jekyll 的 _site 文件夹）。
react-jsx-sprockets 仅用于将 JSX 文件转换为 JS 文件（例如，作为 Jekyll 构建过程的一部分，<img src={a} /> 转换为 React.createElement('img', { src: a })。它实际上不会渲染组件。