다음 페이지에 코드를 사용하지 않고 가격을 내리는 방법을 사용합니다.js 프로젝트

최초의 제목은 가격 인하와 비고 변환기를 사용하여 동적이고 유지보수가 가능한 다음 것을 만드는 것이다.js 프로젝트
이 블로그는 내가 윌리스 컨설팅 회사 사이트를 재건하는 두 부분의 확장의 첫 번째 부분이다.Next에서 태그 파일을 사용하는 방법을 기록합니다.js는 구축할 때 페이지를 동적으로 만들고 Netlify CMS를 사용하여 원본 코드를 로컬 컴퓨터에 다운로드하지 않아도 편집할 수 있도록 합니다.
완료된 웹 사이트(GitHub 페이지에 호스팅): https://wallisconsultancy.co.uk
소스 코드: https://github.com/james-wallis/wallisconsultancy

배경.
내가 월리스콘센트를 재건할 때co.uk은 Next를 사용합니다.몇 달 전, 이렇게 한 이유 중 하나는 PHP를 통해 이루어지고 Docker 용기에서 실행될 때보다 유지 보수가 쉽다는 것이다.전반적으로 말하자면 나는 이 목표를 실현했지만 내용을 바꾸는 것은 여전히 너무 복잡하다. 이것은 React를 수정하는 것을 의미한다.js 파일은 pages 디렉터리에 있고 다음 디렉터리는 입니다.js는 페이지를 구분하는 데 사용됩니다.
Markdown을 사용하여 페이지를 작성하는 것이 React를 사용하는 것보다 더 좋은 체험을 가져다 줄 수 있습니다.js.우선, 순수한 텍스트로 글을 쓸 때, 시작 표시와 끝 표시나 클래스의 양식을 걱정할 필요가 없고, 내용에 주목할 필요가 있다.
따라서 이 블로그에서 다음 블로그를 어떻게 설정하는지 보여 드리겠습니다.js 사이트는 모든 페이지의 내용과 동적 루트에 대해 가격을 낮추어 모든 페이지에 일반적인 레이아웃을 사용할 수 있도록 합니다.이러한 것들을 결합함으로써 우리는 최종적으로 더욱 쉽게 유지보수할 수 있는 사이트를 얻을 수 있다. 이 사이트는 페이지 디렉터리에 두 개의 파일만 있고 그 내용은 페이지마다 가격 인하 파일을 편집해서 변경할 수 있다.

계획
다음 방법을 사용하여 웹 사이트를 만들려면 해당 웹 사이트가 가격 인하 파일에서 해당 컨텐트를 가져옵니다.

Next.js dynamic routes .

Remark-parse 플러그인과 함께 가격 인하를 반응으로 전환했다.주의:저는 리마크 react을 사용합니다.리마크 html이 아니기 때문에 dangerouslySetInnerHTML를 사용할 필요가 없습니다.remark-react에서 이 정보를 더 많이 읽어 주십시오.

pages 디렉토리에 두 페이지를 만듭니다.

index.js - 홈 페이지

[slug].js - 한 페이지 간격

