Notion2Tistory (Notion To Tistory)

💛

Status	Finished
Goal
Learning Stacks
Category	Project
Tag	Notion2Tistory
Tags	bs4notionnotion-pyshutiltistory

💡

details 태그 관련하여 문제가 있어, safari 에서 접속해야 더 깔끔한 글을 읽을 수 있습니다. (notion 에서는 상관없음)

---

💡

기록 / 공부용으로 notion 을 쓰고 있지만 notion 이 기존의 git 이나 블로그의 역할까지 해줄 수는 없었습니다. 그래서, notion 에서 작성한 글들을 html 형식으로 내보내어, tistory API 를 통해 tistory 에 업로드 하는 과정을 간편히 하기 위해 코드를 작성해보았습니다. (군 복무 시절 연등하면서 만들어 본거라, 많은 부분이 하드코딩이고, 저에게 맞춰나가느라.. 간결하게 사용할 수 있는 코드는 아닙니다. 참고만 해주세요. ) 군 복무 시절 colab 활용하여 썼었던 추억들 https://github.com/nomad2569/Notion-To-Tistory

https://github.com/nomad2569/Notion-To-Tistory

• 도움을 준 사이트들

  • 이미지 처리 빼고 모든 것 (이 분이 한 걸 조금 다듬은 느낌)

  • bs4 문서

    • wrap 태그 감싸기

  • notion-py로 노션 CMS 구축하기 - 데이터베이스 활용

    https://younho9.dev/notion-cms-using-database

    이전 글에서 notion-py를 사용해 노션에 페이지에 있는 블로그 포스트들을 마크다운 문서로 추출하는 방법까지 사용해봤다. 하지만 본격적으로 노션을 CMS로 사용하기 위해서 노션의 강력한 데이터베이스 기능을 활용하려고 한다.

    노션 데이터베이스 활용하기

    이전 방식처럼 한 페이지 안에 블로그 포스트들을 단순히 모아놓는 것은 여러모로 불편하다. 포스트의 제목만 보이기 때문에, 언제 작성했는지, 무슨 주제인지 쉽게 파악하기 어렵다.

    노션은 다양한 콘텐츠를 관리할 수 있는 강력한 데이터베이스 기능을 제공하는데, 이를 활용하면 블로그 포스트도 쉽게 관리할 수 있다.

    다양한 프로퍼티를 사용해 작성 날짜, 상태, 태그, 작성자 등 블로그 포스트에 필요한 헤더 데이터를 구성할 수 있다.

    

    그리고 노션 데이터베이스는 이러한 프로퍼티들을 활용해서 필터링하고 정렬하는 기능을 지원하며, 테이블, 보드, 캘린더 등 다양한 뷰를 지원하기 때문에 콘텐츠들을 쉽게 파악할 수 있다.

    

    

    

    링크드 데이터베이스 (Linked database)

    노션에는 링크드 데이터베이스라는 개념이 있다. 노션에서 데이터베이스는 인라인 또는 풀페이지로 만들 수 있는데, 이렇게 만든 원본 데이터베이스를 “링크”하여 다른 페이지 안에 넣거나, 자체 페이지로 만드는 것이 가능하다.

    원본 데이터베이스와 링크드 데이터베이스는 같은 데이터베이스로, 데이터가 완전히 동기화된다.

    

    

    원본 데이터베이스와 페이지에 삽입한 링크드 데이터베이스. 왼쪽의 ↗화살표가 보인다.

    본격적인 CMS 구축

    이렇게 강력한 노션의 데이터베이스 기능을 활용하여 본격적으로 노션 CMS를 구축해보자.

    먼저 노션에 블로그 포스트를 관리할 데이터베이스를 만든다. 이 데이터베이스에 다양한 속성과 뷰를 추가하여 각자의 방식으로 블로그 CMS를 만들 수 있다.

    

    그리고 빈 페이지를 하나 만들어, 이 데이터베이스의 링크드 데이터베이스를 인라인으로 추가한다.

    

    왼쪽 사이드바에 있는 데이터베이스를 우클릭하여 링크를 복사하고 페이지에 붙여넣기하면 링크드 데이터베이스가 삽입된다.

    

    데이터베이스 id 구하기

    위에서 링크드 데이터베이스를 페이지에 삽입한 것은 데이터베이스의 id 를 구하기 위해서였다.

    이전 글의 코드에서는 페이지의 url 로 접근해 페이지 내의 포스트에 접근한 것이다. 하지만 데이터베이스에 있는 포스트를 가져오기 위해서는 페이지의 url 이 아니라 데이터베이스의 id 가 필요하다.

    원본 데이터베이스와 링크드 데이터베이스는 동일한 id 를 가지므로 이전에 작성한 코드를 활용하면 데이터베이스 id 를 구할 수 있다.

    데이터베이스의 id 는 아래의 방법으로 구할 수 있다. token_v2 는 자신의 token_v2 그대로 사용하면 되고, 링크드 데이터베이스 블럭을 포함하고 있는 페이지의 url 을 넣어, 페이지 안에 있는 블럭들을 출력해보면, 블럭의 id , 데이터베이스의 제목, 데이터베이스( collection )의 id 가 출력된다.

    3from notion.client import NotionClient5
    client = NotionClient(token_v2="NOTION_TOKEN")
    6page = client.get_block("NOTION_PAGE_URL")8
    for block in page.children
    :9    print(block)

    이 코드를 실행해보면, block 의 id 와 collection 즉, 데이터베이스의 타이틀과 id 를 출력한다. 이 collection 의 id 를 사용해서 데이터베이스에 접근할 수 있다.

    데이터베이스의 포스트에 접근하기

    이제 데이터베이스에 접근해 글을 가져오도록 코드를 수정하자. notion-py에서는 get_collection(collection_id) 로 데이터베이스가 갖고 있는 정보들을 가져올 수 있고, collection.get_rows() 를 사용해 데이터베이스 각 행에 있는 포스트에 접근할 수 있다.

    3from notion.client import NotionClient5client = NotionClient("NOTION_TOKEN")6contents_collection = client.get_collection("COLLECTION_ID")7posts = contents_collection.get_rows()9for post in posts:10    print(post)

    이제 이렇게 접근한 포스트의 내용을 가져오는 코드를 작성하면 된다.

    6from notion.client import NotionClient8client = NotionClient("NOTION_TOKEN")9contents_collection = client.get_collection("COLLECTION_ID")10posts = contents_collection.get_rows()12for post in posts:14    text = """---18---""" % (post.title, datetime.datetime.now())20    text = text + '\n\n' + '# ' + post.title + '\n\n'21    for block in post.children:23        if (block.type == 'header'):24            text = text + '# ' + block.title + '\n\n'26        if (block.type == 'sub_header'):27            text = text + '## ' + block.title + '\n\n'29        if (block.type == 'sub_sub_header'):30            text = text + '### ' + block.title + '\n\n'32        if (block.type == 'code'):33            text = text + '```\n' + block.title + '\n```\n'35        if (block.type == 'image'):36            text = text + '![' + block.id + '](' + block.source + ')\n\n'38        if (block.type == 'bulleted_list'):39            text = text + '* ' + block.title + '\n\n'41        if (block.type == 'divider'):42            text = text + '---' + '\n\n'44        if (block.type == 'text'):45            text = text + block.title + '\n\n'46    title = post.title.replace(' ', '-')47    title = title.replace(',', '')48    title = title.replace(':', '')49    title = title.replace(';', '')50    title = title.lower()52        os.mkdir('../content/blog/' + title)55    file = open('../content/blog/' + title + '/index.md', 'w')57    print(text)58    file.write(text)

    

    데이터베이스의 property 가져오기

    데이터베이스에서 지정한 속성들 역시 가져와 활용할 수 있다. 예를 들어 작성 완료된 포스트만 가져온다거나, 포스트의 작성 날짜나 태그들을 가져와 헤더데이터로 사용하는 등으로 활용할 수 있다.

    

    6from notion.client import NotionClient8client = NotionClient("NOTION_TOKEN")9contents_collection = client.get_collection("COLLECTION_ID")10properties = contents_collection.get_schema_properties()12for property in properties:13    print(property)

    데이터베이스가 갖고 있는 속성들의 목록은 collection 의 get_schema_properties() 를 사용하여 확인할 수 있다.

    이 property 들은 데이터베이스 안에 있는 각각의 포스트가 갖고 있다. post.status , post.tags 등 아래에서 slug 의 값으로 포스트의 property 에 접근할 수 있다.

    🤔 신기하게도, 한글 속성은 발음대로 영어로 바뀌어 나타나는 것을 발견했다.

    이제 데이터베이스를 가져오고, 데이터베이스에서 포스트를 가져오고, 포스트가 갖고 있는 속성도 가져올 수 있다.

    6from notion.client import NotionClient8client = NotionClient("NOTION_TOKEN")9contents_collection = client.get_collection("COLLECTION_ID")10posts = contents_collection.get_rows()12for post in posts:13    print(post.tags)

    추가 설정

    머리말 구성

    이렇게 가져온 속성들을 블로그 포스트의 머리말 데이터로 사용해보자.

    

    hero : 썸네일 이미지 excerpt : 요약 문구

    내가 사용하고 있는 Gatsby 블로그에서는 이러한 머리말 데이터를 사용했다. 데이터베이스에 헤더를 위한 데이터들을 추가해주었다.

    

    이제 각 속성의 slug 값으로 접근하여 머릿말에 추가하면 된다.

    4from notion.client import NotionClient6client = NotionClient("NOTION_TOKEN")7contents_collection = client.get_collection("COLLECTION_ID")8posts = contents_collection.get_rows()10for post in posts:12    text = """---17""" % (post.title, post.author, post.created_time.strftime("%Y-%m-%d"), post.excerpt)18    if not post.hero:19        text = text + '---\n\n'20    elif 'png' in post.hero[0]:21        text = text + 'hero: ' + './images/hero.png\n---\n\n'22        image_format = 'png'23    elif 'jpg' in post.hero[0]:24        text = text + 'hero: ' + './images/hero.jpg\n---\n\n'25        image_format = 'jpg'27    print(text)

    여기서 hero 즉, 커버 이미지 파일에 대한 처리가 필요했다. 노션 데이터베이스 속성 중 Files & media 는 이미지와 파일 url 이 문자열로 담긴 배열을 사용하는데, url 에 있는 이미지 파일 형식자에 따른 처리를 해주었다.

    이후에 이 이미지 링크에서 이미지를 ./image/hero.xxx 경로에 다운받을 것이다.

    

    머릿말이 잘 구성되었다.

    더 많은 노션 블록 타입 지원하기

    이전 글의 코드에서는 다양한 노션 블록에 대한 지원이 부족했다.

    여러 블록 타입에 대한 처리는 간단하게 block.type 으로 type 을 알아내고 block.title 로 접근해 내용을 가져올 수 있다.

    

    1for post in posts:3    text = """---8""" % (post.title, post.author, post.created_time.strftime("%Y-%m-%d"), post.excerpt)9    if not post.hero:10        text = text + '---\n\n'11    elif 'png' in post.hero[0]:12        text = text + 'hero: ' + './images/hero.png\n---\n\n'13        image_format = 'png'14    elif 'jpg' in post.hero[0]:15        text = text + 'hero: ' + './images/hero.jpg\n---\n\n'16        image_format = 'jpg'19    text = text + '\n\n' + '# ' + post.title + '\n\n'20    for block in post.children:21        print(block.type)22        print(block)

    

    이렇게 하면 간단하게 block 의 타입 이름과 title 에 어떤 내용이 담기는지 볼 수 있었다.

    block 타입 별로 어떤 추가적인 속성을 가지는지는 위의 소스를 보면 알 수 있다.

    예를 들어 callout 블럭은 icon 속성을 갖고, code 블럭은 language 속성을 갖고, bookmark 블럭은 link , bookmark_cover 등의 속성을 갖는다.

    이런 속성들을 활용하면 보다 정확하게 노션 블로그 글을 가져올 수 있다.

    심지어 노션 자체 마크다운 export 기능은 언어 지정이 반영되지 않는데 language 속성으로 이를 가능하게 할 수 있다.

    1for post in posts:3    text = """---8""" % (post.title, post.author, post.created_time.strftime("%Y-%m-%d"), post.excerpt)9    if not post.hero:10        text = text + '---\n\n'11    elif 'png' in post.hero[0]:12        text = text + 'hero: ' + './images/hero.png\n---\n\n'13        image_format = 'png'14    elif 'jpg' in post.hero[0]:15        text = text + 'hero: ' + './images/hero.jpg\n---\n\n'16        image_format = 'jpg'19    text = text + '# ' + post.title + '\n\n'20    for block in post.children:22        if (block.type == 'header'):23            text = text + '# ' + block.title + '\n\n'25        if (block.type == 'sub_header'):26            text = text + '## ' + block.title + '\n\n'28        if (block.type == 'sub_sub_header'):29            text = text + '### ' + block.title + '\n\n'31        if (block.type == 'code'):32            text = text + '```' + block.language.lower() + '\n' + block.title + '\n```\n\n'34        if (block.type == 'callout'):35            text = text + '> ' + block.icon + ' ' + block.title + '\n\n'37        if (block.type == 'quote'):38            text = text + '> ' + block.title + '\n\n'40        if (block.type == "bookmark"):41            text = text + "🔗 [" + block.title + "](" + block.link + ")\n\n"43        if (block.type == 'image'):44            text = text + '![' + block.id + '](' + block.source + ')\n\n'46        if (block.type == 'bulleted_list'):47            text = text + '* ' + block.title + '\n\n'49        if (block.type == 'divider'):50            text = text + '---' + '\n\n'52        if (block.type == 'text'):53            text = text + block.title + '\n\n'

    callout, code, bookmark, quote 에 대한 코드를 추가했다. 더 많은 코드는 계속 추가할 예정이다.

    커버 이미지 다운받기

    앞서 데이터베이스의 hero 속성에 추가한 cover 이미지를 다운받자.

    2import urllib.request6for post in posts:11    title = post.title.replace(' ', '-')12    title = title.replace(',', '')13    title = title.replace(':', '')14    title = title.replace(';', '')15    title = title.lower()18        os.mkdir('../content/blog/' + title)23    if post.hero:25            os.mkdir('../content/blog/' + title + '/images')28        if 'png' in post.hero[0]:29            urllib.request.urlretrieve(post.hero[0], "../content/blog/" + title + "/images/hero.png")30        elif 'jpg' in post.hero[0]:31            urllib.request.urlretrieve(post.hero[0], "../content/blog/" + title + "/images/hero.jpg")33    file = open('../content/blog/' + title + '/index.md', 'w')35    print(text)36    file.write(text)

    포스트 제목에 따라 폴더를 만들고, 포스트 폴더 안에 images 폴더에 hero 이미지를 urllib.request 를 사용해 다운받았다. 자세한 사용 방법은 아래 링크를 참고하자.

    

    원하는 위치에 이미지를 저장했다. 머리말에 hero 의 경로가 지정되어 있으므로 Gatsby 블로그에서는 이 이미지를 가져와 커버로 사용할 것이다.

    마치며

    이렇게 notion-py를 활용하여 노션 데이터베이스에 있는 마크다운 문서들을 로컬로 가져왔다.

    노션 데이터베이스를 활용하면 다양하게 뷰를 바꿔가며 콘텐츠를 확인할 수 있고, sort, filter 등의 기능을 활용할 수 있다. 또한 속성을 활용하여 글을 분류하고 관리하는 등 CMS로 활용할 수 있다.

    물론 위의 코드는 마크다운 문서로 추출되기 때문에 마크다운을 지원하는 블로그 플랫폼이 아니라면 수정이 필요하다. 하지만 코드를 조금만 수정해도 어떤 블로그 플랫폼에 적용할 수 있다.

    다음 글에서는

    • os의 환경변수에 token_v2 를 등록하는 방법

    • config.py 에 collection_id 를 저장하고 가져오는 방법

    • 노션 데이터베이스의 status 에 따라 콘텐츠를 필터링하여 가져오는 방법

    • 노션에서 글 작성이 완료되었을 때 Github에 자동으로 업로드하는 방법

    들을 다뤄볼 예정이다.

    notion-py는 비공식 노션 API이다

    

    물론 notion-py가 “비공식” 노션 API이고, 노션에서는 곧 공식 API를 출시할 예정이라고 하기 때문에, 이 API를 언젠가 사용하지 못할 가능성이 있다.

    하지만 notion-py를 다루며 노션 공식 API가 가져올 어마어마한 가능성에 대해 생각해 볼 수 있었다. 노션이 정말 “All-In-One Workspace” 가 될 수 있을까?

    빠른 시일 내 공식 API가 출시되고 많은 유저들이 사용하면서 수많은 활용 예제들이 탄생하길 기대한다.

  • 에러 관련

    notion-py로 노션 CMS 구축하기 - 데이터베이스 활용의 사본

    Got 400 error attempting to POST to queryCollection · Issue #350 · jamalex/notion-py · GitHub

    • notion-py 가 말을 안듣는 이유였다.

