꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

Hexo 테마 만들기 [번역] - Part 3


드디어 막바지입니다.

완성 후에 CSS나 JavaScript를 더하면 금상첨화겠지요 :)

자 끝을 향해 가봅시다!



지난 Part 1Part 2에서는 블로그에 필요한 모든 페이지를 만들어 보았습니다.

이제 우리는 게시물에 Disqus 댓글 기능을 추가하고 Google Analytics을 통해 웹로그를 분석할 수 있도록 할 것입니다.

마지막으로 Sidebar의 위젯을 완성하며 마무리하도록 하겠습니다.

“Disqus나 Google Analytics 부분을 원치 않으면 넘어가셔도 상관 없습니다.”

In Part 1 and Part 2, we have created all the pages of the blog.

In this last section, we are going to add Disqus comments to our posts, implement Google Analytics and

complete the sidebar’s widgets.


다른 파트 글 링크



Disqus 댓글

저는(원문의 필자는) 이전에 이미 how to implement Disqus comments in Hexo라는 글을 게시해 놓았습니다.

더 많은 정보가 필요하시면 참고하시되, 아래에도 설명이 되어 있습니다.

I have already written a blog post on how to implement Disqus comments in Hexo.

Please refer to it if you need more information but here is how to do it:


“ Disqus 관련 부분은 제가 살짝 첨언을 드리겠습니다. “

  1. https://disqus.com/으로 접속하셔서 계정을 만듭니다. 구글이나 페이스북 등 대표 SNS 계정으로 로그인도 가능합니다.


  2. [Get started]를 클릭합니다.

    20170913-1


  3. [I want to install disqus on my site]를 클릭합니다.

    250


  4. 개인 정보를 입력하시면 밑에 [Create Site] 링크가 활성화 됩니다. 활성화가 되면 클릭하셔서 다음 단계로 넘어가세요.

    250


  5. 여러가지 종류의 플랫폼들이 등장하는데, 우리는 해당사항이 없으니 맨 밑에 있는

    [I don’t see my platform listed, install manually with Universal Code]를 클릭합니다.

    250


  6. 그러면 아래와 같은 코드를 얻을 수 있습니다. 코드를 복사해서 Disqus 댓글을 사용하고 싶은 곳에 붙여넣기만 하면 됩니다.

    원문의 필자는 comments.ejs파일을 만들어서 그 안에 이 코드를 입력한 뒤 관리하는 것을 추천하고 있습니다.

    20170913-5

    layout/_partial/comments.ejs
    <div id="disqus_thread"></div>
    <script>
    [...]
    </script>
    <noscript>Please enable JavaScript to view the
    <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>

  7. 게시글 본문 하단에 댓글이 표시될 수 있도록 article-full.ejscomments.ejs를 불러옵시다.

    layout/_partial/comments.ejs
    <div class="blog-post">
    [...]
    <!-- Comments -->
    <%- partial('comments') %>
    </div>

  8. 마지막으로 after-footer.ejs에 6번에서 얻으신 아래 코드를 추가하면 됩니다.

    20170913-6

    layout/_partial/after-footer.ejs
    <script [...]></script>

“ 다시 본문으로 이어집니다.”


Google Analytics

Google Analytics 도구는 Disqus를 설치하는 방법과 거의 비슷하기 때문에 빠르게 넘어가겠습니다.

“원문 필자의 관련 글이 있으니 필요하신 분은 참고 하세요”

Google Analytics implementation follows the same principle as Disqus so I will move through it quickly.

I have another blog post on that subject.


테마 설정에 Tracking ID를 입력

여러분 계정의 Google analytics 추적 ID를 얻으신 뒤 아래와 같이 테마 _config.yml파일에 정보를 추가합시다.

# Google Analytics Tracking ID
google_analytics: 여러분의 추적 ID

새 조각 파일 만들기

새 조각 파일을 만듭시다. layout/_partial/google-analytic.ejs

Create a new partial view layout/_partial/google-analytic.ejs

layout/_partial/google-analytic.ejs
<% if (theme.google_analytics){ %>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%= theme.google_analytics %>', 'auto');
ga('send', 'pageview');
</script>
<% } %>

위 코드는 단순히 추적 아이디의 Google Analytics 추적 코드를 복사해서 입력한 것입니다.

“위 코드는 달라질 수 있으니 개인 추적 코드를 확인하세요.”

This is a simple copy paste of Google Analytics Tracking code with a parameterized ID.


조각 파일 합치기

웹사이트의 모든 페이지에 위의 추적 코드가 나타나게 하기 위해서 모든 페이지에 일일이 입력하는 것은

그다지 좋은 방법이 아닙니다.

