윅스 (Wix) 코딩 강의 초급 (Beginner) - 관련된 글 란 만들기 (Related Posts) - 윅스 블로그 (Wix Blog)
강의 내용 요약
다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.
웹사이트 내의 블로그에 같은 해시테그를 이용하고 있는 블로그 글과 인기 있는 글들을 보여주는 기능을 만듭니다.
Post | Blog-API Related
Where to Find the Best Gelato in Rome
www.wix.com
Log In | Wix
Login to Wix.com
users.wix.com
강의 내용 만드는법
만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.
- 데이터베이스 컬렉션 (Blog/Posts Collection)
- 반복 레이아웃 / 리피터 (Popular posts repeater)
- 반복 레이아웃 / 리피터 (Related posts repeater)
- 데이터 - 반복레이아웃 / 리피터에 보여질 3개 이상의 글과 좋아요 갯수
코드 (Code)
data.js
import wixData from 'wix-data';
export async function PostReactionData_beforeInsert(item, context) {
const { items } = await wixData.query("PostReactionData")
.eq("userId", item.userId)
.eq("post", item.post)
.find()
if (items.length) {
return Promise.reject("Duplicated Likes Forbidden")
}
return item
}
Post
import wixLocation from 'wix-location';
import wixData from 'wix-data';
let currentPost
$w.onReady(function () {
wixLocation.onChange(() => {
return loadPostPage()
})
return loadPostPage()
});
function loadPostPage() {
return $w("#post1").getPost().then(post => {
currentPost = post
return LoadRelatedPosts()
})
}
function LoadRelatedPosts() {
return wixData.query("Blog/Posts")
.ne("_id", currentPost._id)
.hasSome("hashtags", currentPost.hashtags)
.limit(3)
.find()
.then(results => {
$w("#relatedPostsRepeater").data = results.items;
})
}
export function relatedPostsRepeater_itemReady($item, itemData, index) {
$item("#imageRelated").src = itemData.coverImage;
$item("#titleRelated").text = itemData.title;
$item("#dateRelated").text = itemData.publishedDate.toLocaleDateString();
$item("#buttonRelated").link = itemData.postPageUrl;
}
API
Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법
윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)
윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)
윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools) 설명) 개발자 도구를 활성화하기 위해서는 1. 에디터를 엽니다. 에디터 맨 위 상단 메뉴에서 코드를 클릭한 다음 개발�
limejuicer.tistory.com
연관된 토픽)
윅스 (Wix) 코딩 강의 초급 (Beginner) - 최신글 란 만들기 (Trending Posts) - 윅스 블로그 (Wix Blog)
윅스 (Wix) 코딩 중급 (Intermediate) - 관련 상품 만들기 (Related Items) - 윅스 쇼핑몰, 스토어 (Wix Stores)
윅스 (Wix) 코딩 중급 (Intermediate) - 블로그 포스트 페이지 만들기 (Custom Post Page) - 윅스 블로그 (Wix Blog)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
콜비드 - 윅스 코딩 (Corvid - Wix coding)
Related Posts | Corvid by Wix Examples | Wix.com
Display related posts in your blog post page
www.wix.com
댓글