Nuxt 프런트엔드에 Markdown/Strapi 리치 텍스트 표시.

우리는 발전하고 있습니다! 이제 홈페이지의 대부분을 완료했고 Strapi 백엔드의 상당 부분을 완료했습니다.

이제 막 가입하신 분들을 위해 Nuxt, Strapi, TailwindCSS로 개인 포트폴리오를 구축하는 과정을 통한 시리즈입니다.

이제 프런트엔드에 markdown/또는 Strapi 서식 있는 텍스트 속성을 표시하는 방법에 대해 작성하겠습니다.

Strapi에는 마크다운을 생성하는 서식 있는 텍스트 편집기가 있습니다. 프런트엔드에 마크다운을 표시하려면 마크다운을 HTML로 구문 분석해야 합니다.


여기에서 템플릿 태그에 v-html을 사용하더라도 내 콘텐츠가 모두 함께 부서지는 것을 볼 수 있습니다. 또한 링크가 제대로 된 링크가 아닙니다.

이것은 매우 좋지 않은 것처럼 보이므로 마크다운을 올바르게 구문 분석해야 합니다.

내 프로젝트에서는 이를 위해 npm 패키지markdownit를 사용하기로 결정했습니다. 프런트 엔드에서 데이터를 빠르게 구문 분석하는 가장 빠르고 간단한 경로를 제공했으며 사이트에 통합하는 데 5분도 채 걸리지 않았습니다.

먼저 다음을 실행하여 패키지를 설치했습니다.

yarn add @nuxtjs/markdownit
이것은 패키지를 내 node_modules 폴더에 추가하고 패키지를 내 package.json의 종속성으로 추가했습니다.

그런 다음 nuxt.config.js 파일에 패키지를 추가했습니다.

  modules: [
    '@nuxtjs/markdownit'
  ],

  // This is for displaying rich text content in the frontend.
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true
  }

그런 다음 Vue 페이지 구성 요소의 콘텐츠를 구문 분석해야 했습니다.

asyncData()를 사용하여 Nuxt 서버의 Strapi API에서 데이터를 구문 분석하기 때문에 문서에 설명된 것과 약간 다르게 이 작업을 수행해야 했습니다.

markdown 패키지를 사용하려면 $md를 asyncData() 메서드에 전달하고 템플릿에 전달하기 전에 markdown을 구문 분석하는 데 사용해야 했습니다.

$md를 전달하고 이를 사용하여 마크다운을 렌더링한 후 Vue 페이지 구성 요소의 내 스크립트 태그는 다음과 같습니다.

export default {
  async asyncData({ $axios, $md }) {

    //I am also using axios to get the content from the Strapi API.
    const home = await $axios.$get("/home-page");
    //This is where I use $md to parse the markdown for the example in the photos.
    const content = $md.render(home.content);

    const apiRoute = 'http://localhost:1337';

    const heroImageUrl = apiRoute + home.hero_image.url;

    const posts = await $axios.$get("/posts?_limit=4");

    const projects = await $axios.$get("/projects?_limit=2");

    const project = projects[0];
    const projectImage = apiRoute + project.main_image.url;
    const projectDescription = $md.render(project.description)

    const secondProject = projects[1];
    const secondProjectImage = apiRoute + secondProject.main_image.url;
    const secondProjectDescription = $md.render(secondProject.description)


    return {
      home,
      heroImageUrl,
      posts,
      content,
      project,
      projectImage,
      projectDescription,
      secondProject,
      secondProjectImage,
      secondProjectDescription };
  },
};

보시다시피 제가 파싱하는 부분은 home.content와 프로젝트 설명입니다.

또한 Vue 템플릿에서 해당 데이터에 조금 더 빠르게 액세스하기 위해 몇 가지 다른 변수를 빌드했음을 알 수 있습니다.

마지막 단계

마지막으로 해야 할 일은 Vue 페이지 구성 요소의 템플릿이 데이터를 올바르게 참조하는지 확인하는 것입니다.

홈 콘텐츠의 경우 다음과 같습니다.

<div class="prose prose-lg text-gray-500 mx-auto" 
v-if="content" 
v-html="content"></div>

다음은 현재 마크다운의 스크린샷입니다.


알다시피, 이제 내 콘텐츠가 새 단락으로 멋지게 분할되었으며 이제 링크가 적절한 링크입니다.

이것이 바로 Nuxt에서 마크다운을 파싱하는 방법입니다! 당신의 생각을 알고 싶습니다. 당신이 다르게 할 것이 있습니까?

my portfolio frontend code here 및 backend Strapi application here 도 볼 수 있습니다.