Cách Export Slides trên slides.com vào GatsbyJS

Nếu bạn chưa biết slides.com là gì? thì nó là ​​một ứng dụng web dùng để chỉnh sửa hay tạo các bản trình chiếu dựa trên Reveal.js một thư viện JavaScript để tạo các bài trình chiếu động. Nếu bạn muốn tạo và trình chiếu các bài thuyết trình của mình thì đây là một ví dụ tuyệt vời về sức mạnh của các ứng dụng web mà bạn nên thử.

Với các chức năng cơ bản của gói miễn phí mà slides cung cấp đủ cho bạn sử dụng với nhiều mục đích khác nhau như trình bày ý tưởng, tạo album ảnh,... Khi chuẩn bị bắt đầu tạo các trang trình bày tiếp theo, tôi phát hiện ra rằng mình đã vượt quá giới hạn số trang trình bày miễn phí của mình (với gói miễn phí, bạn sẽ phải bị giới hạn dung lượng lưu trữ cũng như một số chức năng). Vì vậy, tôi đã tìm cách lưu các bài trình chiếu của mình sang trang web của tôi (tôi sử dụng Gatsby).

Điều đầu tiên phải làm là Export tất cả các trang trình bày của mình. Slides.com cung cấp cho bạn chức năng Import và Export các trang trình chiếu trên ứng dụng của họ. Nó sẽ cho phép bạn xuất các trang trình bày của mình chỉ trong một tệp HTML duy nhất.

Nếu bạn cũng đang sử dụng gatsby như tôi thì có thể tham khảo cạc thực hiện tiếp theo dưới đây:

Trước tiên, bạn sẽ cần cài đặt plugin gatsby-source-filesystem để phân phát các slide của mình.

npm i gatsby-source-filesystem --save

npm i gatsby-source-filesystem --save

Lệnh trên sẽ cài đặt plugin gatsby-source-filesystem vào trang Gatsby của bạn. Sau khi nó đã được cài đặt thành công, bạn sẽ cần phải định cấu hình plugin trong tệp gatsby-config.js tương tự như sau:

plugins: [
  ...
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `static`,
      path: `${__dirname}/static`
    },
  },
  ...
];

plugins: [
  ...
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `static`,
      path: `${__dirname}/static`
    },
  },
  ...
];

Với cấu hình trên, bạn sẽ copy các slides (các tệp HTML đã Export) vào thư mục static. Tôi đã thêm một thư mục khác bên trong thư mục này có tên là 'slides' và đặt các tệp HTML của tôi vào thư mục đó.

Để truy xuất danh sách các files trong thư mục slide, bạn sẽ cần viết truy vấn GraphQL để lấy danh sách các tệp đó. Bạn có thể kiểm tra điều này bằng cách sử dụng trình chỉnh sửa GraphQL được lưu trữ trong máy chủ phát triển. Bạn có thể truy cập nó bằng cách truy cập http://localhost:8000/__graphql và thử truy vấn đoạn sau:

query MyQuery {
myslides: allFile(filter: { relativeDirectory: {eq: "slides" }}) {
  edges {
    node {
      name
        relativePath
      }
    }
  }
}

query MyQuery {
myslides: allFile(filter: { relativeDirectory: {eq: "slides" }}) {
  edges {
    node {
      name
        relativePath
      }
    }
  }
}

Việc tiếp theo bạn cần làm là tạo một trang Gatsby để liệt kê tên của các files trong thư mục slides. Ở đây, tôi đã tạo một trang bên trong thư mục /src/pages có tên là slides.js. Dưới đây mà toàn bộ nội dung tệp slides.js của tôi. Nó sẽ tương tự như thế này:

import * as React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/Layout';
 
const Slides = ({ data }) => (
  <Layout>
    <div className="index-wrap">
      <h1 className="blog-post-title">My Slides</h1>
      <p>Here are copies of my slides from my presentations.</p>
      <ul>
        {data.myslides.edges.map(({ node }) => {
          const link_path = `/${node.relativePath}`;
          return (
            <li key={node.name}>
              <a href={link_path}>{node.name}</a>
            </li>
          );
        })}
      </ul>
    </div>
  </Layout>
);
 
export const query = graphql`
  {
    myslides: allFile(filter: { relativeDirectory: { eq: "slides" } }) {
      edges {
        node {
          name
          relativePath
        }
      }
    }
  }
`;
 
export default Slides;

import * as React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/Layout';
 
const Slides = ({ data }) => (
  <Layout>
    <div className="index-wrap">
      <h1 className="blog-post-title">My Slides</h1>
      <p>Here are copies of my slides from my presentations.</p>
      <ul>
        {data.myslides.edges.map(({ node }) => {
          const link_path = `/${node.relativePath}`;
          return (
            <li key={node.name}>
              <a href={link_path}>{node.name}</a>
            </li>
          );
        })}
      </ul>
    </div>
  </Layout>
);
 
export const query = graphql`
  {
    myslides: allFile(filter: { relativeDirectory: { eq: "slides" } }) {
      edges {
        node {
          name
          relativePath
        }
      }
    }
  }
`;
 
export default Slides;

Nếu bạn nhìn vào dòng 22 ở đoạn code trên trong phần data.myslides.edges.map, tôi sử dụng <a href={link_path}>{node.name}</a><a href={link_path}>{node.name}</a> thay vì <Link to={link_path}>{node.name}</Link><Link to={link_path}>{node.name}</Link> để hiển thị liên kết. Điều này là do thẻ Link chỉ được sử dụng cho các trang gatsby. Vì đây là nội dung HTML tĩnh nên bạn sẽ phải sử dụng thẻ liên kết bình thường.

Như vậy, bạn thấy đấy gatsby rất linh hoạt có thể sử dụng nó với nhiều mục đích khác nhau. Bạn cũng có thể sử dụng nó để chia sẽ nội dung của các trang html trong thư mục static miễn là bạn định cấu hình trang web của mình một cách chính xác.