reactjs - 在 Gatsby 中添加 PDF 文件

Question

对 Gatsby 来说还是个新手，我正在尝试为专业目的建立我的作品集。但有一个问题:我不确定如何在特定页面中添加 pdf 文件要采取不同的步骤(并且单击后，用户可以在另一个选项卡上查阅它)。这是我的仓库链接:https://github.com/chrisnopa/new_portfolio/tree/master/cdn

假设我想在“关于”页面添加我的简历:

import React from 'react'

import Layout from '../components/layout/layout'
import SecImg1 from '../images/about/sticky.jpg'
import SecImg2 from '../images/about/uxui.jpg'


const About = () => (
  <Layout>
    <section className="section-double">
      <div className="section-content">
        <h3>A propos</h3>
        <h2>Résolution & méthode</h2>
        {/* <a
          class="btn"
          href="/cv-français.pdf"
          download="cv-français.pdf"
          target="_blank"
        >
          <span>
            <span>
              <span>Consulter mon CV</span>
            </span>
          </span>
        </a> */}
        <p>
          J’apprécie l'idée de prendre quelque chose de complexe et de le
          décomposer en parties plus digestes, et surtout plus intelligibles.
          Comprendre les variables en jeu et travailler sur la solution. J' ai
          eu une brève vie en tant que responsable de production dans
          l’audiovisuel et j'ai découvert assez que ce n'était pas le genre de
          problèmes qui m'intéressaient. Par la suite, je me suis lancé dans la
          <span id="fancy-word"> gestion de projets digitaux</span> pour différentes
          entités.
        </p>
        <p>
          Le tournant est venu lorsque j'ai découvert l'UX et les processus structurés de conception
          <span id="fancy-word"> tournée vers et avec l'utilisateur</span>.
        </p>
        <p>
          <strong id="fancy-word">CV COMING SOON</strong>
        </p>
      </div>
      <div className="section-img">
        <img src={SecImg1} alt="UX/UI" />
      </div>
    </section>
    <section className="section-double section-reverse">
      <div className="section-content">
        <h3>Vision du design</h3>
        <h2>Comprendre & itérer</h2>
        <p>
          Je crois qu'accepter de passer du temps à examiner le problème, c'est
          déjà être en train de le résoudre. Essayer de comprendre quoi, quand, comment et surtout pourquoi est pour moi le meilleur indicateur design, celui de l'utilité.
        </p>
      </div>
      <div className="section-img">
        <img src={SecImg2} alt="UX/UI" />
      </div>
    </section>
  </Layout>
)

export default About

我怎样才能做到呢？我在 Stack 上看到过这个代码示例，尝试过但没有成功:

import React from "react"
import downloadFile from '../downloads/file.pdf' 

  const IndexPage = () => (
  <>
    <a href={downloadFile} download>Download the imported file</a>{` `}
    <a href={`download.pdf`} download>Download the file from the static folder</a>
  </>
)

export default IndexPage

如果有人知道如何对此添加快速修复，我们将不胜感激!

Answer 1

您是否在项目根目录中创建了一个 static 文件夹并在其中添加了该 PDF？如果是这样，该文件将在构建时复制到 /src/public/static 并且您将能够使用以下方式链接到它:

<a href="download.pdf">Download the file from the static folder</a>

话虽如此，我认为更好的方法是结合 gatsby-source-filesystem 查询文件，如here所述。 .