AFAIK는 /를 Next를 통과하는 동적 노선으로 삼을 수 없다.js-다른 상황을 아시면 연락 주세요. 이 댓글을 추가합니다!
주의: "모든 경로 포획"을 실행할 수 있습니다. 이것은 URL에서 하위 경로를 실행할 수 있도록 해야 하지만, 이 강좌에서는 최고급 경로 ("/", "/about") 를 어떻게 실행하는지 설명합니다.하도급 노선 결산remark-react GitHub에 대한 더 많은 정보를 알고 싶습니다.
the Next.js docs
오다
태그를 HTML로 변환하려면 소프트웨어 패키지를 설치해야 합니다.달리기npm i -s unified remark-parse remark-react gray-matter.
다음은 다음 단계에서 사용할 도움말 함수를 만들어야 합니다.js 프로그램은 디렉터리에 있는 모든 태그 파일과 내용 파일의 목록을 가져올 수 있습니다.이러한 함수에 대해 utils 파일을 생성하여 다음 JavaScript에 붙여넣습니다.나는 보통 그것들을 lib 디렉터리에 놓고 파일 markdown.js ( 을 호출했다.

import fs from 'fs';
import { join } from 'path';
import matter from 'gray-matter';

/**
 * _pages and _pages/dynamic directory where the markdown content will live
 * _pages will have the home.md (aka index or /)
 * _pages/dynamic will be home to all other pages (aka [slug].js)
 */
const pagesDirectory = join(process.cwd(), '_pages');
const dynamicPagesDirectory = join(pagesDirectory, 'dynamic');

/**
 * Gets all the files (slugs) in a directory
 */
export function getSlugsFromDirectory(dir) {
  return fs.readdirSync(dir);
}

/**
 * Gets the contents of a file
 * The gray-matter (metadata at the top of the file) will be
 * added to the item object, the content will be in
 * item.content and the file name (slug) will be in item.slug.
 */
export function getBySlug(dir, slug, fields = []) {
  const realSlug = slug.replace(/\.md$/, '');
  const fullPath = join(dir, `${realSlug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const { data, content } = matter(fileContents);

  const items = {};

  // Ensure only the minimal needed data is exposed
  fields.forEach((field) => {
    if (field === 'slug') {
      items[field] = realSlug;
    }
    if (field === 'content') {
      items[field] = content;
    }

    if (data[field]) {
      items[field] = data[field];
    }
  });

  return items;
}

/**
 * Returns contents of a page in the _pages directory
 */
export function getPageContentBySlug(slug, fields = []) {
  return getBySlug(pagesDirectory, slug, fields);
}

/**
 * Returns contents of a page in the _pages/dynamic directory
 */
export function getDynamicPageContentBySlug(slug, fields = []) {
  return getBySlug(dynamicPagesDirectory, slug, fields);
}

/**
 * Returns a list of all the pages in the _pages/dynamic directory
 */
export function getAllDynamicPages(fields = []) {
  const slugs = getSlugsFromDirectory(dynamicPagesDirectory);
  const pages = slugs.map((slug) => getDynamicPageContentBySlug(slug, fields));
  return pages;
}

프로젝트에 JavaScript를 복사하면 동적 페이지를 만들 수 있습니다!
view on GitHub
동적 페이지 만들기([slug].js)
Next를 사용합니다.js dynamic 페이지, 우리는 _pages/dynamic 디렉터리에 있는 모든 태그 파일에 단독 페이지를 만들고 pages 디렉터리에 파일을 만들 수 있는 기능을 추가할 것입니다.
이를 위해서는 몇 가지 다음 단계가 필요하다.js 기능:

: 다음 단계를 알리는 데 사용됩니다.js는 어떤 URL 경로를 보여 줍니다. 따라서 이 함수에서 우리는 위의 getStaticPaths 파일에서 getAllDynamicPages를 호출할 것입니다.

markdown.js : 이 함수는 구축할 때 페이지의 다른 도구를 가져오는 데 사용되기 때문에 이 함수에서 보여줄 getStaticProps(파일 경로)를 수신하여 페이지의 메타데이터와 내용을 가져오는 slug에 전달합니다.

getDynamicPageContentBySlug 디렉토리에 [slug].js라는 페이지를 만들면 다음과 같은 내용이 포함됩니다.

import PrintMarkdown from '../components/markdown/printMarkdown';
import { getDynamicPageContentBySlug, getAllDynamicPages } from '../lib/markdown';

export default function DynamicPage({ page }) {
  const {
    title,
    description,
    slug,
    content,
  } = page;

  return (
    <div>
      <h1>{title}</h1>
      <h2>{description}</h2>
      {/* we'll go into the PrintMarkdown component later */}
      <PrintMarkdown markdown={content} />
    </div>
  );
}

export async function getStaticProps({ params }) {
  const { slug } = params;

  // Pass in the fields that we want to get
  const page = getDynamicPageContentBySlug(slug, [
    'title',
    'description',
    'slug',
    'content',
  ]);

  return {
    props: {
      page: {
        ...page,
      },
    },
  };
}

export async function getStaticPaths() {
  const posts = getAllDynamicPages(['slug']);
  const paths = posts.map(({ slug }) => ({
    params: {
      slug,
    },
  }));
  return {
    paths,
    fallback: false,
  };
}

프로젝트 맨 위에 있는 pages 디렉토리에 다음 태그가 포함된 태그 파일.md을 생성합니다.

---
title: "Hello dynamic world!"
description: "My first dynamic Page"
---

# Heading 1

A paragraph with some **bold text**.

만약 네가 그것을 운행한다면, 다음.js에서 오류가 발생합니다. _pages/dynamic 구성 요소가 존재하지 않기 때문입니다.
PrintMarkdown
태그 구성 요소 인쇄
가격 인하를 React로 바꿀 수 있는 구성 요소를 만듭니다.
components 디렉토리에 파일을 만들고 다음을 사용하여 호출합니다PrintMarkdown.

import unified from 'unified';
import parse from 'remark-parse';
import remark2react from 'remark-react';
import markdownStyles from './markdown-styles.module.css';

export default function PrintMarkdown({ markdown }) {

  // Convert the Markdown into React
  const content = unified()
    .use(parse)
    .use(remark2react)
    .processSync(markdown).result;

  return (
    <div className={markdownStyles.markdown}>
      {content}
    </div>
  );
}

파일이 태그를 React로 변환하고 DOM에 추가합니다.React 스타일을 설정하려면 를 사용합니다.나는 내가 사용하는 스타일에 대해 토론하지 않겠지만, 너는 윌리스 컨설팅 회사의 스타일css-modules을 찾을 수 있다.
일단 상기 모든 내용을 추가하면 다음 내용을 실행할 수 있습니다.js 프로젝트, 그리고 제목, 설명, 가격 인하를 보여 주는 페이지를 보았습니다.
주의: 가격 인하 중 사이트의 다른 부분으로 이동하는 모든 링크는 <a> 라벨이 아니라 <Link> 라벨로 전환됩니다.js_pages/dynamic 라벨.
동적 웹 사이트를 만드는 작업은 거의 끝났습니다. / 디렉터리에 더 많은 태그 파일을 만들고 다음 방문할 때 브라우저에서 접근할 수 있어야 합니다.js가 실행 중입니다.마지막으로 동적 페이지의 색인 페이지 ((index.md 를 단독으로 만들 수 있습니다. /index 라는 파일을 만들면 홈 페이지에 적용되지 않을 것입니다. (URL은 / 좋지 않을 것입니다.)
on GitHub
인덱스 페이지getStaticPaths색인 페이지는 위의 동적 페이지와 유사하지만 slug 다음 페이지를 사용하지 않습니다.js 함수 getPageContentBySlug 함수 호출 getStaticProps 을 home 에서 _pages/home.md 로 하드코딩해서 태그 파일 _pages/dynamic 을 읽을 수 있도록 합니다. getPageContentBySlug먼저 _pages 디렉토리에 태그 파일을 만들고 다음을 제공합니다.

--------
title: Home
description: "Your home page"
--------

# Home page

This is your home page

그런 다음 pages 디렉토리에 index.js라는 이름의 새 파일을 만들고 다음을 제공합니다.

import PrintMarkdown from '../components/markdown/printMarkdown';
import { getDynamicPageContentBySlug, getAllDynamicPages } from '../lib/markdown';

export default function IndexPage({ page }) {
  const {
    title,
    description,
    slug,
    content,
  } = page;

  return (
    <div>
      <h1>{title}</h1>
      <h2>{description}</h2>
      <PrintMarkdown markdown={content} />
    </div>
  );
}

export async function getStaticProps() {
  // Here we're using the getPageContentBySlug 
  // as opposed to getDynamicPageContentBySlug
  // We're also passing in the string 'home' to tell it 
  // we want to use the _pages/home.md file for the 
  // page props
  const page = getPageContentBySlug('home', [
    'title',
    'description',
    'slug',
    'content',
  ]);

  return {
    props: {
      page: {
        ...page,
      },
    },
  };
}

일단 이 두 파일을 만들고 채우면 홈페이지를 사용할 수 있을 것입니다.

포위하여 체포하다
이 블로그에서 우리는 다음 블로그를 설정했다.js 응용 프로그램은 가격 인하 파일을 사용하여 그 경로를 구축합니다. 우리는 그것을 동적화합니다. 그러면 우리는 파일 하나만 유지할 수 있습니다.알겠습니다. 두 개의 파일 ([slug].js와 index.js) 이 있지만 루트 경로는 예외입니다. (만약 당신도 이 동태화를 할 수 있다면, 평론을 남겨 주십시오. 저는 튜토리얼을 업데이트할 것입니다.)
이 두 부분으로 구성된 시리즈의 두 번째 부분에서, 나는 Netlify CMS를 Wallis Consultancy 사이트에 추가하여 사이트의 페이지를 동적으로 만들고 수정할 수 있도록 할 것이다.
기억해라:react 프로젝트에서 만든 링크는 다음 링크가 아니라 <a> 표시가 될 것입니다.js<Link> 라벨.로컬 링크에 <Link> 태그를 사용하고 외부 링크에 <a> 태그를 사용하려면 사용자 정의 구성 요소 - 를 사용해야 합니다.