윅스 (Wix) 코딩 강의 중급 (Intermediate) - 블로그 포스트 페이지 만들기 (Custom Post Page) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 블로그 포스트 페이지 만들기 (Custom Post Page) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 블로그 포스트 페이지 만들기 (Custom Post Page) - 윅스 블로그 (Wix Blog)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

블로그 포스트 페이지를 커스터마이징하여 만듭니다.

 

예제 보러가기 (View Example)

My Weekend in Lisbon

 

예제 에디터 확인하기 (Edit Now)

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션 (Blog/Posts Collection)
• 데이터베이스 컬렉션 (Blog/Categories Collection)
• 데이터베이스 컬렉션 (Post Extra Data Collection)
• 스트립
• 텍스트 (글 작성자 이름)
• 텍스트 (사진 이름)
• 텍스트 (블로그 글 제목)

 

 

코드 (Code)

Post

import wixData from 'wix-data';

let currentPost
$w.onReady(function () {

	$w("#post1").getPost().then(async post => {
		currentPost = await loadExtraPostData(post)
		assignPostDataToUIElements()
	});
})

async function loadExtraPostData(post) {

	let postDataFromCollection = await wixData.query("PostExtraData")
		.eq("post", post._id)
		.find()

	postDataFromCollection = postDataFromCollection.items[0]
	return mergePostData(post, postDataFromCollection)
}

async function mergePostData(post, extraData) {
	return Object.assign({}, post, extraData)
}

function assignPostDataToUIElements() {
	$w("#postTitle").text = currentPost.title
	$w("#authorName").text = `Written by: ${currentPost.author}`
	$w("#photographerName").text = `Images by: ${currentPost.photographer}`
	$w("#postHeaderStrip").background.src = currentPost.coverImage
	$w("#postHeaderStrip").show("fade")
}

 

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
}

 

API

$w.Text API

$w.PostPage API

Wix Data API

 

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 블로그 답변란 만들기 (Custom Comments) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 중급 (Intermediate) - 좋아요 버튼 만들기 (Custom Like Button) - 윅스 블로그 (Wix Blog)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Custom Post Page | Corvid by Wix Examples | Wix.com