📔

노션 커버이미지에 링크 연결하기

들어가며

들어가며

우피의 HTML 편집 기능은 꽤 강력한 기능입니다. 이론적으로는 페이지의 모든 부분을 원하는대로 변경하실 수 있어요. 오늘은 이 기능을 이용해서, 노션의 커버 이미지에 링크를 추가해보겠습니다.

사실 팁스에 있는 내용과 그 방법은 거의 모두 비슷합니다. 상세한 방법도 중요하지만 한번 흐름을 따라가보시면, 원하는 변화를 만드실 수 있을 거예요. 우리가 해야할 일은 다음과 같습니다.

변경이 필요한 부분 선택하기

선택한 부분에 필요한 변경 작성하기

우피에 적용하기

이 가이드 문서는 우피의 html 편집 기능 사용 방법에 대한 예시를 들기 위해 만들어졌습니다. 해당 페이지에 있는 모든 코드는 실제 동작하는 코드입니다. ‘예시’와 다른 변경을 원하실 경우, 직접 필요한 코드를 작성해주셔야 합니다. 코드 레벨의 안내는 드리기 어려운 점 양해 부탁드립니다. css 에 대한 더 자세한 설명은 본 문서의 목적을 벗어납니다.

방법

1. 변경이 필요한 부분 선택하기

페이지 상단 부분 없애기 를 참고하시면 더 확인이 쉬울텐데요. 우리가 변경하고자 하는 부분은 .page_cover라는 선택자로 선택이 가능합니다. 아래와 같이요. 크롬의 개발자 도구의 console 에서 직접 실행해보시는 것이 큰 도움이 됩니다.

document.querySelector('.page_cover')
// <img alt class="page_cover ....
JavaScript
복사

2. 필요한 변경 작성하기

우리가 원하는 것은 해당 img 를 클릭하면, 특정 url 의 페이지를 여는 것입니다. 코드는 간단합니다.

var target = document.querySelector(".page_cover")

if (target) {
	// 클릭하면 url 로 이동, 'https://www.google.com' 은 필요한 값으로 변경해주세요.
  target.setAttribute("onclick", "window.open('https://www.google.com')")
  // 이미지 위에 마우스를 올렸을 때 손가락 모양으로(링크처럼) 변하길 원한다면 아래 코드를 이용하세요.
  target.style.cursor = "pointer"
}
JavaScript
복사

3. 우피에 적용하기

우피에 적용은 Oopy HTML 코드 블럭 기능을 이용합니다. 페이지의 적당한 곳에 html 코드 블럭을 두고, 위의 코드를 추가해주세요. oopy 라는 캡션을 다는것도 잊으시면 안됩니다.

<script>
  var target = document.querySelector(".page_cover")

  if (target) {
    // 클릭하면 url 로 이동, 'https://www.google.com' 은 필요한 값으로 변경해주세요.
    target.setAttribute("onclick", "window.open('https://www.google.com')")
    // 이미지 위에 마우스를 올렸을 때 손가락 모양으로(링크처럼) 변하길 원한다면 아래 코드를 이용하세요.
    target.style.cursor = "pointer"
  }
</script>
HTML
복사

나가며

이 페이지에 있는 위 커버를 클릭해보세요. 페이지가 열리는 것을 확인하실 수 있습니다