plotly에 그래프 업로드

Kaggle_Survey01: Pie [Plotly]에서 작성한 plotly chart는 동적 그래프라 이미지로 사용하긴 아쉽고 github page의 ipynb에서도 동작하지 않는다.

그래프를 끌어오기 위해 plotly 홈페이지 저장환경을 이용할 예정이다.

chart_studio 설치

우선 사용할 작업환경에 chart_studio 라이브러리를 설치해주자.

1

$ pip i chart_studio

※ jupyter 로컬 작업환경을 사용한다면 anaconda prompt로 설치

chart_studio는 plotly 그래프를 plotly 홈페이지에 업로드하고 원한다면 html iframe 태그로 변환까지 해주는 녀석이다.

plotly Access Key

plotly 개인 공간에 업로드 할 예정이니 plotly 회원가입을 진행하자.

[profile] - [API keys] 에서 Access key를 얻어온다.

위에서 설치한 라이브러리를 import하고 API key를 사용해 계정에 접근하자

1
2

import chart_studio
chart_studio.tools.set_credentials_file(username='유저명', api_key='접근키')

성공적으로 연동했다면 저장할 figure 객체와 저장될 파일명을 넣어준다.

1

chart_studio.plotly.plot(fig, filename = '파일명', auto_open=True)

'https://plotly.com/~hangack/1/'

out된 url에 들어가보면 그래프가 업로드 되었을거다.

웹페이지에 그래프 끌어오기

원래 목적이었던 웹페이지에서 그래프를 사용해보자.

html iframe

iframe(inline frame) html 형식을 수작업으로 작성해도 되겠지만 chart_studio 모듈 내 라이브러리에서도 변환할 수 있다.

1

chart_studio.tools.get_embed('https://plotly.com/~hangack/1/#/')

'<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plotly.com/~hangack/1.embed" height="525" width="100%"></iframe>'

1

<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plotly.com/~hangack/1.embed" height="525" width="100%"></iframe>

iframe(inline frame):

hexo tag plugin iframe

hexo 환경에서 작성중이라면 기본 plugin인 tag 문법으로도 iframe을 삽입할 수 있다.

1

