Question

这里对盖茨比来说还很新，尝试建立我的投资组合倒是为了专业。有一个问题：我不确定如何在特定页面中添加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>

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

在盖茨比添加PDF文件

1 个答案: