남아있는 일

12 February 2018


unity

이틀내내 블로그를 꾸며서 어느정도 그럴듯한 모습을 갖추게 되었다. 아무래도 처음 하다보니 이것저것 문제를 맞닥뜨리기도 했는데, 생각나는 사항들은 다음과 같다.

  1. 댓글 수가 표시되지 않음 -> data-disqus-identifier를 넣음으로 해결
  2. 코드 하이라이트가 안됨 -> 직접 rouge-github.scss를 가져와 넣음으로 해결
  3. 마크 다운 문법 일부 사용 불가
  4. 블로그 리스트 페이지에서 모바일 창일때 네비게이션 아이콘이 표시되지 않음
  5. 다른 페이지에서 섹션 연동이 안됨

댓글 수야 간단하게 해결되었으니 그리 문제가 크지 않았으나 2번 3번의 경우는 굉장히 의외인 부분이었다. 마크다운을 사용해보려고 Jekyll을 사용했는데 현재 글 작성법은 마크다운이라기 보단 부트스트랩에 가깝다. Github에서 소개하는 #, ##, --- 이런거 다 안된다. _config.yml에도 엄연히 적용하라고 명시가 되었건만 왜 안되는지 모르겠다. 코드 하이라이트 부분도 직접 구현해줬으니 아무래도 직접 플러그인을 넣어야 구현이 될듯 싶다.

4번은 꽤나 심각한 문제였다. 데스크톱 화면이야 네비게이션 아이콘따위 신경쓰지 않아도 상관없지만, 모바일 사용 시 특정 페이지에서 네비게이션 아이콘이 표시되지 않으면 일관성도 해칠뿐더러 굉장히 불편해진다. 처음에는 내가 편집하는 과정에서 뭘 잘못건드렸나 싶었지만 코드내에 크게 다른점은 없었고 브라우저에서는 javascript의 undefined 에러를 내고 있는데 바로 윗 줄에 정의가 되어 있는데 왜 에러가 생기나 했다. 결론적으로 말하자면 유니코드 문제였다.


var $nav_a = $('#nav a.scrolly');
// Scrolly-fy links.
	$nav_a
		.scrolly() //문제가 되었던 부분
		.on('click', function(e) {

			var t = $(this),
				href = t.attr('href');

			if (href[0] != '#')
				return;

			e.preventDefault();

			// Clear active and lock scrollzer until scrolling has stopped
				$nav_a
					.removeClass('active')
					.addClass('scrollzer-locked');

			// Set this link to active
				t.addClass('active');

		});

// Initialize scrollzer.
	var ids = [];

	$nav_a.each(function() {

		var href = $(this).attr('href');

		if (href[0] != '#')
			return;

		ids.push(href.substring(1));

	});

	$.scrollzer(ids, { pad: 200, lastHack: true });

// Header (narrower + mobile).

// Toggle.
	$(
		'<div id="headerToggle">' +
			'<a href="#header" class="toggle"><\a>' +
		'<\div>'
	)
		.appendTo($body);

// Header.
	$('#header')
		.panel({
			delay: 500,
			hideOnClick: true,
			hideOnSwipe: true,
			resetScroll: true,
			resetForms: true,
			side: 'left',
			target: $body,
			visibleClass: 'header-visible'
		});

// Fix: Remove transitions on WP<10 (poor\buggy performance).
	if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
		$('#headerToggle, #header, #main')
			.css('transition', 'none');
	});

{\%- unless _sections == null -\%}
  {\%- for _sect in _sections -\%}
    {\%- assign _title = _sect.title | default: _sect.layout | default: 'Untitled' -\%}
    {\%- assign _slug = _title | slugify -\%}
    {\%- assign _icon = _sect.icon | default: 'fa-file' -\%}
    <li><a href="#" id="-link" class="scrolly"><span class="icon "></span></a></li>
  {\%- endfor -\%}
{\%- endunless -\%}

Prologue 테마는 Post의 Slug 값을 id로 삼아 Jquery로 조회하여 스크롤링을 하고 있었다. 헌데 내 포스트 글의 제목이 한글로 되어있으니 객체의 정의가 제대로 되지 않아 계속해서 에러를 내고 있는 상황이었다. 포스트 이름을 영어로 바꿔보자 네비게이션 아이콘도 정상 출력되고 스크롤링도 문제없이 작동했다. 그렇다면 이를 해결하려면 Jquery 셀럭터가 유니코드를 지원하도록 해야하는데 .. Jquery는 자체적으로 UTF-16 인코딩 밖에 안된다고 한다. Header에 meta 데이터의 charset을 UTF-8 바꿔보고 script 자체에 인코딩 값을 설정해주기도 했지만 소용이 없었다. 시각을 달리하여 slug 값을 사용하지 않고 page의 ID 값을 넣어보기도 했으나 아이콘 미표시에 더해 스크롤 기능도 작동하지 않는다. 아무래도 해결에 시간이 걸릴듯.

5번은 에러는 아니고 욕심인데, Home에서 페이지마다 Section이 나눠지는 것처럼 다른 페이지에서도 그 기능을 사용하고 싶은데 이 테마에서는 나눠놓는 기능은 딱히 없고 Section 폴더에 넣으면 몽땅 Home에 반영이 되는듯 하다. 아니 애초에 Section이라는 파라미터를 어떻게 구현해놨는지는 몰라도 _config.yml에 collections: [sections] 한 줄만 달랑 적혀있는데 연동이 훌륭하게 잘된다. 저 [ ]문법은 Jekyll 도큐먼트를 봐도 안적혀있는데 도통 어떻게 동작하는지 모르겠다. 대체 어떻게 동작하는걸까 .. 앞으로도 남은 일이 많다.