GatsbyJS로 블로깅하기

9859 단어 plugingatsbyremarkblogging
"Aaron Burden의 Unsplash님의 사진"

🔔 이 글은 원래 제 사이트MihaiBojin.com에 게시된 글입니다. 🔔


이 게시물은 (아마도) Gatsby의 가장 일반적인 기능인 Remark JS을 사용한 블로깅에 대한 간단한 소개입니다.

이 기사가 끝날 무렵에는 블로그 기능을 구성하는 데 사용되는 일반적인 플러그인 중 일부와 이러한 플러그인이 제공하는 이점에 대해 기본적인 이해를 하게 되셨기를 바랍니다.


우리의 목표를 달성하기 위해 필요한 핵심 플러그인은 공식gatsby-transformer-remark 플러그인입니다.

이 게시물은 GatsbyJS로 자신만의 블로그를 설정하는 데 사용할 수 있는 몇 가지 일반적인 플러그인을 설명하는 것을 목표로 합니다. 구성이 일반적이기 때문에 모든 청중을 대상으로 할 수 있지만 코드를 포함할 계획이 없다면 PrismJS 플러그인을 건너뛸 수 있습니다.

의 시작하자!

gatsby-transformer-remark 설치

Assuming you already have a GatsbyJS site, start by installing the plugin with:

npm install gatsby-transformer-remark

추가 플러그인 설치

The gatsby-transformer-remark plugin supports multiple input sources (e.g., various content management systems), but the easiest option is to host markdown files locally. To do that, you will need the following plugin:

npm install gatsby-source-filesystem

이미지 최적화

You will most likely want to include images in your markdown content. The gatsby-remark-images plugin has several nifty features such as:

  • resizing the image to the target's container size
  • generating a srcset of multiple image sizes (support multiple device widths)
  • "blur-up" while the image is loading 
npm install gatsby-remark-images gatsby-plugin-sharp gatsby-transformer-sharp

콘텐츠 헤더 링크

The gatsby-remark-autolink-headers plugin automatically generates HTML IDs for each heading, allowing your readers to link to a specific section in your posts.

npm install gatsby-remark-autolink-headers

최적화된 내부 링크

Since links in markdown content are not making use of React's reach router 더 빠른 탐색을 위해 변환할 수도 있습니다.

npm install gatsby-plugin-catch-links


정적 콘텐츠

If you link any files in your markdown (such as PDFs), you'll want them to be copied along with any other static resources.

npm install gatsby-remark-copy-linked-files

PrismJS를 사용한 구문 강조

And assuming you will include some code in your content, you will want to integrate with PrismJS :

npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs


플러그인 구성

Before proceeding, you need to decide where to host your files. One common choice is /content . You can create .md files directly in that directory, or you can create any number of subdirectories. The path you use will determine the slugs at which your content will be hosted. E.g., creating a page under /content/my/article.md will render to the following page: https://SITE_URL/my/article .

A slug is a common term used to denote the part of a URL identifying a page.

개츠비-config.js

First, add the following configuration to your gatsby-config.js .

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 730,
            },
          },
          `gatsby-remark-autolink-headers`,
          `gatsby-plugin-catch-links`,
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaults: {
          formats: [`auto`, `webp`],
          placeholder: `blurred`,
          quality: 95,
          breakpoints: [750, 1080, 1366, 1920],
          backgroundColor: `transparent`,
          tracedSVGOptions: {},
          blurredOptions: {},
          jpgOptions: {},
          pngOptions: {},
          webpOptions: {},
          avifOptions: {},
        },
      },
    },
  ],
};

블로그 페이지 만들기

With all of that behind us, the final step is to read all the markdown from GraphQL 페이지를 생성합니다.
gatsby-node.js 파일을 편집하고 다음을 추가합니다(없으면 생성).

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;

  if (node.internal.type === `MarkdownRemark`) {
    // generate post slug
    const value = createFilePath({ node, getNode });

    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions;

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    `
      {
        allMarkdownRemark(sort: { fields: [frontmatter___date], order: ASC }) {
          nodes {
            id
            fields {
              slug
            }
          }
        }
      }
    `
  );

  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading your blog posts`,
      result.errors
    );
    return;
  }

  // Create blog posts pages only if there's at least one markdown file
  const posts = result.data.allMarkdownRemark.nodes;
  if (posts.length == 0) {
    reporter.warn(`No blog posts found`);
    return;
  }

  // Define a template for blog post
  const component = path.resolve(`./src/components/blog-post.js`);

  posts.forEach((post, index) => {
    const previousPostId = index === 0 ? null : posts[index - 1].id;
    const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id;

    console.log(`Creating blog page: ${post.fields.slug}`);
    createPage({
      path: post.fields.slug,
      component,
      context: {
        id: post.id,
        previousPostId,
        nextPostId,
      },
    });
  });
};


각 페이지는 ./src/templates/blog-post.js 템플릿을 기반으로 합니다. 계속해서 이 파일을 만들고 렌더링된 마크다운 및 기타 요소를 표시할 React 구성 요소로 채웁니다. 다음은 example 입니다.

결론

Congratulations! At this point, you should have a working blogging feature that enables you to write simple markdown and transform it into pages such as the one you're reading right now.

If you have any follow-up questions or feedback, please add them !

 If you liked this article and want to read more like it, please subscribe to my newsletter ; 몇 주에 한 번씩 보내드립니다!
Chrome 확장 개발 : 확장에서 페이지로 JavaScript를 전송하고 싶습니다.
가져오기 계층

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage