Hexo 에 나만의 스크립트를 만들자 (script)

Posted on Edited on In Word count in article: 239 Reading time ≈ 1 mins.

Hexo 블로그에 기능 추가 방법

post 를 타임라인 형태로 추가 하고 싶어졌다
hexo plugin 을 찾아봐도 timeline 관련 플러그인이 없었다

기능을 추가하려고 공식문서를 보니
2가지 방법이 있었다

스크립트 (script) 추가

If your plugin is relatively simple, it’s recommended to use a script. All you need to do is put your JavaScript files in the scripts folder and Hexo will load them during initialization.

hexo.iohexo.io/docs/plugins#Script

너무 간략한 설명이라 살짝 당황스럽다

  1. hexo root 폴더에 scripts 폴더를 만들고
  2. .js 파일을 만들어서 넣어두면 알아서 읽어 간다

라는 건데

  1. .js 파일을 만들때 hexo 가이드에 맞춰서 만들어야 한다
    라는 조건이 빠져 있었다

script 를 만들자

  1. hexo root 에 scripts 폴더를 만든다

  2. scripts 폴더 안에 timeline.js 파일을 만든다

  3. timeline.js 를 다음 과 같이 소스를 넣는다

    ./scripts/timeline.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    'use strict';
    const mdline = require("mdline");
    const parser = require("@mdline/mdline-parser");
    const formatter = require("@mdline/mdline-formatter-html");
    const handler = function (args, content) {
      return mdline.processText(content, {
        parser,
        formatter
      })
    };

    hexo.extend.tag.register('timeline', handler, {
      async: true,
      ends: true
    });

  4. timeline 의 의존성 라이브러리를 설치해준다

    1
    npm install mdline --save

  5. post 작성시에 timeline 을 추가한다

    안성기 형님이 아역배우 출신인거 post 작성하면서 알았다

think-korea-chronicles-of-child-actors.md
1
2
3
4
5
6
7
## 잘 자라준 배우들
아역스타로 데뷰해서 2021년 현재 배우로 활동중인 인물
{% timeline %}
### 1952: 안성기
6세, 영화 <황혼열차(1957)>
![안성기](https://i.imgur.com/lJMRvp5.jpg)

  1. 문서를 build 해서 확인한다
    1
    npm run deploy

적용 결과

대한민국 아역배우 연대표 (2021년 기준)