헥소(HEXO) 사이트 색상 블록 적용하기

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

웹브라우저니깐 색상 적용

두개 포스트에 색상 블록을 적용해봤네요

플러그인

hexo-tag-colorblock 이 있어서 적용을 해봤는데
업데이트가 제대로 되어 있지 않아서
npmjs 와 github 소스가 틀립니다

나름대로 수정해서 사용중입니다

혹시 나중에 또 사용 할 때 참고 하려고 수정내역을 남겨둡니다

소스

해당 플러그인의 소스는 아주 심플하게 index.js 만 있습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//index.js
hexo.extend.tag.register('colorblock', function(args){
	var config = hexo.config.colorblock || {};
	var cwidth = config.width || 10;
	var cheight = config.height || config.width;
	var cistext = config.text;

	var color = args[0];
	var width = parseInt(args[1]) || cwidth;
	var height = parseInt(args[2]) || (width || cheight);
	var istext = args[3] || cistext;
	var text = (istext === 'true') ? color : "";
	
	return '<svg width="'
		+ width +'" height="'
		+ height +'"><rect width="'
		+ width + '" height="'
		+ height + '" fill="'
		+ color + '"/></svg>&nbsp;'
		+ text;
  });

사용법

_config.yml 에 설정 추가

1
2
3
4
5
6
## color block
colorblock:
  width: 15
  height: 15
  # whether you want to show hex code
  text: false

markdown 페이지에서 

1
{% colorblock [hexcode] [width] [height] [hexcodeDisplay] %}

이렇게 사용하면 됩니다

{% colorblock #000000 15 15 true %}

 #000000

{% colorblock #ADD8E6 %}

 #ADD8E6

연관포스트