{% iframe https://plotly.com/~hangack/1.embed %}

외부링크

• Plotly 그래프 깃헙 블로그에 올리기

블로그 스타일 세부설정을 위한 icarus theme 폴더

이전 포스팅인 블로그 테마 세부설정을 위한 clone theme를 보고오자.

Chrome DevTools

HTML? 몰?루 하던 시절엔 왜째서 기본 탑재된지 이해가 안가던 툴, 브라우저에서 F12를 누르면 어김없이 등장하는 코드뭉치 박스를 기억할 것이다.

오늘 만큼은 이놈을 유용하게 사용할 수 있겠다.

DevTools 위에 나오는 코드 뭉탱이(Elements)가 해당 페이지의 구성 요소들의 배치 형식, 아래 나오는 Styles 박스가 Elements에서 클릭한 요소의 CSS stlye로 보면된다.

사실 위 2개만 알면 건물을 새로 짖는게 아닌 이상 인테리어 수정 방법은 다 배운 셈이다.

수정하고픈 요소 찾기

DevTools에서는 친절하게도 임의 요소에 마우스를 올려두기만 해도 어느 영역에 대한 Class인지 화면에 표시해준다.

팁이 있다면 DevTools 좌측 상단의 “Select an element in the page to inspect it - Ctrl+Shift+C” 버튼을 눌러보자

식별된 요소가 포함된 class들을 기억하자.

내가 수정할 요소는 nav: pagination / ul: pagination-list is-hidden-mobile / a: pagination-link is-current인거같다.

pagination.stly 파일 안에서 pagination 요소와 pagination-link.is-current 하위 요소를 찾을 수 있었다.
중간의 ul은 moblie 모드에서는 숨기는 옵션? js로 설정하는 예외인거같다.

article의 img 요소처럼 style 커스텀 값이 없다면 부모 객체 아래에 직접 넣어주면 된다.

스크롤바 스타일 변경

집에서 쓸 때는 마우스 사이드 버튼에 page up/down을 할당하고 써서 몰랐는데, 외부에서 블로그에 접속하니 사이드바가 쥐꼬리만한게 너무 불편했다.

궁금하면 icarus에서 desktop mode로 직접 확인 ㄱㄱ

Elements에서 스크롤바를 정상적으로 식별할 수 없었지만, html 전체 요소 style에서 -wibkit-scrollbar라는 놈을 찾을 수 있었다.

쓸일이 있을진 모르겠지만 주석처리 해놓자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* ---------------------------------
 *+desktop()
 *    ::-webkit-scrollbar
 *        width: 8px
 *        height: 8px
 *
 *    ::-webkit-scrollbar-track
 *        border-radius: 3px
 *        background: rgba(0,0,0,0.06)
 *        box-shadow: inset 0 0 5px rgba(0,0,0,0.1)
 *
 *    ::-webkit-scrollbar-thumb
 *        border-radius: 3px
 *        background: rgba(0,0,0,0.12)
 *        box-shadow: inset 0 0 10px rgba(0,0,0,0.2)
 *
 *    ::-webkit-scrollbar-thumb:hover
 *        background: rgba(0,0,0,0.24)
 * --------------------------------- */

문제 발생

테마 스타일 커스텀을 하려 봤더니 Hexo v5 이후 방식인 npm으로 _config.icarus만 불러왔던 방식이 내 발목을 잡았다.

theme를 처음부터 다시 받아야할까?

태초마을인가 그릉가?

테마 폴더 끌어오기

그럴필욘 없고 themes 디렉토리에 테마 세부 설정을 위한 패키지만 받아오면 된다.

과거에 설정했던 테마 깃허브에 들어가서 Clone url을 받는다.

다음으로 \themes\ 경로에 $ git clone하면되지만, themes 폴더에 icarus 테마깔기에서 좋은 제안을 발견했다.

1

$ git clone --depth 1 https://github.com/ppoffice/hexo-theme-icarus.git

마지막으로 테마명을 일치시키기 위해 불러온 hexo-theme-icarus 디렉토리를 icarus로 변경해줬다.

가장 답답했던 페이지 가로축 범위 조정도 hexo icarus 테마에 커스텀 레이아웃, 스타일(css) 적용하기에서 적용법을 확인할 수 있었다.

외부링크

• hexo icarus 테마에 커스텀 레이아웃, 스타일(css) 적용하기

utterances 세팅

utterances에 들어가서 설명을 읽어보는게 좋다.

github repo 생성

사용하기 위해 개인 github에 comment용 public repository를 생성한다.

굳이 repo를 생성하고 싶지 않다면 userID.github.io repo를 사용해도 된다.

app 설치

utterances app에 들어가서 github에 app을 설치하자.
나는 comment가 들어갈 repo인 hangack_blog_comment만 지정했다.

요소 설정하기

repo:박스에 위에서 생성한 개인 userID/repoName을 입력한다.

Blog Post ↔️ Issue Mapping 방식은 현재 상황엔 별로 중요하지 않지만 개인 세팅에 따라 반드시 특정 세팅을 지정할 필요도 있을 것이다.

1. pathname
   • 포스트의 URI로 issue가 생성된다. URI가 바꼈을 때 문제가 될지도?
2. URL
   • URL 기준으로 생성
3. title
   • 포스트 제목
4. og:title
   • open_graphic 제목
5. Specific issue number
   • 이슈 번호를 생성해서 작성된다.
6. specific term
   • 포스트 제목에 기입된 특정 단어를 기준으로 작성된다.

댓글 위젯 넣기

utterances에서 제안된 방식

테마 등 설정을 전부 끝냈다면 Enable Utterances 분류에 script 코드가 생겼을 것이다.

1
2
3
4
5
6
7

<script src="https://utteranc.es/client.js"
        repo="userID/repoName"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

이 코드를 post마다 넣어주면된다.

hexo의 경우엔 post.md 혹은 draft.md로 불러올 수 있겠지

hexo icarus에서

icarus에서는 utterances 타입을 지원하기에 _config.theme.yml에 comment 항목을 찾아서 아래 형식대로 기입하자.

1
2
3
4
5
6

comment:
    type: utterances
    repo: userID/repoName
    issue_term: pathname
    theme: github-light
    crossorigin: anonymous

어? 안되잖아?

utterances.json 파일을 뜯어봤더니 crossorigin 요소에 대한 처리 방식이 없었다.

반면, utterances.js 파일에선 "crossorigin": "anonymous"로 기본값을 지정했기에 문제없다 판단하고 요소를 제거

1
2
3
4
5

comment:
    type: utterances
    repo: userID/repoName
    issue_term: pathname
    theme: github-light

댓글댓글단다

외부링크

• disqus에서 utterances로 바꾸기
• utterances 적용

Hexo 이미지 변경

hexo blog에서 사용하는 avatar, favicon, logo 등을 변경하는 방법은 간단하게 public\img 경로의 파일명을 그대로 이미지만 교체해주면 된다.

Hexo clean의 경우 문제점

하지만 블로그 관리 초기라 설정을 변경하거나 이미지를 교체하는 등 파일 첨삭이 있을 때마다 $ hexo clean 명령어를 남발하는데,
clean은 캐쉬 파일인 public 폴더를 통으로 삭제하는 명령어다.

그럼 캐쉬를 지울 때마다 img 내의 이미지들을 수정해줘야 한다.

난 이런 번거로운 일은 못한다.

그렇기에 $ hexo g의 작동방식을 알아야한다.
generate는 불러올 theme와 user의 config를 유지한 채, user의 source 디렉토리에서 UnderBar( _ ) 표시된 경우나 _posts같은 특수한 경우를 제외하고 public 폴더에 그대로 붙여넣는 특징이 있다.

그럼 해결법은 간단하다. source\img경로를 만들어서 원하는 파일을 _config.theme.yml에서 설정한 파일명 그대로 넣어두면 끝이다.

_config.theme.yml 설정 변경

경로를 수정하기 전에 각각의 이미지가 어떤 요소를 뜻하는지 알아야한다.

_config.theme.yml을 직접 뜯어보는걸 권장하지만 간단히 내가 설정한 4놈을 icarus 기준으로 설명하자면,

• avatar: 블로그 좌측에 표시된 블로거의 아바타
• favicon: 브라우저 열린 page 바에 표시되는 블로그 아이콘
• logo: 블로그 상단의 대각선으로 Han-Gack
• og_image: open_graph에 걸리는 이미지
  • open_graph: 외부 사이트에서 링크됐을 때 정보를 알려주기 위해 설정하는 옵션, 이미지 파일명이 기본값이랑 다르다면 head - open_graph 탭의 image를 설정하면 된다.

명칭에 대한 정보를 알았으니 yml 파일에서 파일명과 확장자명에 주의하며 사용할 옵션 위주로 수정하면된다.

toc

Hexo toc(Katalog) 사용하기에서 toc(Katalog)를 적용해 봤다.

sidebar sticky

하지만 sidebar가 트래킹되지 않아 불편하다.
현재 사용하는 icarus테마는 _config.theme.yml에서 다양한 옵션을 제공한다. 그 중 sidebar - left(or right) - sticky옵션이 트래킹 옵션이다.

위젯 박스를 왼쪽만 사용하고 있으니

1
2
3
4
5

sidebar:
    # Left sidebar configurations
    left:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: true

그렇다 어디서든 언제언제까지나 트래킹되는게 문제다.

원하는 방식은 특정 post를 읽을 때만 트래킹되는 방식이었으니 _config.theme.yml의 sticky 값은 다시 false로 돌려놓자.

post 개별 설정

우리에겐 scaffolds 디렉토리 내 post 기본 양식 설정과 _config.theme.yml에서 가져올 위젯 및 sidebar의 yml 양식이 있다.

그리고 이전 포스트에서 링크한 Hexo Front-matter에선

1
2
3

---

---

넣을 코드와 코드를 넣을 공간이 준비되었고 작성한 양식을 불러올 방법도 있으니 우리는 draft.md와 post.md를 수정하기만 하면 된다.
설정 전에 작성한 포스트가 많다면..야 너두?

toc 트래킹만 사용한다면 아래 코드를 넣어주면 된다.

1
2
3
4
5
6
7
8
9
10

---
sidebar:
  left:
    sticky: true
widgets:
  - type: toc
    position: left
    index: false
toc: true
---

개별 설정의 단점은 _config의 모든 설정을 불러오지는 않기 때문에 각종 옵션을 넣는다면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

---
title: {{ title }}
date: {{ date }}
categories:
 - 
tags:
 - 
sidebar:
  left:
    sticky: true
widgets:
  - type: profile
    position: left
    social_links:
        Github:
            icon: fab fa-github
            url: 'https://github.com/hangack'
        Youtube:
            icon: fab fa-youtube
            url: 'https://www.youtube.com/channel/UCQuHrr7-mBtutw9V94XGH-g'
        Twitch:
            icon: fab fa-twitch
            url: 'https://www.twitch.tv/hangack'
        Steam:
            icon: fab fa-steam
            url: 'https://steamcommunity.com/id/HanGack/'
  - type: toc
    position: left
    index: false
  - type: categories
    position: left
toc: true
---

외부링크

• Hexo Front-matter

Katalog? toc?

TOC: Table of contents, 목차

위키 등에서 주로 사용되는 index식 목차이며 클릭 시 해당하는 열로 이동하는 메커니즘이라 인식하면 된다.

Markdown에서 목차

html에서는 <h#>을 사용해서 목차를 표현하지만 md에서 목차 구분은 #의 개수로 한다.

기본값으로 # 1개는 post 제목 크기와 동일해, 나는 h2: ##부터 사용한다.

h4: ####부터는 기본 text 크기와 구분하기 어려우며 h5는 기본 텍스트와 크기가 같을 것이다.

h4

h4

h5

h5

h6

h6

# h7

h7

## h8

h8

테스트로 h8까지 작성해봤는데, hexo에선 h6까지만 인식한다.

toc 사용하기

Toc을 지원하는 테마를 사용한다면,
Front-matter에 toc: true를 넣어줌으로 사용할 수 있다.

1
2
3
4
5

---
title: {{ title }}
date: {{ date }}
toc: true
---

위 Front-matter는 나의 page.md 설정값

toc 적용 확인

hexo s로 local 확인을 하거나 hexo g -d로 배포해서 toc 정상 적용되었는지 확인해본다.

icarus에서 세부 설정

icarus theme는 config에 toc type을 설정할 수 있도록 기본값이 작성되어있다.

Hexo icarus TOC default값

1
2
3
4
5
6
7
8
9
10
11

# Table of contents widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: toc
    # Whether to show the index of each heading
    index: true
    # Whether to collapse sub-headings when they are out-of-view
    collapsed: true
    # Maximum level of headings to show (1-6)
    depth: 3

position: Katalog box 위치
index: Katalog box 목차 앞에 숫자를 표현할 지 (ex: 1.2 icarus에서 세부 설정)
collapsed: 하위목차 간략화
depth: #번째 하위 목차까지 표시

＊2021/11/20 기준 내 설정

1
2
3
4
5
6
7
8
9
10
11

# Table of contents widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: toc
    # Whether to show the index of each heading
    index: false
    # Whether to collapse sub-headings when they are out-of-view
    collapsed: false
    # Maximum level of headings to show (1-6)
    depth: 2

depth를 6으로 설정해주면 위에서 test한 h6까지 katalog에 표시될 것

외부링크

• Hexo Front-matter
• Hexo Helpers

Category

Hexo Category 설정하기

Hexo를 처음 사용한다면 Front-matter 영역에는 기본적으로 title, date, tags만 나와있을 것이다.

순서는 상관 없으니 categories:를 추가하자.
참고로 categories와 tags는 - 로 관리할 수 있다.

1
2
3
4
5
6

title: {{ title }}
date: {{ date }}
categories:
 - 
tags:
 - 

※ 태그와 카테고리의 가장 큰 차이점: 카테고리는 하위 -로 하위 카테고리가 생성되지만, 태그는 하위 태그의 개념이 없다.

scaffolds로 post 기본설정하기

포스팅이 한두개도 아니고 포스팅을 할 때마다 categories:를 넣어주는건 너무나도 귀찮은 방식이다.

\scaffolds\post.md를 원하는 형식으로 수정하면 hexo new명령어로 post를 생성할 때 불러오는 기본 양식을 바꿀 수 있다.

만약 Hexo draft로 신규 post를 관리한다면 draft.md를 수정해주면 된다.

외부링크

• Hexo Front-matter

markdown 문법으로 이미지를 삽입한다면 아래 링크를 참조
Markdown 하이퍼링크 이미지 넣기

※ hexo URI

hexo blog에서 post를 작성할 때 기본 path URI를 알아두면 편리하게 주소를 입력할 수 있다.
hexo URI는 기본적으로 source 폴더이므로 source 이후의(/경로/파일.확장자)만 입력해서 Local 주소를 넣을 수 있다.

Hexo에서 지정한 default 이미지 폴더는 /source/images이다.

Hexo 기본 경로를 따른다면

1

![alt](/images/dir/file_name.extension)

외부링크

• Hexo Asset Folders

icarus 테마를 사용하다가 상단의 About이 있지만 경로를 찾지 못해 about 페이지를 만들어봤다.

hexo에서는 특정 경로를 어느 페이지에서든 진입할 수 있게 테마 옵션에서 navbar를 지원한다.

icarus 테마는 기본적으로 about 페이지 경로가 설정되어있지만 _config.theme.yml에서 표시할 장소에 About(text): /about(경로)을 추가한다.

1
2
3
4
5
6
7
8
9

# Page top navigation bar configurations
navbar:
    # Navigation menu items
    menu:
        Home: /
        Archives: /archives
        Categories: /categories
        Tags: /tags
        About: /about

이런식으로 menu바 설정을 했으면 해당 URI에 대응할 수 있는 경로를 만들어줘야한다.

source경로 아래에 원하는 경로를 만들어주는 page layout을 이용해서 about 경로를 생성하자.

1

$ hexo new page about

위 명령어가 정상 작동되었으면 /about 경로가 생성되고 그 아래 index.md 파일도 따라 왔을것이다.
index.md가 about에 대한 page로 포스트 작성하듯 원하는 내용을 작성하면된다.

외부링크

• How to add route for Hexo?