markdown exerpt가 `...` 표시되는 문제 해결하는 방법

2020-06-29 — Written by jslee

#gatsby #gatsby-transformer-remark #blog #markdown #excerpt

지금까지 잘나오던 excerpt의 값이 ...으로 나오기 시작했다. 살펴보니 한글만 사용하는 경우에는 pruneLength가 정상적으로 동작하지 않았다. gatsby에서도 해당 이슈를 알고 있었고, 해결하는 방법도 제안해놓은 상태였다.

참고 이슈

pruneLength

pruneLength의 경우 non lation language에서는 동작하지 않는다. 한글만 사용했을때는 pruneLength를 하면, ...으로 말을 잇지 못한다.

  query($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          id
          excerpt(pruneLength: 150)
          fields {
            slug
          }

해결 방법

아래 두개의 방법인 truncate와 exerpt_separator 중에 하나만 사용하면 아래와 같이 해결된다. 아무래도 excerpt_separator를 사용하면 내가 원하는 부분에서 자를수 있지만 항상 모든 글에 작성해줘야 하는 번거로움이 있으니 truncate를 사용하는것을 추천한다.

truncate

한글이 있는 글에서는 pruneLength 대신에 truncate를 통해서 내용 요약을 화면에 출력할 수 있다.

  query($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          id
          excerpt(truncate: true)
          fields {
            slug
          }

excerpt_separator 사용

그 외에도 gatsby-config.js에서 option에 exerpt_separator를 추가하고, 글을 작성할때 내가 원하는 위치에 exerpt_separator를 사용하면 exerpt의 값으로 들어간다

  resolve: `gatsby-transformer-remark`,
      options: {
        excerpt_separator: `<!--more-->`,
        truncate: true,

markdown에서 사용하기 위해서는 아래와 같이 exerpt_separator와 100% 일치해서 작성해줘야 한다. 로 하면 동작 안한다.

안녕하세요. 여기까지가 excerpt 입니다.

<!--more-->

이후는 본문 내용입니다.