Добавить файл PDF в Гэтсби - PullRequest
Новая
       54

Добавить файл PDF в Гэтсби

0 голосов
/ 01 мая 2020

Довольно плохо знаком с Гэтсби и пытаюсь составить свое портфолио для профессиональных целей. Одна проблема: я не уверен в том, какие разные шаги предпринять, как добавить файл pdf на определенную страницу c (и по щелчку пользователь может просмотреть его на другой вкладке). Вот моя ссылка на репо: 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

Как я могу это сделать? Я видел этот пример кода в стеке, пробовал его, но он не работал: 

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

Если кто-нибудь знает, как добавить быстрое исправление, это будет с благодарностью!

1 Ответ

0 голосов
/ 01 мая 2020

Вы создаете папку static в своем проекте и добавляете туда этот PDF? Если это так, этот файл будет скопирован при сборке в /src/public/static, и вы сможете ссылаться на него, используя: 

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

Сказав это, я думаю, что лучший способ - это запросить файл в комбинация с gatsby-source-filesystem как описано здесь .

...