NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

news localization

Browse Source
This commit is contained in:
Elinorre 2020-03-03 21:01:25 +03:00
parent 37b5685808
commit b3ed6099d1
1 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/templates/news.js
View File

@ -1,38 +1,48 @@
import React from 'react' import React from 'react'
import { Link, graphql } from 'gatsby' import { graphql } from 'gatsby'
import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
import { Timeline, TimelineItem } from 'vertical-timeline-component-for-react' import { Timeline, TimelineItem } from 'vertical-timeline-component-for-react'
import Header from "../header" import Header from "../header"
import Footer from "../footer" import Footer from "../footer"
export default function(props) { const NewsTemplate = ( props ) => {
const news = props.data.news.edges.map(newsItem => newsItem.node) const intl = useIntl()
const lang = intl.locale
console.log(lang)
var news = ""
if ( lang==="ru" ) { news = props.data.ru_news.edges}
else if ( lang==="en" ) { news = props.data.en_news.edges; }
const next = props.pageContext.next const next = props.pageContext.next
const prev = props.pageContext.prev const prev = props.pageContext.prev
console.log(news)
return ( return (
<> <>
<Header/> <Header/>
<Timeline lineColor={'#ddd'} animate={false}> <Timeline lineColor={'#ddd'} animate={false}>
{/* <h2>Все новости</h2> */} {/* <h2>Все новости</h2> */}
{news.map(newsItem => ( {news.map(({node}) => (
<TimelineItem <TimelineItem
key={newsItem.frontmatter.date} key={node.frontmatter.date}
dateText={newsItem.frontmatter.date} dateText={node.frontmatter.date}
style={{ color: '#e86971' }} > style={{ color: '#e86971' }} >
<h2>{newsItem.frontmatter.title}</h2> <h2>{node.frontmatter.title}</h2>
<p dangerouslySetInnerHTML={{__html: newsItem.html}}/> <p dangerouslySetInnerHTML={{__html: node.html}}/>
</TimelineItem> </TimelineItem>
))} ))}
</Timeline> </Timeline>
<nav style={{ display: 'flex', justifyContent: 'space-between', marginLeft: `15%` }}> <nav style={{ display: 'flex', justifyContent: 'space-between', marginLeft: `15%` }}>
<div> <div>
{prev &&<Link to={prev}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>} {prev && <Link to={`/${prev}`}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>}
</div> </div>
<div style={{ justifySelf: 'flex-end', marginRight: `10%`}}> <div style={{ justifySelf: 'flex-end', marginRight: `10%`}}>
{next && <Link to={next} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>} {next && <Link to={`/${next}`} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
</div> </div>
</nav> </nav>
<Footer/> <Footer/>
@ -40,24 +50,44 @@ export default function(props) {
) )
} }
export default injectIntl(NewsTemplate)
export const query = graphql` export const query = graphql`
query NewsQuery($limit: Int!, $skip: Int!) { query NewsQuery($limit: Int!, $skip: Int!) {
news: allMarkdownRemark( ru_news: allMarkdownRemark(
filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}}, filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
sort: {fields: [frontmatter___date], order: DESC}, sort: {fields: [frontmatter___date], order: DESC},
limit: $limit limit: $limit
skip: $skip skip: $skip
) { ) {
edges { edges {
node { node {
frontmatter { frontmatter {
title title
slug slug
date(formatString: "DD.MM.YYYY") date(formatString: "DD.MM.YYYY")
}
html
}
}
}
en_news: allMarkdownRemark(
filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
sort: {fields: [frontmatter___date], order: DESC},
limit: $limit
skip: $skip
) {
edges {
node {
frontmatter {
title
slug
date(formatString: "DD.MM.YYYY")
}
html
} }
html
} }
} }
}
} }
` `