hexo 블로그를 꾸며보자!! 자세히 보기(read more) 재 작업 완료!!

안녕하세요.

굳헬로 @goodhello 입니다.

어제는 hexo 블로그에 자세히 보기(read more)를 적용해 보았는데요.

그게 썩 마음에 들지 않아서 계속 코드를 살펴 보았는데요.

제가 node.js를 공부하기 시작한지 아직 얼마 안되다 보니, 이래저래 난관이 많더라구요.

어제 설치했던 hexo-auto-excerpt 코드를 살펴 보자면

const htmlToText = require('html-to-text');
(function(){
    const sanitize = function (post) {
        const content = htmlToText.fromString(
            post,
            {
                ignoreImage: true,
                ignoreHref: true,
                wordwrap: false,
                uppercaseHeadings: false
            }
        );
        return content;
    }

    hexo.extend.filter.register('after_post_render', function (data) {
        const excerptLength = hexo.config.excerpt_length || 300;
        const post = sanitize(data.content);
        const excerpt = post.substr(0, excerptLength);
        data.excerpt = excerpt;
        return data;
    });
})();

포스트를 출력할때 포스트의 내용을 담고 있는 data.content 를 htmlToText 를 이용해서 html 형식을 text 형식으로 변환하다 보니, 이미지 같은 태그는 사용이 불가능해져서 텍스트로만 출력이 되는 방식인데...

이 코드를 열심히 수정해서 겨우 이미지와 함께 몇줄의 설명을 출력하도록 코드를 만들었는데...

레이아웃이 마구 흩어져서... 역시 아직 익숙하지 않은 코드를 마구 건들면 안되겠더군요.

그렇게 레이아웃 관련 코드를 계속 살펴 보았는데요.

테마의 레이아웃에 있는 index.ejs 파일을 살펴보니

<% page.posts.each(function(post){ %>
    <%- _partial('common/article', { post, index: true }) %>
<% }); %>
<% if (page.total > 1) { %>
    <%- _partial('common/paginator') %>
<% } %>

common/article에 포스트 출력관련 코드가 있는걸 발견하였고, article.ejs 를 통해서

<div class="content">
    <%- index && post.excerpt ? post.excerpt : post.content %>
</div>

post.excerpt 라는 코드를 발견하게 되었는데, 이부분이 어제 공부했던 마크다운 포스트 파일인 md에 <!-- more --> 를 넣었을때 자세히 보기(read more) 버튼이 적용되는 코드더라구요.

그래서 조금 더 깊이 찾아 보았습니다.

블로그의 노드 모듈인 node_modules내에 다음 경로에서 node_modules\hexo\lib\plugins\filter\after_post_render
excerpt.js 파일을 찾았고,

'use strict';

const rExcerpt = /<! --+\s*more\s*--+>/i;

function excerptFilter(data) {
  const { content } = data;

  if (typeof data.excerpt !== 'undefined') {
    data.more = content;
  } else if (rExcerpt.test(content)) {
    data.content = content.replace(rExcerpt, (match, index) => {
      data.excerpt = content.substring(0, index).trim();
      data.more = content.substring(index + match.length).trim();

      return '<a id="more"></a>';
    });
  } else {
    data.excerpt = '';
    data.more = content;
  }
}

module.exports = excerptFilter;

위와 같은 코드를 확인할 수 있었습니다.

그나저나 node.js 를 좀 공부하다 보니 어찌 어찌 포스트에 자동으로 <!-- more -->를 넣을 수 있도록 만들 수 있겠더군요.

post.content에서 특정 위치를 잡고 <!-- more --> 코드를 넣어 주면 되는데, 그런데 그게 생각보다 어렵긴 하더군요. 이미지나 태그를 잘 분석해서 넣어야 하는데...

그렇게 고생 좀 하면서 정보를 찾다보니.....

아니 제가 원하는걸 이미 너무도 잘 만들어 놓은 플러그인이 또 있더라구요.

바로 hexo-excerpt 플러그인!!! 왜 이걸 진작에 찾지 못했는지...

어쨌든 기존에 설치했던 hexo-auto-excerpt 플러그인은

npm uninstall hexo-auto-excerpt

위와 같이 npm uninstall 명령어를 통해 삭제하고

npm install hexo-excerpt --save

hexo-excerpt 플러그인을 설치해 주었습니다.

그리고 hexo 서버를 실행해 주면!!!!

이미지를 포함해서 포스트의 10줄까지 보여주고 자세히 보기 버튼이 딱 나옵니다.

기본적으로 10줄까지 나오도록 코드가 만들어져 있는데,

node_modules\hexo-excerpt\lib 폴더의 hexo-excerpt.js의 코드에 설정된 코드를 수정하여 원하는 대로 출력할 수 있습니다.

const DEFAULT_CONFIG = {
  depth: 10,
  excerpt_excludes: [],
  more_excludes: [],
  hideWholePostExcerpts: false
};

현재 10줄이 출력되도록 depth 값이 10으로 설정되어 있는데,

depth: 5,

이렇게 코드를 수정해주면 5줄만 출력되게 됩니다.

이 코드를 잘 분석해서 수정하면 본인이 원하는 다양한 출력 방식을 만들 수 있을 것 같네요.

그럼 오늘은 여기까지!!!

다음 시간에는 이제 본격적으로 카테고리 작업을 시작해볼까 하는데.... 자동화 하기가 쉽지 않을 것 같네요.

아마도 수작업이 많이 들어가야 할 것 같은....

그럼 오늘 하루도 파이팅 하시고~~

행복한 하루 보내시기 바랍니다~