如何使用gatsby使用I18N使用文本格式（粗体，斜体等）？

Question

我正在使用gatsby-plugin-react-i18next来翻译我的网站，并且可以使用简单的文本。但是，当我尝试使用大胆文本或斜体文本格式化文本的部分时，它不起作用（我不知道该怎么做）。

如何使用I18N格式化段落的特定部分？

以下是我设置的一个示例。

Page JS

const IndexPage = () => {

  const { t } = useTranslation();

  return (
    <Layout>
      <Seo title="Home" />
      <div>
          <h1>
            {t("HomepageHeader")} 
          </h1>
          <p>
            {t("HomepageDescription")} 
          </p>
      </div>
    </Layout>
  )
}

export default IndexPage

文件夹结构：

locales

-en

-translation.json

-nl -nl

-translation.json

示例json en

{
"HomepageHeader": "Grow your business with a modern website!",
"HomepageDescription": "Your website is the number 1 selling point, to your customers. Make sure you get the most out of it!"
}

我如何做 HomePagedEscription Bold仅“ 1号卖点”？

Answer 1

看看trans组件： https://react.i18next.com/latest com.com/latest/latest/latest/trans-trans-trans-trans-trans-trans-trans-trans-in，组件

或使用Markdown组件，类似：

import React from 'react';
import Markdown from './Markdown';
import { useTranslation } from '../utils';

export function Text({
  i18nKey,
  ns = 'client-locize-app-loaders',
  i18nOptions = {},
  message,
  defaultValue,
  linkTarget = '_blank',
}) {
  const { t, ready } = useTranslation(ns, { useSuspense: false });
  if (!ready)
    return (
      <Markdown source={message || 'loading...'} noContainer options={{ linkTarget: '_blank' }} />
    );

  return (
    <Markdown
      source={message || t(i18nKey, { defaultValue, ...i18nOptions })}
      noContainer
      options={{ linkTarget }}
    />
  );
}

---

import React from 'react';
import { Remarkable } from 'remarkable';

export class Markdown extends React.Component {
  constructor(props) {
    super(props);

    this.content = this.content.bind(this);
    this.renderMarkdown = this.renderMarkdown.bind(this);
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextProps.options !== this.props.options) {
      this.md = new Remarkable(nextProps.options);
    }
  }

  content() {
    if (this.props.source)
      return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;

    return React.Children.map(this.props.children, (child) => {
      if (typeof child === 'string') {
        return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
      }
      return child;
    });
  }

  renderMarkdown(source) {
    if (!this.md) this.md = new Remarkable(this.props.options);
    if (this.props.renderInline) return this.md.renderInline(source);

    return this.md.render(source);
  }

  render() {
    const Container = this.props.container;

    if (this.props.noContainer) return this.content();

    return (
      <Container className={this.props.className} style={this.props.style}>
        {this.content()}
      </Container>
    );
  }
}

Markdown.defaultProps = {
  noContainer: false,
  renderInline: false,
  container: 'div',
  options: {},
  className: '',
};