在 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查询文件，如此处所述。