본문 바로가기

Obsidian/Templater

옵시디언 템플레이터(Templater) - 교보문고 도서 정보 가져오기 (고침 @2023-04-05 20:00:00)

@2023-04-12 23:38:11

옵시디언 템플레이터(Templater) - 교보문고 도서 정보 가져오기(User Script Functions을 써서)  
https://eoureo.tistory.com/15 

여러 가지 다른 기능을 쓰기 위해서는 위에 올린 방법으로 사용하기 바랍니다.

 

@2023-04-05 20:00:00
- publish date에 공란이 많이 들어가는 경우가 있어 고침.
- 작가 구분에 ","이 들어간 경우 무시하도록 수정.

 

@2023-03-23 20:00:00
- 저자 별로 따로 저장할 수 있게 함.
- 파일 이름에 쓸 수 없는 문자 제거 하도록 함.


다른 플러그인을 사용하지 않고 템플레이터(Templater) 플러그인 만으로 교보문고 도서 정보를 가져옵니다.

제목과 저자들, 표지 주소, 카테고리, 출판사, 발행(출시)일자, 쪽수, ISBN 정보는 Frontmatter에 넣고

제목이나 표지, 목차를 커서가 위치한 본문에 넣을 수 있습니다.

각 정보 가운데 필요로 하지 않는 것은 주석처리하면 넣지 않습니다.

 

플러그인으로 만드는 것보다는 쉽게 코드를 바꿀 수 있어 템플릿이 더 쓸모가 있다고 생각합니다.

조금만 살펴보면 사용자 자신에 맞게 고칠 수도 있을 것입니다.


다음에는 Yes25나 알라딘 등에서도 정보를 가져오는 템플릿을 만들어 보겠습니다.
아니면 이 글을 읽고 있는 여러분들과 같이 만들어도 좋을 것 같습니다.

댓글 많이 달아 주세요.

사용하기

 

  1. 다음 소스를 다운로드한 다음 Templater 폴더에 넣습니다.
    https://gist.githubusercontent.com/eoureo/0f547492aa3ff0298e073d7336767dc6/raw/Obsidian_Templater-Get_Book_information_from_KyoboBook.md.js
    파일 이름은 자신이 바라는 것으로 바꾸어 쓰면 낫겠네요.
    ⚠️주의! 파일 확장자는 md로 해야 합니다.
    소스 코드는 밑에서 볼 수 있습니다.

  2. 노트의 frontmatter에 url 항목 추가
    url: https://product.kyobobook.co.kr/detail/S000000971145

     
  3. 제목이나 표지, 목차가 넣어지게 될 위치에 커서가 있도록 합니다.
     
  4. 템플레이터 창(<%나Alt + E)을 열고 이 템플릿을 선택하면 됩니다.
     
옵시디언 템플레이터(Templater) - 교보문고 도서 정보 가져오기
옵시디언 템플레이터(Templater) - 교보문고 도서 정보 가져오기 - 결과

 

소스 코드

제 Gist 코드입니다.

만들면서

다음은 이 템플릿을 만들면서 살펴본 내용들입니다.

관심이 있으면 한번 보기 바랍니다.

도움이 되었으면 합니다.

 

참고

 

페이지 구조(DOM) 확인

 

저는 다음 페이지를 보면서 찾아봤습니다.

 

침묵의 봄 | 레이첼 카슨 - 교보문고

https://product.kyobobook.co.kr/detail/S000000971145

 

  1. 웹 브라우저에서 Developer Tools를 엽니다( F12 또는 Ctrl + Shift + I ).
  2. 버튼으로 바라는 정보를 선택하여 Elements 탭에서 페이지 어디에 위치해 있고 태그는 무엇인지 알아봅니다.
  3. Console 탭에서 CSS 선택자를 이용해 테스트해 봅니다.

Developer Tools 사용

 

제목 찾기

 

다음 두 곳에서 제목을 얻을 수 있습니다.

<meta name="title" content="침묵의 봄 | 레이첼 카슨 - 교보문고">

<h1>
<span class="prod_title">침묵의 봄</span>
</h1>

 

Console창에 다음 한 코드를 붙여 넣고 엔터를 입력하여 실행하면 그 아래 주석과 같은 내용을 얻을 수 있습니다.

document.head.querySelector("meta[name='title']").content
// '침묵의 봄 | 레이첼 카슨 - 교보문고'

document.body.querySelector("#contents h1 span.prod_title").innerText
// '침묵의 봄'

두 번째가 깔끔한 제목을 얻을 수 있습니다.

 

 

저자 찾기

 

저자는 여러 명일 수 있습니다.

<div class="author">
  <a href="https://search.kyobobook.co.kr/search?keyword=레이첼 카슨&amp;chrcCode=2000041701">레이첼 카슨</a>
저자(글)
·
  <a href="https://search.kyobobook.co.kr/search?keyword=김은령&amp;chrcCode=1102002401">김은령</a>
번역
·
  <a href="https://search.kyobobook.co.kr/search?keyword=홍욱희&amp;chrcCode=1000545701">홍욱희</a>
감수
</div>

 

Console 창에서 실행.

document.body.querySelectorAll("#contents .author a")
// NodeList(3) [a, a, a]

Array.from(document.body.querySelectorAll("#contents .author a")).map( el => el.innerText )
// (3) ['레이첼 카슨', '김은령', '홍욱희']

Array.from(document.body.querySelector("#contents .author").childNodes).map( el => el.textContent.trim() )
// (7) ['', '레이첼 카슨', '저자(글)\n                                ·', '김은령', '번역\n                                ·', '홍욱희', '감수']

document.body.querySelector("#contents .author").innerText
// '레이첼 카슨 저자(글) · 김은령 번역 · 홍욱희 감수'

저자의 역할 정보까지 얻으려면 3, 4번이 적합하고
그냥 저자 이름만 얻으려면 2번이 낫겠네요.

 

 

저자 정보를 넣는 방법을 바꾸어서 설명을 추가합니다.(2023-03-23 19:00:00)

각 방법 항목을 주석을 없애면 다음과 같이 다른 결과를 만들 수 있습니다.

 

방법 1.

        // 방법 1.
        // 전체 저자를 authors 아래로 authors, translaters, editors, others 로 넣음.
        fm["authors"] = authors;

 

authors:
  authors:
    - 레이첼 카슨
  translaters:
    - 김은령
  editors:
    - 홍욱희

 

방법 2.

        // 방법 2.
        // 전체 저자를 authors, translaters, editors, others 로 넣음.
        Object.keys(authors).forEach(authors_key => {
            fm[authors_key] = authors[authors_key];
        });

 

authors:
  - 레이첼 카슨
translaters:
  - 김은령
editors:
  - 홍욱희

 

방법 3.

        // 방법 3.
        // 전체 저자를 authors 하나에 넣음.
        let authors_all = [];
        Object.keys(authors).forEach(authors_key => {
            authors_all.push(...authors[authors_key]);
        });
        fm["authors"] = authors_all;

 

authors:
  - 레이첼 카슨
  - 김은령
  - 홍욱희