Hexo에서 HTML 파일을 Markdown에 삽입하기



Hexo에서 HTML 파일을 삽입하려 했는데 다음처럼 문제가 발생했습니다.




iframe 안에 새로운 블로그가 펼쳐진다..!



원래는 단순 그래프만 보여야 하는데, HTML을 또 렌더링해서 테마 안에 그래프가 속하게 표시됩니다.

이러한 문제를 피하면서 HTML 파일을 넣는 순서는 다음과 같습니다.



1. 우선 마크다운에 HTML파일을 넣는 코드를 삽입합니다.

삽입하는 방법은 직접 iframe HTML 태그로 넣어주거나 Hexo 의 Tag Library를 이용하면 됩니다.

HTML iframe 태그로 넣어주기

1
<iframe width=100% height=500px src=url></iframe>

Hexo의 Tag library 이용하기

1
{% iframe url [width] [height] %}

2. _config.yml 에 skip_render 추가하기

HTML이나 json을 추가 시, 추가 렌더링을 하지 않도록 Hexo의 _config.ymlskip_render를 추가해줍니다.

theme의 config가 아닌 블로그 경로에있는 _config.yml입니다.

저는 source/html 하위에 HTML 파일을 두고 관리할 예정이므로 아래처럼 지정해 주었습니다. 사용하시는 구조에 맞추어 변경하시면 됩니다.

1
2
skip_render:
- html/*.html

3. 페이지 확인하기

hexo s를 실행하여 페이지를 다시 확인해보시면 됩니다. 인터넷에서는 여기서 해결된 분이 있는데 저는 안되서 다음 과정도 진행했습니다.


3. db.json 삭제하기

블로그 경로 내에 있는 db.json을 삭제해야 합니다.

혹시 모르니 복사하고 테스트하시길 바랍니다.

페이지 정보를 담은 파일인데, hexo가 해당 파일을 제대로 초기화 해주지 않습니다.

삭제를 해주면 알아서 현재 상태에 맞추어 갱신을 해줍니다.


4. 진짜 페이지 확인

다시 hexo s를 실행해 보니 아래처럼 HTML 파일이 잘 삽입되는 것을 확인 할 수 있습니다.