웹사이트에 매체 및 YouTube RSS 피드를 삽입하는 방법

자신의 모든 작업(Medium의 블로그 게시물 또는 YouTube 채널)을 전 세계에 보여줄 수 있는 자신만의 랜딩 페이지 또는 개인 포트폴리오를 구축하려는 경우. 그런 다음 "내 웹사이트에 중간 RSS 피드 또는 YouTube RSS 피드를 삽입하는 방법"이라는 질문에 대한 솔루션을 요청할 수 있습니다. 운 좋게도 이 튜토리얼에서 이 솔루션을 제공했습니다. 여기에서 그것을 공유하게 되어 매우 기쁩니다. 여러분도 흥분되시기 바랍니다. 좋아, 시작하자!

이 항목에서 살펴볼 내용:

웹 사이트에 중간 RSS 피드를 삽입하는 방법

웹 사이트에 YouTube RSS 피드를 삽입하는 방법

이 튜토리얼에서 사용하고 있는 기술:

ReactJS(원하는 대로 다른 프런트 엔드 라이브러리/프레임워크를 사용할 수 있음)

RSS를 JSON으로 변환하여 RSS URL 링크를 가져올 수 있도록 JSON 데이터로 변환한 다음 결과를 사이트에 포함할 수 있습니다. (해당 설명서를 읽을 수 있습니다here.

Material UI(이것은 React App의 UI 디자인에 대한 개인적인 선호 사항입니다. 필요에 따라 다른 프런트 엔드 라이브러리를 사용할 수 있습니다.)

선택 사항: 블로그 게시물 또는 비디오를 소셜 미디어에 공유하기 위한 react-share 종속성 패키지(이 데모에는 Facebook을 사용했습니다)

1. 웹사이트에 중간 RSS 피드를 삽입하는 방법

먼저 다음과 같이 mediumRSSFeed 변수를 해당 문자열 값(URL 링크)에 할당합니다.

const mediumRssFeed = “https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@YOUR_MEDIUM_PROFILE_NAME_HERE”

이 링크가 올바른지 확인하려면 중간 프로필 이름과 함께 이 URL 링크를 빈 브라우저에 복사한 다음 Enter 키를 누르십시오. JSON 개체를 볼 수 있으면 이 링크가 올바른 것입니다. 이는 다음과 같이 표시되어야 합니다.



그런 다음 아래와 같이 기사 데이터를 가져옵니다.

const MAX_ARTICLES = 10;
const [articles, setArticles] = useState();
useEffect(() => {
const loadArticles = async () => {
fetch(mediumRssFeed, { headers: { Accept: “application/json” } })
.then((res) => res.json())
.then((data) => data.items.filter((item) => item.title.length > 0))
.then((newArticles) => newArticles.slice(0, MAX_ARTICLES))
.then((articles) => setArticles(articles))
.catch((error) => console.log(error));
};
loadArticles();
}, [MAX_ARTICLES]);

이 데모에 React Hook을 사용했기 때문에 useState() 및 useEffect() 함수를 사용하여 이 데이터를 가져오는 것을 볼 수 있습니다. 내 페이지에 표시되는 기사 수를 제한하기 위해 MAX_ARTICLES=10으로 설정했지만 원하는 대로 다른 수로 설정할 수 있습니다. max-count가 10을 초과하는 경우 rss2json에 "반환할 피드 항목의 수, 기본값은 10입니다.(이 매개변수를 사용하려면 api_key가 필요합니다.)"라고 되어 있으므로 API 키를 얻기 위해 가입/로그인해야 합니다.
그런 다음 map() 함수는 다음과 같이 기사 배열의 각 항목을 반환하는 데 도움이 됩니다.

{articles
? articles.map((item) => (
<a
className="link"
href={item.link}
target="_blank"
rel="nofollow noopener noreferrer"
title={item.title}
aria-label={item.link}
key={item.link}
>
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={item.thumbnail}
title={item.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{item.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{parseDate(item.pubDate)}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<FacebookShareButton url={item.link}>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</a>
))
: "no article shown"}
In this Demo, I used the helper function parseDate() for item.pubDate to format the date for it easier to read. I added this function in the file name util.js such as below:
export const parseDate = (date) => {
const year = date.substring(0, 4);
const month = date.substring(5, 7);
const day = date.substring(8, 10);
switch (month) {
case "01":
return day + " January " + year;
case "02":
return day + " February " + year;
case "03":
return day + " March " + year;
case "04":
return day + " April " + year;
case "05":
return day + " May " + year;
case "06":
return day + " June " + year;
case "07":
return day + " July " + year;
case "08":
return day + " August " + year;
case "09":
return day + " September " + year;
case "10":
return day + " October " + year;
case "11":
return day + " November " + year;
case "12":
return day + " December " + year;
default:
return "No publication date";
}
};

필요에 따라 이 형식을 사용자 정의할 수 있습니다.
이제 귀하의 기사가 귀하의 페이지에 이와 같이 표시됩니다. 데모here를 참조하십시오.

2. 웹사이트에 YouTube RSS 피드를 삽입하는 방법

마찬가지로 데모에도 동일한 기술을 사용했습니다. 여기서 유일하게 다른 부분은 RSS 피드 URL 링크입니다. 이 데이터는 아래 구조와 같아야 합니다.

const youtubeRssFeed= “https://api.rss2json.com/v1/api.json?rss_url=https://youtube.com/feeds/videos.xml?channel_id=YOUR_CHANNEL_ID_HERE”

위의 방법에 따라 올바른 링크인지 확인할 수도 있습니다. 그런 다음 아래와 같이 YouTube 동영상의 데이터를 가져올 수 있습니다.

const MAX_VIDEOS = 10;
const [videos, setVideos] = useState();
useEffect(() => {
const loadVideos = async () => {
fetch(youtubeRssFeed, { headers: { Accept: “application/json” } })
.then((res) => res.json())
.then((data) => data.items.filter((item) => item.title.length > 0))
.then((newVideos) => newVideos.slice(0, MAX_VIDEOS))
.then((videos) => setVideos(videos))
.catch((error) => console.log(error));
};
loadVideos();
}, [MAX_VIDEOS]);

다시 한 번 MAX_VIDEOS=10으로 설정하여 내 페이지에 표시되는 동영상 수를 제한합니다. 선택에 따라 다른 번호로 설정할 수 있습니다. max-count가 10을 초과하는 경우 rss2json에 "반환할 피드 항목의 수, 기본값은 10입니다. (이 매개변수를 사용하려면 api_key가 필요합니다.)"라고 되어 있으므로 API 키를 얻기 위해 가입/로그인해야 합니다.
또한 map() 함수는 다음과 같이 비디오 배열의 각 항목을 반환하는 데 도움이 됩니다.

{videos
? videos.map((item) => (
<a
className="link"
href={item.link}
target="_blank"
rel="nofollow noopener noreferrer"
title={item.title}
aria-label={item.link}
key={item.link}
>
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={item.thumbnail}
title={item.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{item.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{parseDate(item.pubDate)}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<FacebookShareButton url={item.link}>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</a>
))

이제 YouTube 동영상이 포함되어 다음과 유사하게 표시됩니다.
이 Demo .

귀하의 작업에 감탄하고 즐기십시오!

이 짧은 튜토리얼은 여기까지입니다. 도움이 되었기를 바랍니다. 이에 대한 추가 도움이 필요하면 알려주세요. 읽어주셔서 감사하고 즐거운 하루 보내세요!

더 많은 내 이야기 ​​읽기here .