Notion에서 Tistory로 자동 업로드 #4 (notion css style 적용)
개요
지난 번에 notion page를 html형태로 export하여 python으로 parsing하고 tistory API로 직접 업로드까지 해보았습니다.
이번에는 notion CSS를 적용하여 블로그에서도 노션과 같은 style로 보이게 수정해보겠습니다.
CSS 수정하기
아래는 notion page를 html export한 파일을 열었을 때의 소스 입니다. <head> 태그 안에 여러가지 css가 적혀 있는데요, 이를 티스토리 블로그에 그대로 가져가면 적용이 됩니다.
하지만, 기존 tistory에 있는 style과 notion에서 export한 html의 style(css)이 겹쳐서 실제로는 원하지 않는 style이 적용 될 수 있기 때문에 약간의 작업이 필요합니다.
기존 tistory css와 겹치지 않게 하기 위해 notion의 모든 css style에 Notion_P 클래스를 붙이고, article html 태그에 Notion_P 라는 클래스를 추가(이건 python에서 소스로 할 예정)하겠습니다.
위 css 소스에서 html, body 부분은 필요 없으니 지우셔도 됩니다.
이 방법은 아래 블로그에서 참고하였습니다. 해당 블로그에서 미리 만들어 놓은 CSS파일을 다운받으셔도 됩니다.
https://boltlessengineer.tistory.com/46
Tistory 설정에서 CSS 변경하기
위의 방법을 적용하기 위해 개인 tistory 블로그 설정에서 css를 편집합니다.
아무 위치에 저 위의 CSS 소스를 복붙 해 줍니다. 참고로 저는 헷갈리지 않기 위해 맨 아래에 붙여놓았습니다.
그럼 이제 style까지 적용되었으니, 업로드하여 확인 해 보실 수 있습니다.
이정도만 알아도 충분히 쉽게 notion page를 tistory에 업로드 할 수 있습니다.
하지만 저는 완전한 자동화를 원하기 때문에 몇가지 작업을 더 진행하겠습니다.
다음 할 일
- 노션에서 게시한 페이지의 property를
발행완료로 수정하기 (notion-py 사용)
- 게시물을 게시할 category id를 자동으로 가져오기
- notion page를 일일이 다운로드 하지 않고 자동으로 export 하기 (selenium 사용)
본 게시물은 Notion에서 작성되어, 자동으로 업로드 되었습니다.