Vortex - Lewis Hamilton Drives보다 빠르게 구축된 블로그

Vortex는 몇 줄의 코드로 테마가 있는 모듈식 반응형 블로그를 구축할 수 있는 오픈 소스 라이브러리입니다!

Vortex로 멋진 블로그를 만들어 봅시다!

1단계: Vortex 설치 및 가져오기

React 프로젝트 디렉토리 내에서 다음 중 하나를 실행하여 Vortex를 설치합니다.

npm i @hydralite/vortex
# or
yarn add @hydralite/vortex
# or
pnpm i @hydralite/vortex

이제 Vortex를 설치했으므로 가져오겠습니다.

Vortex 라이브러리와 스타일시트에서 직접 Blog 컴포넌트를 가져와서 그렇게 할 수 있습니다.

import "@hydralite/vortex/dist/style.css";
import Blog from "@hydralite/vortex";

2단계: 블로그 구성 요소 초기화

import "@hydralite/vortex/dist/style.css";
import Blog from "@hydralite/vortex";

function App() {
  return (
    <div>
      <Blog />
    </div>
  );
}

export default App;

이제부터는 가독성을 위해 주로 Blog 구성 요소에 초점을 맞출 것입니다.

3단계: 레이아웃 선택

블로그 구축의 첫 번째 단계는 레이아웃을 선택하는 것입니다. Vortex와 함께 번들로 제공되는 3개의 내장 레이아웃이 있습니다.

각 레이아웃에 대해 자세히 알아보려면 를 확인하세요.

지금은 레이아웃을 선택하겠습니다.

<Blog
    {/* You can also use Hashnode or DevTO instead  */}
    layout = "Default"
/>

4단계: 콘텐츠 추가

이제 블로그에 콘텐츠를 추가할 시간입니다!

Vortex는 마크다운 콘텐츠를 지원하므로 표시할 일부를 제공하겠습니다!

const content = `
Everything's supported - a [link](https://example.com), some \`inline\` content, **bold** text, <ins>underlined text</ins>, and even a codeblock with syntax highlighting:

You can specify the language of the codeblock after the backticks (which need to be escaped).
\`\`\`js
console.log("Here's some JavaScript code!");
console.log("it works inside the codeblock!");
\`\`\`

### Images
![image](https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg)

### Tweet Embeds

Below is a tweet embed:
[tweet](https://twitter.com/elonmusk/status/1470157804304572420?s=20)

### GitHub Gist Embeds

Here's a GitHub gist:
[gist](https://gist.github.com/getify/2b53198906d320abe650)

### CodePen Embeds
[codepen embed](https://codepen.io/alvaromontoro/pen/vYexLGV)
`;

이제 콘텐츠를 작성했으므로 블로그에 전달해 보겠습니다.

<Blog layout="Default" content={content} />

5단계: 헤더 추가

배너, 제목, 부제목, 그리고 카테고리로 블로그를 꾸며야 할 때입니다!

<Blog
  layout="Default"
  content={content}
  header={{
    title: "Here is my title",
    subtitle: "Here's a subtitle",
    image: {
      src: "https://images.pexels.com/photos/10437856/pexels-photo-10437856.jpeg?auto=compress&cs=tinysrgb&fit=crop&fp-y=0.53&h=500&sharp=20&w=1400",
      borderRadius: "20px",
    },
    category: {
      title: "Development & Testing",
    },
  }}
/>

6단계: 메타데이터 삽입

author 와 date 와 같은 메타데이터를 기사에 삽입해 보겠습니다.

<Blog
    layout = "Default"
    content = {content}
    header = {{...}}
    author = {{
            name: 'Look! It\'s me!',
            avatar: 'https://avatars.githubusercontent.com/u/63039748?v=4'
    }}
    date = '12 December, 2021'
/>

7단계: 반응 추가

이 단계에 대한 자세한 내용은 .

<Blog
    layout = "Default"
    content = {content}
    header = {{...}}
    author = {{
            name: 'Look! It\'s me!',
            avatar: 'https://avatars.githubusercontent.com/u/63039748?v=4'
    }}
    date = '12 December, 2021'
    reactions = {{
        onClick: () => {},
        reactions: [
            {
                name: 'Heart',
                emote: '❤',
                upvotes: 2
            },
            {
                name: 'Thumbs Up',
                emote: '👍',
                upvotes: 10
            }
        ]
    }}
/>

8단계: 나만의 것으로 만들기

끝내기 위해 블로그를 사용자 정의합시다! 자세한 내용은 팔로우하세요.

우리는 당신의 도움이 필요합니다

소용돌이에 대해 어떻게 생각하세요? 저에게 알려주십시오. 저는 궁금하고 귀하의 피드백을 좋아할 것입니다!

우리를 지원하고 싶다면 Product Hunt 페이지에서 upvote와 우리 GitHub repository에 별표는 믿을 수 없을 것입니다.