기본에 널려있는 버튼은,
일체형이라 버튼 위치라든지, 버튼 꾸미는데 제한이 있었다.
여기다,
2개 이상은 설치(?)가 되지 않으니,
걍 하나 만들기로 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 포스트 버튼</title>
<script type="text/javascript">
var postLinks = [
"https://yourblog.blogspot.com/2023/01/post1.html",
"https://yourblog.blogspot.com/2023/02/post2.html",
"https://yourblog.blogspot.com/2023/03/post3.html",
// 블로그의 모든 게시물 링크를 여기에 추가하세요
];
function goToRandomPost() {
var randomIndex = Math.floor(Math.random() * postLinks.length);
window.location.href = postLinks[randomIndex];
}
</script>
</head>
<body>
<button onclick="goToRandomPost()">랜덤 포스트 보기</button>
</body>
</html>
이게 제일 깔끔 해 보이네...
그래 이걸로 하자...
근디, 포스트 주소를 내가 일일히 기입 해야 하는겨?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 포스트 버튼</title>
<script type="text/javascript">
var postLinks = [];
function fetchRSS() {
var rssUrl = "https://yourblog.blogspot.com/feeds/posts/default?alt=rss";
// CORS 프록시를 사용하여 RSS 피드를 가져옵니다
var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
fetch(proxyUrl + rssUrl)
.then(response => {
if (!response.ok) {
throw new Error('네트워크 응답이 정상이 아닙니다.');
}
return response.text();
})
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
.then(data => {
var items = data.querySelectorAll("item");
items.forEach(el => {
postLinks.push(el.querySelector("link").textContent);
});
if (postLinks.length > 0) {
document.getElementById("randomPostButton").disabled = false; // 버튼 활성화
} else {
throw new Error('게시글 링크를 찾을 수 없습니다.');
}
})
.catch(err => {
console.error('RSS 피드를 가져오는 중 오류가 발생했습니다:', err);
alert("RSS 피드를 가져오는 중 오류가 발생했습니다. 나중에 다시 시도해주세요.");
});
}
function goToRandomPost() {
if (postLinks.length === 0) {
alert("게시글 링크를 가져오는 중입니다. 잠시 후 다시 시도해주세요.");
return;
}
var randomIndex = Math.floor(Math.random() * postLinks.length);
window.location.href = postLinks[randomIndex];
}
document.addEventListener("DOMContentLoaded", fetchRSS);
</script>
</head>
<body>
<button id="randomPostButton" onclick="goToRandomPost()" disabled>랜덤 포스트 보기</button>
</body>
</html>
그렇지! RSS를 파싱해서 가져오면 되는겨....
하...
근디 역시 구글...
파싱을 막아놨다...
그러면 포기하는겨?
ㄴㄴ.
일전에 만들어 놓은
이 코드들을 이용하면 되지요...
제일 위 코드 중
window.location.href = postLinks[randomIndex];
이 코드에, postLinks에 배열 형식으로 각 포스트 링크를 넣어두면?
이렇게 정상적으로 작동이 된다.
이렇게 버튼 위치를 내 맘대로 나둘 수 있고,
각 버튼마다 스타일, 갯수 등 마음대로 할 수 있다.
이것을 응용하면,
각 카테고리(주제)마다 랜덤 기능을 수행하는 버튼도 만들 수 있다.
링크만 가져오면 되기 때문이다.
밑에 보면, '더 이상 보지 않기' 체크 박스가 있는데, 그것을 체크하면 그 페이지를 제외한 나머지 랜던 페이지를 보여주는 것이고.
정말 간단하다.
해당 페이지 체크 사항을 기록 했다가 그 페이지가 로드가 되면, 랜덤 페이지 함수를 실행시킨다.
애초에 랜덤 링크 함수에서 해당 페이지 링크를 제외하면 되기는 하지만...
페이지를 한번이라도 로드 해야지, 수익이 오르니까....
화성 갈끄니까...
아직 본 블로그에는 구현 안 해 놓았고,
다른 블로그에 구현 해 놨다.
다른 블로그는... 걍 소비성 게시글이니,,,
근디 이 블로그는 아니니 말이다.
댓글
댓글 쓰기