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

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

[add-github-card-to-hexo]

hexo-github 플러그인

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

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

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

설치

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

npm install hexo-github --save

사용법

{% 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%)

결과

{% github futurecreator SpringBootGetStarted eb86ae0 %}

⚠️ 참고: hexo-github 플러그인은 더 이상 유지보수되지 않아 해당 기능을 사용할 수 없습니다. 대신 GitHub 공식 위젯이나 직접 링크를 사용하세요.

HelloController.java

@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 추천 플러그인 포스트를 작성 중인데 양이 너무 많아서 한꺼번에는 힘들고 한두개씩 계속 올릴 예정입니다. 제가 직접 사용해보고 유용한 플러그인을 소개하도록 하겠습니다.

Related Posts

• 워드프레스보다 쉬운 Hexo 블로그 시작하기
• Hexo 추천 테마, Hueman 적용하기
• Hexo 기본 사용법
• Hexo 태그 플러그인 (Tag plugins) 살펴보기
• Hexo 네임카드 추가하기 (Github Card)
• Hexo 에 Github 저장소 타임라인 (Repository timeline) 정보 추가하기
• Hexo 블로그에 구글 애드센스(Adsense) 추가하기