• 코드를 사용하는 과정

  1. main.py 코드를 다운로드하여 workspace 에 가져다줍니다. 혹은 위의 github 을 모두 다운받아 사용해도 됩니다.
     1. 폴더 구조
        • workspace
          • main.py
          • upload (folder)
            • 업로드 할 파일들

  2. 노션 게시물 준비하기 (노션 제목에 한글이 포함되어 있으면 잘 안됩니다.)
     1. 글에 올바른 속성 부여하기
        • 필수적인 속성
          • Category : 티스토리에 존재하는 카테고리에 맞게 작성
        • 비 필수적인 속성
          • Tag : 티스토리 글에 추가할 태그
          • Tags : 티스토리 글에 추가할 태그들
            • 두 개를 나눈 이유는 필자가, 알고리즘 문제 풀이 한 것들을 카테고리로 분류할 때, 사이트/중심 tag 로 나누어 썼기 때문입니다. 두 개 다 없어도 작동은 합니다.

  3. 노션 게시물 다운로드하기
     1. 해당 게시물에 들어가서, 우측 상단의 설정을 클릭합니다.
     2. HTML 형식으로 내보냅니다.

     

     c. 아까 만들어둔 upload 폴더에 다운로드 받은 폴더를 붙여넣습니다.

     💡

     여러 개 동시에 넣어도 가능합니다.

     💡

     노션에서 html 을 export 할 때 mac 에서, 어느 경우에는 zip 으로, 어느 경우에는 폴더로 바로 다운받아졌습니다. 코드를 통일하기 위해서, zip 파일 자체를 넣는 것이 아니라 zip 을 압축 풀어 준 뒤에, 폴더 형식으로 upload 폴더에 넣도록 합니다.

  4. main.py 의 config 설정하기
     • 5개의 변수가 있습니다.

       config = {
           "ACCESS_TOKEN" :"자신의 tistory access token",
           "BLOG_NAME" : "자신의 tistory 블로그 이름",
           "REMOVE_AFTER_UPLOAD" : 업로드 한 뒤에 파일을 삭제하려면 True, 아니면 False
           "upload_path" : "자신의 `upload` 폴더의 경로 (절대 경로로 하는 게 마음 편함)",
           
           "CODE_AS_PYTHON" : 코드 하이라이트를 python 으로 통일하려면 True,
       }

       • ACCESS_TOKEN 은 어떻게 얻을까?
         • 다른 분의 블로그를 참조하도록 합시다.

  5. 코드 실행하기

     

     위와 같이 뜨면 성공입니다.

