NuxtJS/Content 모듈 시작

만약 당신의 제품이나 서비스를 위해 문서 사이트, 심지어 블로그를 만들고 싶다면,NuxtJS와 그들Content 모듈을 사용하는 것을 권장해도 될까요?

Nuxt/Content를 사용해야 하는 이유

만약에 당신이 VueJS를 좋아한다면Nuxt는 사이트SEO의 우호적인 선택임이 분명하다

정적/JAMstack 사이트로 배치할 수 있음

Nuxt/Content에서 태그 파일 주위에 HTML 태그 포장

가격 인하에 Vue 구성 요소를 추가할 수 있습니다. Nuxt/Content에서 활성화됩니다!🔥🔥🔥

컨텐츠 관리는 간단합니다. 기본적으로 매우 기본적인 평면 파일인 CMS

간편한 맞춤형 및 확장

좋은 지역사회 지원과 유용한 예시 코드로 직접 방문할 수 있습니다

우리는 Cleavr에서 정말로 Nuxt를 사랑하게 되었다. 녹슨 Ol'Zendesk 문서 사이트를 새로운, 개선된 문서 사이트로 바꾸고 싶을 때 나는 정말 어떤 방식, 형상 또는 형식으로 Nuxt를 사용하고 싶다는 것을 알았다.
Google과 몇몇 Nuxt 리소스에서 초보자 템플릿을 찾다가 Nuxt/Content를 만났습니다.내가 그것에 대해 많이 알면 알수록 나는 그것을 더욱 좋아한다.
나에게 있어서 진정한 관건은 내가 Vue 구성 요소를 태그 파일에 직접 넣어서 Vue 구성 요소가 진정으로 작동하도록 하는 것이다.판매!💰
Nuxt/Content에도 자체 starter template가 있으므로 빠르게 시작할 수 있습니다.그러나 나는 자신의 필요에 따라 그것에 대해 더 많은 맞춤형 제작을 하고 싶다.
처음부터 끝까지 나는 단지 주말 만에 우리를 만들었다new documentation site.그리고알려줘야겠어.Nuxt/내용이 예상을 뛰어넘어 즐겁게 사용되고 있습니다!
사실 이것은 일종의 즐거움이다. 나는 이 강좌 시리즈를 만들고 싶다. 일부 원인은 그것을 계속 사용할 이유가 있기 때문이다.🙃
본 강좌에서, 우리는 NuxtJS/VueJs, Nuxt/Content,TailwindCSS, Algolia와 다른 편리한 라이브러리로 문서 사이트 템플릿을 만들 것입니다. 이 라이브러리들은 아주 나쁜 ace docs 사이트를 구성할 것입니다.
최종 결과가 어떻게 나올지 궁금하다.Take a look at the live preview

새 Nuxt 항목 만들기

로컬 컴퓨터에서 터미널을 열고 명령을 실행하여 새 Nuxt 프로젝트를 만듭니다.

yarn create nuxt-app my-docs

너는 my-docs 네가 명명하고 싶은 모든 항목을 선택할 수 있다.
이것은 설정 모드로 들어갈 것입니다. 프로젝트를 어떻게 설정하는지 물어볼 것입니다.
프로그래밍 언어JavaScript, UI 프레임워크TailwindCSS, 렌더링 모드Universal, 배치 목표Static를 선택해야 합니다.
설치가 완료되면 cd 새 프로젝트에 들어가서 프로젝트를 실행합니다.

cd my-docs
yarn dev

프로젝트가 실행되고 localhost:3000에서 사용할 수 있습니다.
로컬 호스트에서 사이트를 볼 때 기본 Nuxt 시작 페이지가 표시됩니다.

Nuxt/Content 모듈 설치

프로젝트 루트 디렉토리의 터미널에서 다음 명령을 실행하여 Nuxt/Content 모듈을 설치합니다.

yarn add @nuxt/content

현재, 좋아하는 편집기에서 항목을 열고 nuxt.config.js 파일을 엽니다.
여기서 우리는 @nuxt/content를 하나의 모듈로 추가할 것이다.

modules: [
   '@nuxt/content'
],

구조 추가

나는 이 문제를 깊이 토론하지 않을 것이다. 왜냐하면 이것은 실제적으로 기존의Nuxt 시작 페이지에 레이아웃 구조를 추가하는 것이고 주로TailwindCSS 디자인 스타일을 사용하기 때문이다.
관심 있으시다면 아래 동영상을 보십시오. 저희는 사이트 제목과 왼쪽 내비게이션을 추가할 것입니다.

제목 Vue 구성 요소 추가

사이드바 Vue 구성 요소 추가

제목과 사이드바를 쉽게 이동할 수 있도록 합니다.

TailwindCSS를 사용하면 화면 너비에 따라 요소를 쉽게 표시하거나 숨길 수 있습니다.
따르다본 강좌의 코드를 보기 GitHub Repo - phase 1.
유튜브에서도 온전한 영상을 볼 수 있다.
VPS 서버 및 어플리케이션 배포를 관리할 도구를 찾고 계십니까?전화cleavr.io로 문의하십시오.
Vue/Nuxt, Tailwind 및 Algolia를 사용하여 문서 웹 사이트를 만드는 전체 자습서 시리즈입니다.