<head></head> 사이에 위 코드를 불러옵시다.

We want our tracking code on all pages, and there is not best place to put it on a page.

Let’s add it at the end of our <head></head>:

layout/_partial/head.ejs
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
[...]
<!-- Google Analytics -->
<%- partial('google-analytics') %>
</head>

이렇게 하면~ 끝입니다 !

And we are done !



위젯 Widgets

현재 위젯 부분은 sidebar.ejs 파일 안에 bootstrap template code를 직접 입력해서 대충 집어넣어 놓은 상태입니다.

이를 수정해 봅시다.

At the moment our widgets are just a bunch of hardcoded, static HTML inside sidebar.ejs. Let’s fix that.


설정

설정부터 시작해보죠.

Let’s start with the configuration.

지금부터 2가지 위젯을 만들겁니다. 하나는 About 위젯이고 나머지 하나는 Tags 위젯입니다.

테마 설정 파일을 열어서 아래와 같이 입력해 주시고 세부 내용은 개인 설정에 맞게 바꿔주세요.

# Widgets List
widgets:
about: This blog is based off the official bootstrap blog template.
tags: true

위젯의 위치를 잡아줄 Sidebar는 테마 설정에 입력된 모든 위젯을 불러와서 렌더링할 수 있어야 합니다.

아래 코드와 같이 만들면 되겠지요.

Our sidebar which is the placeholder of all our widgets, will need to iterate through all the widgets

in the configuration and render them appropriately

This what the sidebar EJS template now looks like:

layout/_partial/sidebar.ejs
<% for(var widget in theme.widgets){ %>
<%- partial('widget/' + widget) %>
<% }; %>

첫 번째 위젯: About

새로 layout/_partial/widget/about.ejs 파일을 만들고 이 안에 첫 번째 위젯을 만들어 봅시다.

아래 코드는 bootstrap template의 코드를 복사해 온 것이지만 Text는 테마 설정에 입력된 정보를 불러온 것입니다.

Let’s build our first widget inside a new partial called layout/_partial/widget/about.ejs.

The code is copy pasted from the original bootstrap template and the text now comes from the configuration.

layout/_partial/widget/about.ejs
<% if(theme.widgets.about){ %>
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p><%- theme.widgets.about %></p>
</div>
<% } %>

두 번째 위젯: Tag

이번에는 살짝 더 발전된 형태의 위젯을 만들어 봅시다.

블로그에 작성된 모든 Tag를 담는 단락을 하나 만들고 글씨 크기를 Tag의 길이에 비례해서 바꿔보겠습니다. layout/_partial/widget/tags.ejs파일에 아래 코드를 담았습니다.

Let’s do something slighty more advanced for this widget.

Display a paragraph with all the tags used in the blog, separated by whitespaces and

with a font size proportional to the number of times the tag is used.

Here is the code in layout/_partial/widget/tags.ejs

layout/_partial/widget/tags.ejs
<% if (theme.widgets.tags && site.tags.length){ %>
<div class="sidebar-module">
<h4>Tags</h4>
<p>
<% site.tags.sort('name').each(function(item){ %>
<a href="<%- config.root %><%- item.path %>"
style="font-size: <%- Math.min(item.posts.length * 2 + 13, 30) %>px">
<%= item.name %></a>
<% }); %>
</p>
</div>
<% } %>
  • site.tags : 모든 Tag에 접근할 수 있게 해줍니다.
  • site.tags.sort('name') : Tag 이름 순으로 정렬시켜 줍니다.
  • item.path : 해당 Tag의 Archive 페이지에 대한 상대 경로 주소입니다.
  • item.posts.length : Tag가 사용된 횟수(빈도)를 알려줍니다.
  • item.name : Tag label입니다.
  • site.tags gives us access to all the tags
  • site.tags.sort('name') sorts all the tags by alphabetical order
  • item.path correspond to the relative URL to the archive page for that tag
  • item.posts.length gives you the number of time a tag is used
  • item.name is the Tag label

저는(원문 필자는) 글씨 크기를 ‘태그 빈도 * 2 + 13 px’로 정했습니다만, 취향에 맞게 조절하시면 됩니다.

I chose 13 + (tag occurence * 2) in pixels (capped at 30px) for the font-size

but feel free to use what you want.



이것으로 끝입니다. 도움이 되었기를 바랍니다.

That’s the end of this tutorial, I hope you have learnt something interesting from it.


“수고 많으셨습니다. 여러분 손 끝에서 멋진 웹 사이트가 탄생하길 바랍니다 :)”

*** 오역이나 오류가 있다면 알려주세요. 큰 도움이 됩니다. ***

#EJS #Hexo #JavaScript #dev #번역