[블로그개발_07] Blog theme 적용해보기 (+bower, +webjars) : origoni's Blog

06/02
2015

05:25:17

0, 0

In SpringBlog from Millky

[블로그개발_07] Blog theme 적용해보기 (+bower, +webjars)

http://millky.com/@origoni/post/1152

블로그개발 시리즈 - 다른글 : http://millky.com/@origoni/folder/30/post/list

라이브 데모 : http://blog.millky.com/post/list

자바 웹 개발 시작하기 : http://www.slideshare.net/origoni/presentations

지난시간에 이어 UI부분을 진행해본다.

다른글 : http://millky.com/@origoni/folder/30/post/list

사실 이번글을 쓰기 전에 살짝 고민을 했다. 서버쪽을 먼저 할 것인가? UI부분을 먼저 진행할 것인가 말이다.

UI부분을 먼저 시작한 이유는.. 보기 좋은 것이 먹기도 좋다고. 일단 뷰가 있는 것이 앞으로 개발하는 동안 작업하기 더 편할 것 같아서이다.

참고로 서버쪽도 부족한 나이지만 프론트쪽은 정말 별로 아는것이 없다.

그래서 UI부분은 최대한 간단하게 진행하도록 하겠다.

또 잡설이 길어지고 있다. 본론으로 들어가보자.

템플릿 찾아보기

Bootstrap을 사용하기로 하였고. Webjars로 프로젝트에 첨부도 하였다. [링크]

부트스트랩 기본 템플릿들을 이용해서 블로그를 만들어 볼 수도 있겠지만.

역시 이쁜것이 좋다고 오픈소스로 된 탬플릿 들을 검색해 보자.

https://github.com/search?utf8=%E2%9C%93&q=bootstrap+blog+theme

가장 위의 것은 tumblr-theme고.. 그 아래 것을 보니.

https://github.com/IronSummitMedia/startbootstrap-clean-blog

http://startbootstrap.com/template-overviews/clean-blog/

아주 깔끔하고 좋다. (jekyll 버전도 있다! 깃헙에 블로그 만드실 분들은 고고 ㅋ)

이렇게 좋은 것들을 보면 github star도 좀 눌러주고. 홈페이지 가서 광고도 좀 눌러주자 ^^;

부트 스트랩 테마 파는 곳이 많지만. 일단은 오픈소스로 찾아서 해보고 구입은 나중에 잘 만들 수 있게 되면 하도록 하자.

그리고 개인적으로는.. 오픈소스 버전이 더 좋다. bower 사용도 가능하고...!

참고로 어드민 페이지가 필요할때는 AdminLTE 정말 강추 한다. https://github.com/almasaeed2010/AdminLTE

...

이렇게 테마는 골랐는데... 어떻게 적용을 해야 할까?

우선 해당 탬플릿이 webjars 에 등록되어있는지 확인해보자.

있다?! 사실 내가 등록했다 ㅠ

처음에는 어떤분이 벌써 bower에 올려주셔서 webjars에만 등록했는데! 알고보니 최신 버전이 아니었다.

그래서 내가 한번 더 등록했다.

그 과정을 살펴보자.

우선 코드를 포크하고. (여기서 별을 눌러주는것을 잊지 말자! ㅋㅋ)

bower.json 파일을 생성하고..

태그를 따고 (릴리즈)

bower에 등록한다.

brew install npm
npm install -g bower
bower login
bower register origoni-startbootstrap-clean-blog https://github.com/origoni/startbootstrap-clean-blog.git

http://bower.io/search/?q=origoni-startbootstrap-clean-blog

등록이 완료되면 검색이 가능한데. 시간이 좀 걸린다. (30분?)

완료되면 그리고. webjars에 등록한다.

http://search.maven.org/#search%7Cga%7C1%7Corigoni-startbootstrap-clean-blog

이것도. 마찬가지로 메이븐배포될때까지 시간이 걸린다... (3시간?)

이렇게 등록이 되었다.

이제 스프링 블로그 프로젝트에 등록해보자.

여기까지 복잡한(?) 과정을 거치고 드디어 개발을... 해보자.

우선 pom.xml에 dependency를 추가한다.

<dependency>
	<groupId>org.webjars.bower</groupId>
	<artifactId>origoni-startbootstrap-clean-blog</artifactId>
	<version>1.0.3</version>
</dependency>

그리고 블로그 UI 코드는 startbootstrap-clean-blog 템플릿 에 있는 기본 파일을 가지고 왔다.

거기에 라이브러리만 살짝 수정을 해 준다.

<link rel="stylesheet" href="/webjars/origoni-startbootstrap-clean-blog/1.0.3/css/clean-blog.min.css">

...

<script src="/webjars/origoni-startbootstrap-clean-blog/1.0.3/js/clean-blog.min.js"></script>

코드는 아래에 있다.

https://github.com/origoni/Spring-Blog/blob/v0.0.7/src/main/webapp/WEB-INF/jsp/blog.jsp

컨트롤러도 좀 수정하고... 최종 모습은 아래와 같으면 되겠다~