믹스에서 메타 태그 동적으로 설정하기

일반적으로 웹 사이트를 개발할 때, 웹 페이지의 메타 정보는 웹 페이지에 불러오는 일부 내용에 의해 결정된다.
한 제품의 이어폰 페이지에는 Sony Headphones, the number one product in its class!, 채팅 페이지에는 제목이 있을 수 있습니다. Conversation with Leeland, 또는 구글 검색 결과에 표시하고 싶은 특정한 이미지가 있을 수 있습니다.
HTML에서 메타 태그를 사용하면 쉽게 설정할 수 있지만 여러 페이지를 처리할 수 있는 공유 구성 요소를 사용하는 페이지에서 메타데이터를 설정하려면 어떻게 해야 합니까?(예: 재사용 가능한 제품 페이지 구성 요소)
Remix은 매우 간단한 설치 방법을 제공합니다.

The repository for the final sample project can be found here

믹스 프로젝트 시작
우리는 /profile/<username>과 비슷한 URL에 프로필 페이지를 만들고 메타데이터를 사용하여 브라우저의 제목 옵션을 <username>'s Profile Page으로 업데이트할 것입니다.
사업을 시작하기 위해서, 우리는 계속해서 새로운 Remix 프로젝트를 창설할 것이다.

npx create-remix@latest

This tutorial assumes you have node installed and up-to-date

일단 네가 완성하면, 너의 새로운 프로젝트를 계속 열어라.

구성 파일 경로 설정
Remix의 라우팅 시스템은 프로젝트의 파일에 따라 작동합니다.기존 /app/routes/index.tsx은 /의 홈 경로가 됩니다.
우리는 모든 사용자 이름을 사용할 수 있고 사용자의 데이터를 얻을 수 있는 프로필에 경로를 설정해야 한다./app/routes에 profile.$username.tsx이라는 파일을 만듭니다.
여기에 사용된 명명약정 때문에, 이것은 /profile곳의 루트이며, 어댑터 파라미터가 있는 $username의 하위 루트가 있을 것이다.우리는 모두 /profile/$username개의 노선이 있다.
계속하여 다음 코드를 파일에 붙여넣습니다.

import { json, LoaderFunction, useLoaderData } from 'remix'

type User = {
    username: string;
    first: string;
    last: string;
}

export let loader: LoaderFunction = async ({ params }) => {
    const users: User[] = [
        {
            username: 'sabinthedev',
            first: 'Sabin',
            last: 'Adams'
        },
        {
            username: 'leeland',
            first: 'Leeland',
            last: 'Adams'
        }
    ]

    const user = users.find(user => user.username === params.username)

    if (!user) {
        throw new Response('Not Found', {
            status: 404
        })
    }
    return json(user)
}

export default function Profile() {
    const user = useLoaderData()

    return (
        <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', background: '#0c0f12' }}>
            <h2 style={{ flex: 1, textAlign: 'center', color: '#f1f1f1', fontFamily: 'system-ui' }}>{user.first} {user.last}</h2>
        </div>
    );
}

이것은 사용자의 이름과 성만 표시하는 기본 페이지만 설정합니다.현재 우리는 이미'데이터베이스'에 수동으로 두 명의 사용자를 추가했지만 이것은 실제 데이터 저장소에 연결된 것이라고 상상할 수 있다!
이를 테스트하려면 서버를 부팅하려면 npm run dev을 실행하고 http://localhost:3000/profile/leeland으로 이동하십시오.

아름다웠어하지만 맨 위에 있는 New Remix App 라벨 제목이 유용하지 않습니까?우리는 그것을 더욱 의미 있는 것으로 만들고 싶다.

동적 메타데이터 설정
메타데이터를 설정하기 위해 라우팅에서 메타데이터 함수를 내보낼 수 있으며, Remix는 이 함수를 사용하여 필요한 메타데이터를 자동으로 연결합니다.
우선 MetaFunction 라이브러리에서 remix을 가져오도록 하세요.

import { 
    json,
    LoaderFunction,
    useLoaderData,
+    MetaFunction
} from 'remix'

그런 다음 작업을 시작하려면 내보낸 meta 함수를 계속 추가합니다.

export const meta: MetaFunction = () => {
    return {
        title: 'Profile Page'
    }
}

만약 당신이 지금 브라우저를 보고 있다면, 리믹스가 이 기능을 등록하고, 자동으로 메타 탭을 추가해서 탭 제목을 설정하도록 할 것입니다.

이것은 매우 멋있지만, 만약 우리가 사용자 정의 제목을 원한다면, 우리가 방문한 사용자의 개인 자료에 달려 있습니까?믹서의 MetaFunction은 대량의 유용한 데이터를 포함하는 대상을 수신한다.특히 data 키는 Loader 함수에서 나온 데이터를 포함한다.
불러온 사용자를 방문하려면 누르십시오.

export const meta: MetaFunction = ({ data }: { data: User }) => {
    const formatName = (name: string) => name.charAt(0).toUpperCase() + name.slice(1)
    return {
        title: `${formatName(data.username)}'s Profile Page`
    }
}

이제 우리의 개인 정보 페이지로 돌아가면, 우리는 더욱 묘사적인 소식을 보아야 한다.

이러한 과정을 사용하면 우리는 페이지의 동태를 위해 어떠한 유형의 메타데이터를 설정할 수 있습니다!
이점: Twitter 메타데이터 설정
만약 우리가 트위터에 이 파일의 링크를 공유하고 싶다면?

I'll be using a tool called Ngrok and a to preview what our link preview would look like in a Twitter post.

현재 링크 미리 보기를 보면 비슷한 내용을 볼 수 있습니다👎🏻:

트위터에 우리가 이 데이터를 어떻게 표시하길 원하는지 설명할 수 있는 메타데이터가 없습니다.자세한 내용은 meta 함수를 업데이트합니다.

export const meta: MetaFunction = ({ data }: { data: User }) => {
    const formatName = (name: string) => name.charAt(0).toUpperCase() + name.slice(1)
    return {
      title: `${formatName(data.username)}'s Profile Page`,
      'twitter:card': 'summary_large_image',
      'twitter:creator': `@${data.username}`,
      'twitter:site': `@${data.username}`,
      'twitter:title': `${data.first} ${data.last}`,
      'twitter:description': `${data.first} ${data.last}'s profile page. Check it out @${data.username}`
    }
}

이제 우리는 더욱 이와 같은 것을 얻어야 한다.

아, 많이 좋아졌어!그것은 우리가 공유하고 있는 링크에 대한 유용한 정보를 보여 줍니다.twitter:image 속성을 사용하여 미리 보기 이미지를 추가할 수도 있습니다.

결론
리믹스는 믹스에서 많은 정력을 쏟아낼 수 있는 훌륭한 도구를 가지고 있다.이것은 단지 그중의 한 예일 뿐이다!
이것은 도움이 될 뿐만 아니라 사용자와 검색엔진이 당신의 사이트가 제공하는 내용을 이해하도록 격려할 것입니다!
읽어주셔서 감사합니다!
p. 만약 당신이 이 글을 좋아한다면, 반드시 내가 새로운 글을 발표할 때 나의 업데이트에 관심을 가져야 합니다!