使用模板脚本将 HTML 添加到 Docusaurus (React) 页面

Question

我需要向 Docusaurus 网站（基于 React 构建）添加包含模板脚本的自定义 HTML，但该网站没有 .html 文件 - 只有 .js 文件然后会被编译创建一个静态站点。具体来说，我需要添加一个具有 <script type="text/template"></script> 块的 .html 文件，这意味着我不能像普通 HTML 元素那样只使用 React/JSX 渲染它。

这是我到目前为止所做的尝试，结果是在页面上显示了一个文字字符串，其中包含我的 <script type="text/template"></script> 块的内容：

Footer.js

const React = require('react');

// for instantsearch
const fs = require('fs'); //Filesystem  
const resultsTemplate = fs.readFileSync(`${process.cwd()}/static/resultsTemplate.html`,"utf-8");

class Footer extends React.Component {
  ...
  render () {
    return (
      <footer className='nav-footer' id='footer'>
        ...

        {resultsTemplate}

      </footer>
    );
  }
}

module.exports = Footer;

如果我不使用 fs 而只是设置

const resultsTemplate = require(`${process.cwd()}/static/resultsTemplate.html`);

我在运行 npm start 时收到以下错误：

(function (exports, require, module, __filename, __dirname) { <script type="text/template" id="results-template">
                                                              ^

SyntaxError: Unexpected token <

这就是我使用 fs.

的原因

这是 resultsTemplate.html，我想将其插入页脚：

<script type="text/template" id="results-template">
  <div class="ais-result">
    {{#hierarchy.lvl0}}
    <div class="ais-lvl0">
      {{{_highlightResult.hierarchy.lvl0.value}}}
    </div>
    {{/hierarchy.lvl0}}

    <div class="ais-lvl1">
      {{#hierarchy.lvl1}} 
        {{{_highlightResult.hierarchy.lvl1.value}}} 
            {{/hierarchy.lvl1}} 
        {{#hierarchy.lvl2}} > 
     ...
    </div>
    <div class="ais-content">
        {{{#content}}} 
            {{{_highlightResult.content.value}}} 
        {{{/content}}}
    </div>
  </div>
</script>

最后，这是应该用正确的值填充模板的函数（取自 Algolia）：

  mainSearch.addWidget(
    instantsearch.widgets.hits({
      container: '#search-hits',
      templates: {
        empty: 'No results',
        item: $('#results-template').html()
      },
      hitsPerPage: 10
    })
  );

有关更多上下文，我正在尝试在我的站点中实现此功能：https://jsfiddle.net/965a4w3o/4/

Answer 1

我最终找到了自己的解决方案，这在很大程度上要感谢 Giannis Dallas 对这个问题的公认回答：

解决方法：

Footer.js

const React = require('react');

// for homepage instantsearch
let resultsTemplate = `
<script type="text/template" id="results-template">
  <div class="ais-result">
    {{#hierarchy.lvl0}}
    <div class="ais-lvl0">
      {{{_highlightResult.hierarchy.lvl0.value}}}
    </div>
    {{/hierarchy.lvl0}}

    ...
    </div>
    <div class="ais-content">
      {{{#content}}} {{{_highlightResult.content.value}}} {{{/content}}}
    </div>
  </div>
</script>
`
...

class Footer extends React.Component {
  ...
  render () {
    return (
      <footer className='nav-footer' id='footer'>
        ...

        <div dangerouslySetInnerHTML={{ __html: resultsTemplate }} />

      </footer>
    );
  }
}

module.exports = Footer;

希望这对使用基于 React 的静态站点生成器（如 Docusaurus 或 Gatsby）处于类似情况的其他人有所帮助！

使用模板脚本将 HTML 添加到 Docusaurus (React) 页面

Add HTML with template script to Docusaurus (React) page

reactjs

algolia

instantsearch.js

docusaurus