Hexo

Hexo 에 Github 저장소 타임라인 (Repository timeline) 정보 추가하기

🗓 ⏰ 소요시간 7 분

이전 포스트에서 github 유저 혹은 리파지토리의 정보를 가지고 있는 네임카드를 Hexo 블로그에 달아봤습니다. 저는 사이드바에 달아서 지금 블로그를 보시면 네임카드를 확인해보실 수 있습니다. Github 관련 유용한 플러그인이 하나 또 있어서 추천드리려고 합니다.

Hexo 네임카드 추가하기 (Github Card)

hexo-github 플러그인

IT 혹은 프로그래밍 관련 포스팅을 하다보면 예제 소스를 많이 사용하게 되고, Github 에 예제 소스를 올려놓고 참고하는 방식을 사용합니다. 그런데 만약 포스팅을 한 이후에 해당 리파지토리에 변화가 생긴다면 어떨까요? 계속 수정과 커밋을 반복하면서 이전 소스와 많이 달라진다면, 해당 포스트에 가서 커밋버전을 적어놓거나 수정을 해야할 겁니다.

hexo-github 는 이런 문제를 해결할 수 있는 플러그인입니다. 해당 리파지토리의 커밋버전과 실시간 타임라인 정보를 뱃지 형태로 보여줍니다.

https://github.com/akfish/hexo-github

반응형이라 꽤 이쁘게 동작하네요. 클릭하면 해당 커밋 버전의 소스 페이지로 이동합니다.

설치

Hexo 설치한 폴더에서 다음 명령어로 플러그인을 설치합니다.

1
npm install hexo-github --save

사용법

1
{% github user repo referenced_commit [auto_expand = true | false] [width = 100%] %}

태그 플러그인 형식으로 동작합니다. 태그 플러그인은 코드를 쉽게 삽입하는 Hexo 의 문법이라고 보시면 되겠습니다. ([] 로 표시되어 있는 옵션은 필수값이 아닙니다.)

Hexo 태그 플러그인 (Tag plugins) 살펴보기
옵션 설명
user GitHub 유저 이름
repo GitHub 유저의 리파지토리 이름
commit 커밋 버전 (SHA). full SHA 가 아니더라도 가능합니다.
auto_expand 타임라인이 처음부터 확장된 채로 표시됩니다. 따라서 sync 는 처음 열릴 때 한번만 수행됩니다. true 또는 false. (Optional, 기본값은 false)
width 위젯의 넓이. 유효한 CSS 값이면 입력 가능합니다. (Optional, 기본값은 100%)

결과

1
{% github futurecreator SpringBootGetStarted eb86ae0 %}
HelloController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Controller
public class HelloController {

	@RequestMapping("/hello")
	public String hello(Model model,
			@RequestParam(value = "name", defaultValue = "Unknown", required = false) String name) {

		String greetings = "Hello, " + name + "!";

		model.addAttribute("greetings", greetings);

		return "hello";
	}
}

해당 커밋버전이 잘 표시되네요. github 에 소스를 올려놓고 하는 포스팅에는 무조건 써야겠습니다. Hexo 추천 플러그인 포스트를 작성 중인데 양이 너무 많아서 한꺼번에는 힘들고 한두개씩 계속 올릴 예정입니다. 제가 직접 사용해보고 유용한 플러그인을 소개하도록 하겠습니다.

Share