[노션에서 티스토리로 바로 업로드] 목차
TIP. 노션에서 사용 가능한 기능
텍스트를 굵게
텍스트에 밑 줄
italicize체로 폰트 변경
빨간색 in line
-
체크박스
토글 작업
(구분선)
(수학 공식)
노션 글 HTML로 변경하기
#1_글 작성
지금 바로 작성해 본 글 양식입니다.
제목도 간단하게..
이미지도 간단하게,,
🔥
또 노션에서 활용도가 좋은 목차 생성 기능
또 큰 제목과 부 제목을 통한 가독성 올리기 등을 작업 해 보았어요
#2 HTML 로 내보내기
HTML 을 클릭 후 내보내기를 눌러 줍니다.
위치는 어디든 상관 없어요🔥
#3_텍스트 및 코드 입력 단계 진입
ZIP 형태로 다운이 되었으면 압축풀기 를 진행 해주신 뒤 다음으로 열기 텍스트로 열거나 Visual Studio Code로 열어줍니다
HTML 양식에 맞게 코드 변환하기(어렵지아늠)
Visual studio code 기준으로 하였지만 메모장 사용으로도 가능하세요🔥
[#1]
[#2]
ctrl + f (찾기) 기능을 통해서 page sans 를 검색 해 줍니다.
✅검색 후✅
[#3]_page sans 가 적혀있는 줄에 <article ~ 을 기준으로 앞에 있는 코드를 모두 지워줍니다.
- 이때 이 정도로 지워줘도 될까 싶을 정도로 위로 쭉~~~~드래그 하면서 지워주는 게 팁입니다🤣
sans 는 폰트를 말하는 거였습니다.. notion 에서 바꿀 수 있는 폰트로는 세라프 와 모노 가 있고 page 세라프 page 모노로 검색 해주시면 될 것 같습니다🔥 이것 때문에 2시간을 코드 보고 있었음 참고로 코딩의 ㅋ도 모릅니다.
[#4]_아래의 화면 처럼 “Notion_P Page sans”가 되도록 양식 수정
[#5]_맨 아랫줄에 </article> 뒤의 </body></html> 도 지워줍니다.
대망의 완성, 하이퍼 완성이라고 말할 수 있습니다.
T스토리 스킨 수정을 통해 css 작업하기
티스토리 스킨 편집으로 진입하기
블로그관리 홈 → 꾸미기(스킨 편집) → html편집 →상단 css메뉴 클릭 →
CSS에서 양식 붙여넣기
https://drive.google.com/file/d/1K453_c5moTNIIVjWj0ScCn26ldAeOAQ7/view
상단 파일을 다운로드 한 후 양식의 글을 ctrl a ctrl c ctrl v (대충 전체 복붙하라는 뜻) 해주세요.
before
@import 아래에 가급적이면 양식 붙여넣기를 추천합니다🔥 저는 그렇게 했슴돠 그래서 😅
after
인용 자료
https://boltlessengineer.tistory.com/46?category=1098204
[나사 빠진 공돌이]
매우 전문적인 코딩 작업자 분 같으신데 나이도 어리시고 재능이 많으신 것 같습니다.
이 분에 대해 구체적인 설명을 드려보자면 Notion to tistrory 프로그램을 무려 win/mac으로 개발 해주셨고 꾸준히 업데이트를 하실동안은 점진적으로 글쓰기 파이프라인에 한줄기 빛같은 분이셨습니다ㅠㅠ 지금은 많이 바쁘셔서 그런지 업로드가 없으신 것 같네요💦
최종 요약
티스토리엔 스킨편집으로 준비된 상태를 만들어주고 노션으론 티스토리에 들어갈 준비를 해주면 끝입니다. 정말 간단해요.
주의사항 으로는 이미지를 임베드할 때 https://imgur.com/ 사이트를 이용하여 임베드를 따로 해줘야지 노션에서 이미지 파일 오류가 안 생깁니다💦
다음 시간에는 노션에 이미지를 바로 임베드 해주는 작업 포스트하겠습니다 🔥
감사합니다 ⭐️