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

Hexo 블로그에 스크립트(Script) 추가 방법

post 를 타임라인 형태로 추가 해보고 싶어졌습니다
hexo plugin 을 찾아봐도 timeline 관련 플러그인이 없어서 직접 만들었습니다.

기능을 추가 하는 방법은 2가지(스크립트 추가, 플러그인 추가) 입니다.

스크립트 추가 방법

공식문서의 설명
{% quote hexo.io https://hexo.io/docs/plugins#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.
{% endquote %}
너무 간략한 설명이라 감이 안잡혔지만

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

필수조건이 hexo 가이드에 맞춰야 합니다
3. .js 파일을 만들때 hexo 가이드에 맞춰서 만들어야 합니다

스크립트 만들기

1. hexo root 에 scripts 폴더를 만든다
2. scripts 폴더 안에 timeline.js 파일을 만든다
3. timeline.js 를 다음 과 같이 소스를 넣는다

   '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 의 의존성 라이브러리를 설치해줍니다
```bash
npm install mdline --save

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

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

6. 문서를 build 해서 확인합니다
```bash
npm run deploy

적용 결과

• 대한민국 아역배우 연대표

참조문서

• Hexo Plugin