• 겪었던 문제 해결 과정

  • 이미지 깨짐 문제 해결하기

    💡

    로컬 파일에서 노션에 이미지 파일을 올리고 해당 페이지를 tistory 에 올려보면 이미지가 없어진다. 어떻게 해결할까?

    왜 그런 문제가 발생했는가

    • 노션에서 HTML 로 내보내면 해당 페이지의 img 가 알아서 같이 다운로드 된다.

    • 그렇기 때문에, HTML 상에서의 img 의 src tag 속성은 로컬 파일 경로가 된다.

    • 이것을 바로 Tistory API 로 보내버리면 당연히, 로컬 파일이 없기 때문에 안된다.

    해결책

    • 노션에서 HTML 과 같이 다운받은 img 파일을 base64 형태로 바꾸어 그대로 img 의 src에 넣는다.

    # img base64로 변환하여 업로드
        all_img_columns = article.find_all('img')
        img_columns = []
        for i, img_column in enumerate(all_img_columns):
            if not ('http' in img_column['src'] or 'ico' in img_column['src']):
                img_columns.append(img_column)
    
        if img_columns != 0:
            for img_column in img_columns:
                modified_img_path = img_column['src'].replace("%5B", '[').replace("%5D", ']').replace("%20", ' ')
                im_b64 = base64.b64encode(
                    open(f"{path_list[html_idx]}/{modified_img_path}","rb").read()
                ).decode('utf-8')
                img_column['src'] = f"data:image/png;base64,{im_b64}"

  • 업로드한 파일 삭제하기

    • os.rmdir 은 비어있는 폴더만 삭제해줘서, shutil.rmtree 를 사용했다.

  • notion 에서 export 할 시에, []|() 같은 특수문자들이 %20 %30 같은 것들로 변환되어서, 경로 찾기가 힘들었던 문제

    • 정말.. 하드코딩 그자체 해버렸습니다.. 하나하나 프린트 해가면서 어떤 특수문자가 어떻게 변환되는지 찾은 뒤에, 이런 식으로 변환 시켰습니다. 만약 문제가 발생하면 내가 변환해두지 않은 특수문자를 제목에 사용했던지 한 것일 겁니다.

    modified_img_path = img_column['src'].replace("%5B", '[').replace("%5D", ']').replace("%20", ' ')

  • 가장 힘들었던.. tistory 의 css 와 notion css 맞추기

    Notion에서 Tistory로 자동 업로드 #4 (notion css style 적용)

    Notion에서 Tistory로 자동 업로드 #4 (notion css style 적용) 지난 번에 notion page를 html형태로 export하여 python으로 parsing하고 tistory API로 직접 업로드까지 해보았습니다. 이번에는 notion CSS를 적용하여 블로그에서도 노션과 같은 style로 보이게 수정해보겠습니다. 아래는 notion page를 html export한 파일을 열었을 때의 소스 입니다. 태그 안에 여러가지 css가 적혀 있는데요, 이를 티스토리 블로그에 그대로 가져가면 적용이 됩니다.

    https://minimin2.tistory.com/101

    

    • 이 분의 덕분에 웬만한 것들은 다 정상적으로 작동했지만, 각자에게 적용되는 스킨이 다르고 하다 보니, 나에게 맞는 css 를 작성하기가 쉽지 않았습니다.

    • 제 tistory 스킨과 css 모두 공유해드릴테니, 스킨 자체를 바꾸실 분은 적용하면 제 블로그랑은 똑같이 될 겁니다. github 에 업로드해두었습니다.

    💡

    저도 CCZ-CROSS 스킨을 기본으로 하여 편집하였습니다.

  • Mac 의 .DS_Store 파일 제거하기

    • Mac 의 폴더에는 DS_Store 라는 파일이 알게모르게 있습니다. 이걸 제거 안하고 하다가 오류가 났었습니다.

  • details 태그의 open attribute 제거하기

    • details 태그 들이 옮겨진 뒤에, 다 열려있어서 보기 싫었다.

    • bs4 로 간단히 해결했다.

  • Tistory API 공부하기

    • visibillity 에서 애먹었었다. 왠지 모를 오류가 많았다.

  • ⭐️⭐️⭐️노션에서 제목 토글 1,2,3 가 추가됨에 따라, 기능 추가⭐️⭐️⭐️

    💡

    노션 상에서는 당연히 문제가 없었으나, export 하여 html 상에서 보았을 때는 notion 자체적인 css 도 사라지고 해서, toggle 의 기능도 하지 못했을 뿐더러, toggle 의 위치도 맞지 않았다.

    • 어떻게 html 이 깨져서, toggle 이 작동이 안되는지 파악했다.
      • 제목 h1
        • details
          • summary
      • div class=”indented” 여기에 toggle 안에 쓴 내용이 들어감

    • 라고 깨졌다. 원래는
      • 제목 h1
        • details
          • summary
          • div class=”indented”

    • 이 되어서, h1 아래에 내용이 잘 출력되어야 했다.

    • 또 하나의 문제는, 모두가 h1 아래에 있기 때문에 모두 큰 글씨로 출력된다는 점이다. 그것을 원하지는 않는다.

    • 그래서 나는 이런 구조를 생각했다.
      • details
        • summary
          • h1
            • 제목
        • div class=”indented”

    • 해결법
      1. indented 라는 class 를 가진 모든 div 를 가져온다.
      2. h1 이면서, 자식이 summary 인 모든 h1 을 가져온다.
         1. 위의 h1 들을 모두 순회하면서, 자신 바로 다음의 형제가 <div class=“indented” 라면
            1. 바로 아래의 details 태그를 찾아낸다.
            2. 해당 details 태그에 아까 찾아낸 indented div 를 순서에 맞게 추가한다.
            3. details 안의 summary 를 h1 으로 묶어준다.
               1. 묶어주면서, Notion_summary_h1 이라는 class 를 추가하여
               2. tistory 내에서 css 조작이 편하게 만든다.
      3. h1 h2 h3 에 대해서 실행해준다.

      # indented block 가져오기
          indented_divs = article.find_all('div', 'indented')
          # h1 이면서 자식이 summary 가져오기
          all_h1 = article.find_all('h1')
          all_indent_h1 = []
          for idx, h1 in enumerate(all_h1):
              if '<details>' in str(all_h1[idx]):
                  all_indent_h1.append(all_h1[idx])
          for h1_idx, indent_h1 in enumerate(all_indent_h1):    
              for idx, sibling in enumerate(all_indent_h1[h1_idx].next_siblings):
                  # 바로 다음의 형제가 indented div 라면
                  if idx == 0 and '<div class="indented"' in str(sibling):
                      details = all_indent_h1[h1_idx].find("details")
                      details.append(sibling)
                      summary = details.find("summary")
                      summary.name = "h1"
                      summary.wrap(soup.new_tag('summary', **{'class':'Notion_summary_h1'}))
                      all_indent_h1[h1_idx].unwrap()
          # h2 이면서 자식이 summary 가져오기
          all_h2 = article.find_all('h2')
          all_indent_h2 = []
          for idx, h2 in enumerate(all_h2):
              if '<details>' in str(all_h2[idx]):
                  all_indent_h2.append(all_h2[idx])
          for h2_idx, indent_h2 in enumerate(all_indent_h2):    
              for idx, sibling in enumerate(all_indent_h2[h2_idx].next_siblings):
                  # 바로 다음의 형제가 indented div 라면
                  if idx == 0 and '<div class="indented"' in str(sibling):
                      details = all_indent_h2[h2_idx].find("details")
                      details.append(sibling)
                      summary = details.find("summary")
                      summary.name = "h2"
                      summary.wrap(soup.new_tag('summary', **{'class':'Notion_summary_h2'}))
                      all_indent_h2[h2_idx].unwrap()
          # h3 이면서 자식이 summary 가져오기
          all_h3 = article.find_all('h3')
          all_indent_h3 = []
          for idx, h3 in enumerate(all_h3):
              if '<details>' in str(all_h3[idx]):
                  all_indent_h3.append(all_h3[idx])
          for h3_idx, indent_h3 in enumerate(all_indent_h3):    
              for idx, sibling in enumerate(all_indent_h3[h3_idx].next_siblings):
                  # 바로 다음의 형제가 indented div 라면
                  if idx == 0 and '<div class="indented"' in str(sibling):
                      details = all_indent_h3[h3_idx].find("details")
                      details.append(sibling)
                      summary = details.find("summary")
                      summary.name = "h3"
                      summary.wrap(soup.new_tag('summary', **{'class':'Notion_summary_h3'}))
                      all_indent_h3[h3_idx].unwrap()

• 한계점 및 발전 사항

  • 여전히 맞지 않는 css 들
    • details 태그 라든지, 자잘한 margin 과 padding 들 꼴보기 싫다.
      • details 태그는 사파리에서는 정상 작동하는데, 크롬에서는 화살표가 안보임

  • zip 파일과 폴더를 분리하여 업로드 시켜보기

  • 일일이 손으로 export 해야하는 불편함
    • selenium 을 활용해 해결 가능
      • 하지만, notion-py 가 말썽이어서 시도하지 않음

  • Watchdog 을 사용해서 폴더 감시하여 자동 업로드 해보기

  • 수정하려면, 노션에서 수정해서 다시 내보내기 해서 다시 코드 동작시켜야함.

  • 제목에 한글 포함되어있으면 잘 안됨.