在Gatsby中添加一个PDF文件

Question

我是Gatsby的新手，我想建立我的投资组合，以达到专业的目的。有一个问题：我不知道如何在一个特定的页面中添加pdf文件（点击后，用户可以在另一个标签页中查看）的不同步骤。这是我的repo链接。https:/github.comchrisnopanew_portfoliotreemastercdn。

比方说，我想在 "关于 "页面添加我的简历。

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

Dit你创建一个 static 文件夹中，并将该PDF文件添加到那里？如果是这样，该文件将在构建时被复制到 /src/public/static 你就可以使用链接到它。

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

说了这么多，我觉得更好的方法是结合查询文件 gatsby-source-filesystem 如上所述 此处.