Как лучше всего включить HTML с сайта Gatsy за PrivateRoute?

Question

Я хочу поместить HTML код, сгенерированный Javado c, на сайт Gatsby, чтобы HTML был доступен только по аутентифицированному маршруту.

Таким образом, мой сайт может выглядеть что-то вроде этого, используя reach / router для маршрутизации:

    <Layout>
        <Router>
            <PrivateRoute path={'/docs/api1'} component={MyApiDisplay}/>
            <PrivateRoute path={'/docs/api2'} component={MyApiDisplay}/>
            <NotFoundComponent default/>
        </Router>
    </Layout>

, где MyApiDisplay - это некоторый компонент, который будет отображать Javado c, возможно, в IFrame.

Как лучше всего включить HTML в сайт Гэтсби? В документах предлагается использовать папку static для хранения HTML, но это publi c, что мне не нужно.

Answer 1

1. Поместите HTML в папку содержимого:

root
 |--content
 |   `--javadoc
 |       `--generated.html

Укажите gatsby-source-filesystem на вашу папку html:

// gatsby-config.js
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/javadoc`,
    name: `javadoc`,
  },
},

В gatsby-node.js вы можете использовать loadNodeContent для чтения необработанных html. Следуйте API о создании узлов.

exports.onCreateNode = async ({
  node, loadNodeContent, actions
}) => {

  // only care about html file
  if (node.internal.type !== 'File' || node.internal.mediaType !== 'text/html') return;

  const { createNode } = actions;

  // read the raw html content
  const nodeContent = await loadNodeContent(node);

  // set up the new node
  const htmlNodeContent = {
    content: nodeContent,
    name: node.name, // take the file's name as identifier
    internal: {
      type: 'HTMLContent',
    }
    ...otherNecessaryMetaDataProps
  }

  createNode(htmlNode);
}

Создайте шаблонный компонент , который запрашивает и содержит ваш HTML:

src/templates/blog-post.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default ({ data }) => {
  const generated = allHtmlContent // Make sure to deconstruct your query result correctly
  return (
    <Layout>
      <div>

        {*/ #### Supply your HTML markup to this template here #### /*}

        <div dangerouslySetInnerHTML={{ __html: generated }} />
      </div>
    </Layout>
  )
}


/* #### Query your HTML here #### */

export const query = graphql`
{
  allHtmlContent {
    edges {
      node {
        name
        content
      }
    }
  }
}
`

Поместите свой шаблонный шаблон в приватный маршрут, как вы указали в своем вопросе.

Кредит переходит к @ksav и к вопросу, который он связал .

---

EDIT

Выходные данные Javado c - это не просто HTML, они включают css, js и изображения. Как изменится ваш ответ, если эти файлы других типов должны поддерживаться?

css

Убедитесь, что вы правильно импортировали свои стили import "styles.css"; и имена классов установлены на что вам нужно как в html, так и css.

javascript

Этот блог дает несколько возможностей. Ответ здесь зависит от вашей реализации. Я рекомендую новый вопрос для этого.

images

Зависит от того, есть ли у вас абсолютные или относительные пути. Абсолютные пути не требуют изменений. Относительные пути могут быть проблемой, так как Гэтсби перемещает ваши файлы. Для относительных путей я рекомендую новый вопрос.