GitHub + Hexo 개발일지 下 - 부가기능 추가 / 적용
2018.05.06 ~ 2018.05.07
RSS
사실 RSS 피드는 우리나라에서 그다지 활성화되어있지 않다. 새 글 알림을 RSS로 받아보는 사람을 주변에서 사실상 본 적이 없을 정도지만 대부분의 블로그에서 기본 기능으로 제공하는 것이기에 해놓아서 나쁠 것은 없다고 생각되어 구현하였다.
참고) [ https://juhojuho.github.io/2017/03/27/hexo-tip/ ]
Markdown + MathJax
개인적으로 앞서 두 글을 쓰면서 마크다운 문법이 상당히 편리함을 느끼고 있었으나, 위 블로그를 읽다보니 일부 뛰어난 실력을 가진 사용자들에게는 이것이 제한적일 수도 있다는 생각이 들었다. 더구나 일부는 전문적인 내용을 쓰려고 할텐데 그렇게 되면 마크다운이 받쳐주지 못하는 부분도 있을 것이기 때문에 지원해줄 수 있는 부분은 지원해주는 것이 나을 것 같았다. 근데 역시 익숙하지 않아선지 플러그인들의 사용법이 다 뭔가 너무 복잡한게 현실… 그래서 찾은 대안이 LaTeX 입력을 지원하는 MathJax다. LaTeX과 그리 거리가 멀지 않은 학생들이기에 그나마 간편하게 쓰지 않을까 싶지만 결국 다시 LaTeX으로 돌아오다니ㅜ
라고 원래 쓰고 있었으나 이내 멍청함을 알았다. 기본적으로 Hueman 테마의 _config.yml에 mathjax 속성이 있었다. 그래서 그냥 True하면 되는 것이었다.
그래도 참고) [ https://www.npmjs.com/package/hexo-renderer-mathjax ]1
$\mathbb{ex.}$ $^{\forall} x \in \mathbb{N}$, $\log x \geq 0$
처럼 $ 사이에 LaTeX 형식으로 수식을 쓰면 $\mathbb{ex.}$ $^{\forall} x \in \mathbb{N}$, $\log x \geq 0$ 처럼 나오게 된다. 수식 사이의 공백이나 텍스트는 LaTeX에서는 \text{abc}로 지원하긴 하지만 그냥 수식을 닫고 쓰는 게 훨씬 깔끔할 듯 하다.
Google Analytics + Search Console, SEO
Hueman 테마의 _config.yml에는 기본적으로 google_analytics 속성이 있다. 방문자 수 기록도 하는 것이 좋을 거고 EOS 구글 계정도 있으니 해보기로 했다. 그런데 찾다보니 추가적으로 할 수 있는 기능들이 있길래 모두 적용해보았다.
계속 리디렉션이 감지됨이라고 뜨는 것으로 보아 hexo에서 페이지를 처리할 때 기본적으로 리디렉션을 한 번은 거치는 듯 하다. 아마 바뀐 링크에 대해서 리디렉션을 정의해줄 수 있기에 정의가 되지 않은 경우는 셀프 리디렉션이 이루어지는 것으로 추측 중…
위 현상의 원인을 찾았다. 페이지 URL을 입력할 때 http:// 로 입력을 하여 https:// 로 리디렉션되는 과정이 걸리는 것이었다.
참고) [ http://futurecreator.github.io/2016/06/15/hexo-google-site-search-console-analytics/ ]
~ 2018.05.10
페이지 내에 여러가지 추가할 수 있는 것이 많은데, 대표적인 것이 방문자 통계이다. 2018 SAF를 목표로 시작한 프로젝트기에 SAF 기간 동안의 최초 접속자 수를 기록하고자 설정하였다. 홍보 이전에 접속하는 사람들이 있을 수 있으나, 9:56AM 현재까진 없다
이유를 찾지 못했으나 구글에 eosofksa.github.io를 검색하면 링크는 올바르게 나오나 제목이 [GitHub + Hexo 개발일지 下]라고 나온다. 한국 검색 결과에는 한글이 들어간 텍스트를 조합하여 구글이 알아서 추가한다는 얘기가 있는데, 이 이유에 해당하는 것 같아 페이지 제목을 [EOS]에서 [EOS of KSA | 한국과학영재학교의 컴퓨터 클럽]으로 변경하였다. 바로 적용되지는 않는 듯하다.
+) 카톡 때문에 결국 제목을 [EOS 블로그]로 수정하였다. 2018.05.12 확인 결과 구글에서 메인 페이지의 제목은 [EOS 블로그]로 변경되었다!
2018.05.12
SAF 진행 중인 현재 신규 유입량이 기록되고 있는 것이 관측되어 참고용 데이터로의 가치가 충분할 것으로 예측된다.
뿐만 아니라 각 포스트별 순 페이지뷰 수가 기록되어 있는데, 기존의 글 목록 2페이지에 위치하던 개발일지들이 SAF 기간동안 페이지뷰 수가 0인 것을 보고 충격을 받아 페이지 시스템을 없애버렸다. 사람들이 이 개발일지를 안 본 것은 절대로 재미없어보여서가 아니라 눈에 안 띄었기 때문일 것이다. 아무튼 그렇다. (ㅠㅜ)
Open Graph
open_graph 속성에 대해 궁금해하던 중 다행히 위 블로그에서 이에 대한 내용을 다루었길래 참고하였다. 무엇인지와 어떻게 하는지에 대해서는 잘 정리된 아래 링크에서 알아보자. 이 블로그의 경우 head.ejs에서 og:image를 따로 제작한 이미지로 우회시키고, og:title에서 글 제목 뒤에 “ | EOS”가 붙도록 하였다.
참고) [ http://futurecreator.github.io/2016/06/16/opengraph-social-meta-tag/ ]
2018.05.08
Hexo-Markdown-Include
4:00 AM
연휴의 마지막날 CPS 과제를 어찌어찌 마치고 룸메가 확통으로 고통받는 동안 글 아래에 들어가는 네임태그를 좀 편리하게 관리할 필요가 느껴져 MarkDown 안에 MarkDown을 포함하는 방법에 대하여 알아보게 되었다.
참고) [ https://stackoverflow.com/a/28617550 ]
markdown-include 모듈의 존재를 알게 되었으나 js 파일에 들어가야 하는데 hexo에서는 어디에 적합할지 모르겠어서 hexo용을 따로 찾아보니 다행히도 있더라. _config.yml을 수정하라는 게 테마 내의 것인지 hexo 전체의 것인지 구분되어있지 않아 헷갈렸으나 테마 내의 것을 수정하니 일단 성공했다.
dir 변수가 있으나, sources/nametag로 변수를 수정하고 해당 경로 내에 내 네임태그 파일을 넣었음에도 불구하고 sources/_template 안에 없다는 오류가 발생하는 것으로 보아 변수값을 바꾼다고 파일을 가져오는 대상 폴더가 바뀌지는 않는 듯 하다. 참조한 파일이 sources/_template 안에 없으면 방금 말한 그 오류가 발생하는데, 이 때문에 서버가 아예 켜지지 않기도 한다.
참고) [ https://www.npmjs.com/package/hexo-include-markdown ]
+) 네임태그를 일괄적으로 수정할 수 있게 되었으니 아마 프로필 사진 등 좀 더 네임태그를 꾸미는 쪽의 수정작업을 진행해도 될 듯
11:50 AM
<p>로 감싸서 파일 전체를 긁어오는 것으로 파악된다. 이 과정에서 파일 내의 줄바꿈을 모두 <br/>로 변경하는 등의 작업이 일어나는데, 네임카드에 이미지를 넣는 부분은 article-entry img로 포함이 되는 바람에 좀 더 찾아봐야 될 듯
그 와중에 <p>와 <br/>이 HTML에서 태그로 적용되는 바람에 이 부분만 다섯 번째 수정 중이다.(ㅠㅜ) 왼쪽을 & lt;로 써주거나 오른쪽을 \> 로 써야 하는 듯 한데, 첫번째는 너무 귀찮아 두번째를 택하였다.1
To print <p>, you should write as <p\>
2018.05.10
video.js
게임으로 만든 게임 글을 업로드하던 중 비디오 플러그인이 갖춰져 있지 않다는 것을 알게 되었다. 카카오톡 공유 추가하기를 하면서 script는 head.ejs에 추가하는 것이 맞다는 것을 깨달았기에 아래 링크를 참고하여 바로 설치했다.
참고) [ https://github.com/getpelican/pelican/issues/1099 ]
2018.05.12
Disqus Comment Count Link
2018 SAF 이벤트를 진행하던 도중 댓글이 달렸는지 아닌지 확인할 길이 없다는 것을 깨닫고 뜨면 좋겠어서 했다.
참고) [ https://help.disqus.com/developer/adding-comment-count-links-to-your-home-page ]
Hueman 테마의 경우 홈 화면의 제목 표시를 themes/hueman/layout/common/post/title.ejs에서 관리하고, 그 중에서도 linkable의 해당하는 경우이므로 아래와 같이 코드를 수정하였다.1
2
3
4
5
6
7
8
9<% if (typeof(linkable) !== 'undefined' && linkable) { %>
<h1 class="<%= class_name %>" itemprop="name">
<a href="<%- url_for(post.path) %>"><%= post.title %></a>
<!-- 추가 시작 -->
<i class="icon fa fa-comments" style="font-size:0.7em; color:rgba(255,255,255,0.5)">
<span class="disqus-comment-count" data-disqus-url="https://eosofksa.github.io<%- url_for(post.path) %>"></span>
</i>
<!-- 추가 끝 -->
</h1>